/* ============================================================
   SITE.CSS — shared chrome + page components
   Loaded on every page after styles.css.

   Everything in here was either (a) lifted out of index.html's
   inline <style> block so the four new pages inherit it, or
   (b) added for the Foundry / Solutions / Sovereign Enterprise
   pages. No token or base-component values are changed — this
   file only adds and composes.
============================================================ */

/* ============================================================
   MIGRATED FROM index.html INLINE <style>
============================================================ */
.cap-icon { opacity: 1; }
.cap-icon svg { width: 48px; height: 48px; stroke: url(#cap-icon-grad); }
.section, .section--alt, .section--both { border-top: none !important; }

/* Header CTA as a secondary (outline-only) button */
#nav-cta.nav-cta--secondary {
  background: transparent;
  border: 1px solid currentColor;
  border-radius: 2px;
  padding: 7px 18px;
  transition: background .3s ease, color .3s ease, border-color .3s ease;
}
.nav--top  #nav-cta.nav-cta--secondary,
.nav--dark #nav-cta.nav-cta--secondary {
  color: #ffffff;
  border-color: rgba(255,255,255,0.45);
}
.nav--light #nav-cta.nav-cta--secondary {
  color: #0d0d0e;
  border-color: rgba(13,13,14,0.35);
}
.nav--top  #nav-cta.nav-cta--secondary:hover,
.nav--dark #nav-cta.nav-cta--secondary:hover {
  background: rgba(255,255,255,0.10);
  border-color: rgba(255,255,255,0.70);
}
.nav--light #nav-cta.nav-cta--secondary:hover {
  background: rgba(13,13,14,0.06);
  border-color: rgba(13,13,14,0.60);
}

/* Once the section below the hero reaches the header, the CTA flips from the
   secondary outline to the filled primary state (purple fill, white text).
   Toggled via the .nav-cta--solid class added in main.js.
   Selector carries #nav + #nav-cta so it outranks the per-state rules. */
#nav #nav-cta.nav-cta--solid {
  background: var(--accent);
  color: #ffffff;
  border-color: transparent;
  box-shadow: var(--cta-shadow);
}
#nav #nav-cta.nav-cta--solid:hover {
  background: var(--accent);
  border-color: transparent;
  opacity: .92;
}

/* Hero primary button: equal left/right padding (the base rule leaves 24px
   left / 8px right, which was balancing the arrow that has been removed). */
#hero .btn-primary { padding: 12px 24px; }

/* Get Started button(s): center the label now that the arrow icon is gone. */
#hero .btn-primary,
#nav-cta.nav-cta {
  justify-content: center;
}

/* ============================================================
   NAV — 3-item structure + active page state
   (About moved to the footer; the header spine is SE · Foundry · Solutions)
============================================================ */

/* Layout override for the base `1fr auto 1fr` grid in styles.css.
   The links used to sit in their own centre track, floating in the middle of
   the bar; they now pack right so the links, the theme toggle and the CTA read
   as one group. Vertical centring is unchanged. */
#nav .nav__inner {
  display: flex;
  align-items: center;
  gap: 34px;
}
/* The auto margin does the right-packing, NOT justify-content: flex-end.
   They look identical until the bar is too narrow for its contents — at which
   point flex-end overflows to the *left* and clips the logo, while an auto
   margin collapses to zero and everything stays put. */
.nav__logo { margin-right: auto; }
#nav .nav__inner .nav__actions { justify-self: auto; }

.nav__links a {
  position: relative;
  padding-bottom: 2px;
}
.nav__links a[aria-current="page"]::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -3px;
  height: 1px;
  background: currentColor;
  opacity: .8;
}
.nav--top  .nav__links a[aria-current="page"],
.nav--dark .nav__links a[aria-current="page"] { color: #ffffff; }
.nav--light .nav__links a[aria-current="page"] { color: var(--text); }

/* Mobile drawer needs to work now that navigation spans real pages —
   index.html previously suppressed the hamburger because it was a
   single-page site with in-page anchors only. */
.nav__mobile-drawer a[aria-current="page"] { color: var(--accent-text); }

/* On narrow screens the header carries logo + theme toggle + CTA + hamburger.
   .nav__hamburger is absolutely positioned at the right gutter, and
   .nav__actions is justify-self:end — so once the hamburger is visible the two
   overlap. Reserve room for it, and tighten the CTA so its label stays on one
   line. Below 360px there isn't room for both, so the CTA drops out; the drawer
   already carries it. */
@media (max-width: 768px) {
  .nav__actions { padding-right: 38px; gap: 10px; }
  #nav-cta.nav-cta--secondary { padding: 6px 12px; }
  .nav-cta__label { font-size: 13px; white-space: nowrap; }
  /* No links to separate here, and the 34px gap is width the logo needs. */
  #nav .nav__inner { gap: 12px; }
}
@media (max-width: 360px) {
  #nav-cta { display: none; }
}

/* ============================================================
   PAGE HEAD — light editorial header for interior pages

   The home page owns the dark, full-bleed tunnel hero; that is the
   brand moment and it should happen once. Interior pages instead open
   on a light header so it is immediately obvious you have navigated
   somewhere. Borrowed from the design-system reference: eyebrow →
   large tracked headline → single-sentence standfirst, on flat
   porcelain with a hairline close. No canvas, so these pages also
   skip three.js entirely.
============================================================ */
.page-head {
  position: relative;
  overflow: hidden;
  background: var(--page-bg);
  border-bottom: 1px solid var(--border);
  padding: 176px 0 80px;
}
.page-head__inner {
  position: relative;
  z-index: 1;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.page-head__eyebrow {
  display: block;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.075em;
  text-transform: uppercase;
  color: var(--accent-text);
  margin-bottom: 24px;
}
.page-head__h1 {
  font-size: 64px;
  font-weight: 400;
  line-height: 1.06;
  letter-spacing: -2.5px;
  color: var(--text);
  max-width: 15ch;
}
.page-head__lede {
  font-size: 19px;
  font-weight: 400;
  line-height: 1.55;
  color: var(--muted);
  max-width: 56ch;
  margin-top: 24px;
}
.page-head__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 36px;
}

/* Decorative brand mark — concentric triangles echoing both the logo
   and the hero tunnel's cross-section. Hairline, near-invisible; it
   gives the header a focal point without adding a second surface. */
.page-head__mark {
  position: absolute;
  top: 50%;
  right: calc(var(--gutter) - 40px);
  transform: translateY(-42%);
  width: 460px;
  height: 460px;
  color: var(--accent);
  opacity: .16;
  pointer-events: none;
}
.page-head__mark svg { width: 100%; height: 100%; display: block; }
:root[data-theme="dark"] .page-head__mark { opacity: .26; }

@media (max-width: 1024px) {
  .page-head { padding: 148px 0 64px; }
  .page-head__h1 { font-size: 52px; letter-spacing: -2px; }
  .page-head__mark { width: 340px; height: 340px; opacity: .1; }
}
@media (max-width: 768px) {
  .page-head { padding: 128px 0 56px; }
  .page-head__h1 { font-size: 38px; line-height: 1.1; letter-spacing: -1.2px; max-width: none; }
  .page-head__lede { font-size: 17px; margin-top: 20px; }
  .page-head__mark { display: none; }
}
@media (max-width: 480px) {
  /* Ragged stacked buttons read as a mistake; full-width reads as a choice. */
  .page-head__actions { flex-direction: column; align-items: stretch; }
  .page-head__actions > a { width: 100%; }
}

/* Outline button for light surfaces (the .btn-ghost twin) */
.btn-line {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 56px;
  padding: 0 24px;
  border: 1px solid rgba(13,13,14,0.35);
  border-radius: 2px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  color: var(--text);
  transition: background .25s ease, border-color .25s ease;
}
.btn-line:hover {
  background: rgba(13,13,14,0.05);
  border-color: rgba(13,13,14,0.6);
}
:root[data-theme="dark"] .btn-line { border-color: rgba(255,255,255,0.30); }
:root[data-theme="dark"] .btn-line:hover {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.55);
}

/* ============================================================
   PAGE HERO — compact dark variant of the home hero
   Retained for any page that wants the canvas treatment.
============================================================ */
#hero.hero--page {
  height: auto;
  min-height: 0;
  padding: 190px 0 120px;
}
.hero--page .hero__content { max-width: 900px; gap: 20px; }
.hero--page .hero__h1 {
  font-size: 56px;
  line-height: 64px;
}
.hero--page .hero__subtitle {
  font-size: 20px;
  line-height: 30px;
  max-width: 660px;
}
.hero__eyebrow {
  font-size: 12px;
  font-weight: 600;
  line-height: 24px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: #a1a1ff;
}
.hero__meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 4px;
}
.hero__chip {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .2px;
  color: rgba(255,255,255,0.70);
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: 100px;
  padding: 5px 13px;
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 4px;
}
/* Secondary action, sized to sit beside .btn-primary (56px tall). Styled for
   dark surfaces — the page heroes and the paper call-out. */
.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 56px;
  padding: 0 24px;
  border: 1px solid rgba(255,255,255,0.40);
  border-radius: 2px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  color: #ffffff;
  transition: background .25s ease, border-color .25s ease;
}
.btn-ghost:hover {
  background: rgba(255,255,255,0.10);
  border-color: rgba(255,255,255,0.70);
}

@media (max-width: 768px) {
  #hero.hero--page { padding: 140px 0 88px; }
  .hero--page .hero__h1 { font-size: 38px; line-height: 46px; letter-spacing: -1.2px; }
  .hero--page .hero__subtitle { font-size: 17px; line-height: 26px; }
}

/* ============================================================
   PILLAR CARDS — home page routing into the four sections
============================================================ */
.pillar-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}
.pillar-card {
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  background: var(--page-bg);
  transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}
.pillar-card:hover {
  border-color: var(--accent);
  box-shadow: 0 8px 32px rgba(94,94,255,0.18);
  transform: translateY(-2px);
}
.pillar-card__label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--accent-text);
}
.pillar-card__title {
  font-size: 28px;
  font-weight: 400;
  letter-spacing: -1px;
  line-height: 1.15;
  color: var(--text);
}
.pillar-card__body {
  font-size: 15px;
  line-height: 23px;
  color: var(--muted);
  flex: 1;
}
.pillar-card__list { display: flex; flex-direction: column; gap: 7px; }
.pillar-card__list li {
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted);
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.pillar-card__list li::before {
  content: '';
  flex-shrink: 0;
  display: block;
  width: 4px; height: 4px;
  background: var(--accent);
  border-radius: 50%;
  margin-top: 8px;
  opacity: .6;
}
.pillar-card__cta {
  font-size: 14px;
  font-weight: 500;
  color: var(--accent-text);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.pillar-card:hover .pillar-card__cta { gap: 10px; }
.pillar-card__cta span { transition: gap .25s ease; }

/* ============================================================
   MINIMAL LAYOUT PRIMITIVES

   Borrowed from the design-system reference: surfaces are earned, not
   default. These components carry no border and no fill — the page is
   the card — so a section reads as a few confident lines rather than a
   wall of boxes. Bordered `.card` / `.cap-card` stay available for
   places that genuinely need containment.
============================================================ */

/* Section header, tightened: eyebrow → headline → one standfirst line. */
.head {
  max-width: 780px;
  margin-bottom: 64px;
}
.head--center { margin-left: auto; margin-right: auto; text-align: center; }
.head__eyebrow {
  display: block;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.075em;
  text-transform: uppercase;
  color: var(--accent-text);
  margin-bottom: 20px;
}
.head__h2 {
  font-size: 44px;
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -2px;
  color: var(--text);
}
.head__lede {
  font-size: 18px;
  line-height: 1.6;
  color: var(--muted);
  margin-top: 20px;
  /* Carries its own measure so it stays readable when used standalone,
     outside a .head wrapper (e.g. a closing note under a sub-label). */
  max-width: 780px;
}
.head__lede strong { color: var(--text); font-weight: 500; }

@media (max-width: 768px) {
  .head { margin-bottom: 44px; }
  .head__h2 { font-size: 32px; letter-spacing: -1.2px; }
  .head__lede { font-size: 16px; }
}

/* Borderless three-up: a rule, a title, one line. */
.tri {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 48px;
}
.tri__item { padding-top: 20px; border-top: 1px solid var(--border); }
.tri__item--accent { border-top-color: var(--accent); }
.tri__label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.075em;
  text-transform: uppercase;
  color: var(--accent-text);
  margin-bottom: 12px;
}
.tri__title {
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -.4px;
  line-height: 1.25;
  color: var(--text);
  margin-bottom: 10px;
}
.tri__body {
  font-size: 15px;
  line-height: 1.6;
  color: var(--muted);
}

/* Stage rail — the Foundry model. Big numeral, name, one promise, chips. */
.rail {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;
}
.rail__step { display: flex; flex-direction: column; gap: 14px; }
.rail__num {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.075em;
  color: var(--accent-text);
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
}
.rail__name {
  font-size: 24px;
  font-weight: 400;
  letter-spacing: -.8px;
  line-height: 1.1;
  color: var(--text);
}
.rail__body {
  font-size: 15px;
  line-height: 1.6;
  color: var(--muted);
}
/* Grid items stretch to the row height, so `margin-top: auto` baselines
   every chip row against the tallest column. */
.rail__chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: 4px; }

/* Five-across variant, for the intelligence planes. */
.rail--5 { grid-template-columns: repeat(5, 1fr); gap: 28px; }
.rail--5 .rail__name { font-size: 20px; letter-spacing: -.5px; }
.rail--5 .rail__body { font-size: 14px; }

/* Pull-quote — the page's loudest line, given room to be loud. */
.pull {
  max-width: 920px;
  margin: 0 auto;
  text-align: center;
}
.pull__quote {
  font-size: 34px;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: -1.2px;
  color: var(--text);
}
.pull__quote em { font-style: normal; color: var(--accent-text); }
.pull__attr {
  font-size: 13px;
  letter-spacing: 0.075em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 24px;
}
@media (max-width: 768px) {
  .pull__quote { font-size: 24px; letter-spacing: -.6px; }
}

/* Diagnostic prompt — closes each pillar with the question a reader should
   actually take away and put to their own organisation. The recurring device
   is what turns the page from a summary into a guideline. */
.ask {
  max-width: 760px;
  margin-top: 48px;
  padding-left: 22px;
  border-left: 2px solid var(--accent);
}
.ask__label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.075em;
  text-transform: uppercase;
  color: var(--accent-text);
  margin-bottom: 10px;
}
.ask__q {
  font-size: 19px;
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: -.2px;
  color: var(--text);
}
@media (max-width: 768px) {
  .ask { margin-top: 36px; }
  .ask__q { font-size: 17px; }
}

/* Inline reference back to the paper. Quiet by design — it should be findable
   at every pillar without competing with the page's own argument. */
.ref {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 28px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--muted);
}
.ref a { color: var(--accent-text); font-weight: 500; }
.ref a:hover { text-decoration: underline; }

/* Onward link inside a borderless three-up. */
.tri__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 16px;
  font-size: 14px;
  font-weight: 500;
  color: var(--accent-text);
}

/* Pill tag — 99px geometry from the design-system reference. Outlined
   rather than filled, so it reads on both the white and tinted surfaces
   (a --alt-bg fill disappears entirely inside a .section--alt). */
.chip {
  display: inline-flex;
  align-items: center;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .1px;
  color: var(--muted);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 99px;
  padding: 5px 12px;
  white-space: nowrap;
}
.chip--accent {
  color: var(--accent-text);
  border-color: rgba(94,94,255,0.40);
  background: rgba(94,94,255,0.06);
}

/* Compact four-step timeline — replaces the tall journey rows. */
.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid var(--border);
}
.steps__item {
  padding: 28px 28px 0 0;
  border-right: 1px solid var(--border);
  position: relative;
}
.steps__item:last-child { border-right: none; padding-right: 0; }
.steps__item::before {
  content: '';
  position: absolute;
  top: -1px; left: 0;
  width: 28px; height: 1px;
  background: var(--accent);
}
.steps__meta {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 12px;
}
.steps__n {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.075em;
  color: var(--accent-text);
}
.steps__time { font-size: 12px; color: var(--muted); }
.steps__title {
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -.3px;
  line-height: 1.25;
  color: var(--text);
  margin-bottom: 8px;
}
.steps__body {
  font-size: 14px;
  line-height: 1.55;
  color: var(--muted);
}

/* Borderless capability grid — icon, title, one line. */
.feat {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 56px 48px;
}
.feat__item { display: flex; flex-direction: column; gap: 14px; }
.feat__icon { width: 28px; height: 28px; color: var(--accent-text); }
.feat__icon svg {
  width: 28px; height: 28px;
  stroke: currentColor;
  stroke-width: 1.5;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.feat__title {
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -.3px;
  line-height: 1.25;
  color: var(--text);
}
.feat__body {
  font-size: 15px;
  line-height: 1.6;
  color: var(--muted);
}

/* Quiet three-up of onward links. */
.onward {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 48px;
}
.onward__item {
  padding-top: 20px;
  border-top: 1px solid var(--border);
  transition: border-top-color .25s ease;
}
.onward__item:hover { border-top-color: var(--accent); }
.onward__label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.075em;
  text-transform: uppercase;
  color: var(--accent-text);
  margin-bottom: 10px;
}
.onward__title {
  font-size: 20px;
  font-weight: 400;
  letter-spacing: -.5px;
  color: var(--text);
  margin-bottom: 8px;
}
.onward__body {
  font-size: 14px;
  line-height: 1.55;
  color: var(--muted);
}

@media (max-width: 1024px) {
  .tri, .onward { grid-template-columns: repeat(2, 1fr); gap: 40px; }
  .rail, .rail--5 { grid-template-columns: repeat(2, 1fr); gap: 40px 32px; }
  .feat { grid-template-columns: repeat(2, 1fr); gap: 44px 40px; }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .steps__item { padding-right: 24px; }
  .steps__item:nth-child(2n) { border-right: none; padding-right: 0; }
  .steps__item:nth-child(n+3) { padding-top: 28px; border-top: 1px solid var(--border); }
}
@media (max-width: 768px) {
  .tri, .onward, .rail, .rail--5, .feat { grid-template-columns: 1fr; gap: 36px; }
  .steps { grid-template-columns: 1fr; }
  .steps__item { border-right: none; padding-right: 0; }
  .steps__item:nth-child(n+2) { padding-top: 28px; border-top: 1px solid var(--border); }
}

/* ============================================================
   SECTION UTILITIES
============================================================ */
.section-lede {
  font-size: 18px;
  line-height: 30px;
  color: var(--muted);
  max-width: 720px;
  margin-top: 20px;
}
.section-lede strong { color: var(--text); font-weight: 500; }

.sub-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}
.sub-label::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}
.sub-label--accent { color: var(--accent-text); }

.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .4px;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 100px;
  border: 1px solid var(--border);
  color: var(--muted);
  white-space: nowrap;
}
.pill--live {
  color: var(--accent-text);
  border-color: rgba(94,94,255,0.40);
  background: rgba(94,94,255,0.07);
}
.pill--soon {
  color: var(--muted);
  border-style: dashed;
}

/* Lead-in phrase inside a .compare-row (the row is a flex container, so the
   whole sentence must sit in one child element to wrap as prose). */
.compare-row__lead { font-weight: 500; color: var(--text); }

/* Monospace call-out (the ADAPT priority score) */
.formula {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text);
  background: var(--alt-bg);
  border: 1px solid var(--border);
  border-left: 2px solid var(--accent);
  border-radius: 4px;
  padding: 18px 22px;
  overflow-x: auto;
}
.formula__note {
  display: block;
  font-family: var(--font);
  font-size: 13px;
  color: var(--muted);
  margin-top: 10px;
}

/* ============================================================
   SOLUTIONS
============================================================ */
.sol-panel { display: flex; flex-direction: column; gap: 40px; }

.sol-intro {
  border-left: 2px solid var(--accent);
  padding-left: 20px;
}
.sol-intro__heading {
  font-size: 28px;
  font-weight: 400;
  letter-spacing: -1px;
  line-height: 1.2;
  color: var(--text);
  margin-bottom: 10px;
}
.sol-intro__body {
  font-size: 15px;
  line-height: 24px;
  color: var(--muted);
  max-width: 640px;
}

.sol-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}
.sol-grid--3 { grid-template-columns: repeat(3, 1fr); }

.sol-card {
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 25px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: border-color .25s ease, box-shadow .25s ease;
}
.sol-card:hover {
  border-color: var(--accent);
  box-shadow: 0 8px 32px rgba(94,94,255,0.18);
}
.sol-card--idea { background: var(--alt-bg); }
.sol-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.sol-card__title {
  font-size: 19px;
  font-weight: 500;
  letter-spacing: -.4px;
  line-height: 1.25;
  color: var(--text);
}
.sol-card__body {
  font-size: 14px;
  line-height: 21px;
  color: var(--muted);
}
/* Push the metrics/footer to the bottom so cards in a row align, without
   stretching the prose itself — `flex: 1` on every body would blow the gap
   between paragraphs open in cards that have more than one. */
.sol-card__body:last-of-type { margin-bottom: auto; }
.sol-card__metrics {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
}

/* A group with a single entry (several industries have exactly one delivered
   system) spans the full row rather than leaving half the grid empty — and its
   metrics spread across four columns at that width. */
.sol-grid > .sol-card:only-child { grid-column: 1 / -1; }
.sol-grid > .sol-card:only-child .sol-card__body { max-width: 720px; }
.sol-grid > .sol-card:only-child .sol-card__metrics { grid-template-columns: repeat(4, 1fr); }
.sol-card__foot {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}
.sol-tag {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .2px;
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: 2px;
  padding: 3px 8px;
}
.sol-tag--adapt {
  color: var(--accent-text);
  border-color: rgba(94,94,255,0.35);
}

/* Industry rail — same visual language as the Industries tabs, but the
   panel holds two stacked groups (delivered work, then thought starters). */
#solutions-index .industries__layout {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 40px;
  align-items: start;
}
#solutions-index .ind-panel { padding: 32px; }

/* ============================================================
   SOVEREIGN ENTERPRISE
============================================================ */
/* The paper call-out: dark card that echoes the hero surface. */
.paper-card {
  background: var(--hero-bg);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 4px;
  padding: 44px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 40px;
  align-items: center;
  position: relative;
  overflow: hidden;
}
.paper-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, rgba(130,115,255,0.22) 0%, rgba(130,115,255,0) 55%);
  pointer-events: none;
}
.paper-card__inner { position: relative; z-index: 1; }
.paper-card__label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: #a1a1ff;
  margin-bottom: 14px;
}
.paper-card__title {
  font-size: 32px;
  font-weight: 400;
  letter-spacing: -1.2px;
  line-height: 1.2;
  color: #ffffff;
  margin-bottom: 12px;
}
.paper-card__body {
  font-size: 15px;
  line-height: 24px;
  color: rgba(255,255,255,0.62);
  max-width: 520px;
}
.paper-card__meta {
  font-size: 13px;
  color: rgba(255,255,255,0.42);
  margin-top: 16px;
}
.paper-card__actions {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex-shrink: 0;
}

/* Five Sovereignties / the five planes — reuses the base .adapt__item row
   (big gradient glyph + title + body). Only the glyph column is widened,
   since these are two-character numerals rather than single letters. */
.sov-list { display: flex; flex-direction: column; gap: 0; }
.sov-list .adapt__letter {
  width: 58px;
  font-size: 38px;
  line-height: 44px;
}
.sov-list .adapt__item { background: var(--page-bg); }
.sov-list--alt .adapt__item { background: var(--alt-bg); }
.sov-list .adapt__item-title {
  font-size: 18px;
  letter-spacing: -.3px;
}
.sov-list .adapt__item-kicker {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--accent-text);
  margin-bottom: 6px;
}
.sov-list .adapt__item-body { font-size: 14px; line-height: 21px; }

/* ------------------------------------------------------------
   THE MAP — terrain of five sovereignties.
   Not a sequence: two groups. The intelligence core (three regions,
   accent-ruled and faintly tinted — the centre of gravity) and how it
   takes hold (two, quieter). Each region states what it is, then the
   gap a reader feels: own it vs. rent it.
------------------------------------------------------------ */
.sov-group + .sov-group { margin-top: 52px; }
.sov-core { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.sov-edge { display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px; }

.sov {
  padding: 22px 22px 24px;
  border-top: 2px solid var(--border);
  display: flex;
  flex-direction: column;
}
/* Core regions read as the heart of the thesis. */
.sov--core {
  border-top-color: var(--accent);
  background: rgba(94,94,255,0.035);
}
.sov__own {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent-text);
  margin-bottom: 10px;
}
.sov__name {
  font-size: 24px;
  font-weight: 400;
  letter-spacing: -.6px;
  line-height: 1.1;
  color: var(--text);
  margin-bottom: 12px;
}
.sov--edge .sov__name { font-size: 21px; }
.sov__what {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--muted);
  margin-bottom: 22px;
}
/* margin-top:auto baselines the own/rent block to the card bottom so the
   five cards align regardless of copy length. */
.sov__gap { margin-top: auto; display: flex; flex-direction: column; gap: 10px; }
.sov__row { display: grid; grid-template-columns: 46px 1fr; gap: 12px; align-items: baseline; }
.sov__k {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  line-height: 1.5;
}
.sov__row--own .sov__k { color: var(--accent-text); }
.sov__row--rent .sov__k { color: var(--muted); }
.sov__v { font-size: 13px; line-height: 1.5; color: var(--muted); }
.sov__row--own .sov__v { color: var(--text); }

/* The door: the one conversation nudge + the honest v2 hook. */
.stand__actions {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 32px;
}

/* ------------------------------------------------------------
   SUB-NAV — subtle sticky strip under the fixed 82px header so
   the page's overall shape is visible and jumpable. Scrollspy
   active state set by a small inline script on the page.
------------------------------------------------------------ */
.subnav {
  position: sticky;
  top: 82px;
  z-index: 400;
  background: var(--page-bg);
  border-bottom: 1px solid var(--border);
}
.subnav__inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--gutter);
  height: 46px;
  display: flex;
  align-items: center;
  gap: 28px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.subnav__inner::-webkit-scrollbar { display: none; }
.subnav a {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .02em;
  color: var(--muted);
  white-space: nowrap;
  padding: 14px 0 12px;
  border-bottom: 2px solid transparent;
  transition: color .2s ease, border-color .2s ease;
}
.subnav a:hover { color: var(--text); }
.subnav a.active { color: var(--text); border-bottom-color: var(--accent); }

/* Anchored sections land below header + subnav. */
.section[id] { scroll-margin-top: 146px; }

/* ------------------------------------------------------------
   THE SOVEREIGN ARCHITECTURE — stack diagram.
   Three stacked systems; the Enterprise Ontology drawn as the
   foundation strip inside the Digital Brain band; a governance
   rail running the full height. Pure CSS, both themes.
------------------------------------------------------------ */
.arch { display: grid; grid-template-columns: 1fr 44px; gap: 10px; }
.arch__stack { display: flex; flex-direction: column; gap: 10px; }
.arch__band {
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--page-bg);
  padding: 20px 22px;
}
.arch__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 18px;
  flex-wrap: wrap;
}
.arch__sys {
  display: block;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent-text);
  margin-bottom: 6px;
}
.arch__name {
  font-size: 19px;
  font-weight: 500;
  letter-spacing: -.4px;
  color: var(--text);
}
.arch__gloss { font-size: 13px; line-height: 1.45; color: var(--muted); text-align: right; max-width: 46%; }
/* Foundation strip inside the brain band. */
.arch__found {
  margin-top: 16px;
  border: 1px solid rgba(94,94,255,0.40);
  background: rgba(94,94,255,0.06);
  border-radius: 3px;
  padding: 10px 14px;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
  font-size: 12.5px;
}
.arch__found-name { font-weight: 600; color: var(--accent-text); }
.arch__found-gloss { color: var(--muted); }
.arch__rail {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  border: 1px solid var(--border);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 12px 0;
}
@media (max-width: 768px) {
  .arch { grid-template-columns: 1fr; }
  .arch__rail { writing-mode: horizontal-tb; transform: none; padding: 10px; }
  .arch__gloss { text-align: left; max-width: none; }
}

/* ------------------------------------------------------------
   PLANE GRID — the internal planes of a system. Four boxes in a
   row plus one full-width strip beneath for the plane that "runs
   across" the others (Control). Boxed on purpose: these are the
   architecture's rooms, where the rest of the page stays sparse.
------------------------------------------------------------ */
.planes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.plane {
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.plane__gloss {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent-text);
}
.plane__name {
  font-size: 15.5px;
  font-weight: 500;
  letter-spacing: -.2px;
  color: var(--text);
}
.plane__body { font-size: 13px; line-height: 1.5; color: var(--muted); }
.plane--span {
  grid-column: 1 / -1;
  flex-direction: row;
  align-items: baseline;
  gap: 14px;
  border-color: rgba(94,94,255,0.40);
  background: rgba(94,94,255,0.05);
  flex-wrap: wrap;
}
.plane--span .plane__body { flex: 1; min-width: 240px; }
@media (max-width: 1024px) {
  .planes { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .planes { grid-template-columns: 1fr; }
  .plane--span { flex-direction: column; gap: 7px; }
}

/* ------------------------------------------------------------
   TRAP ASIDE — one quiet line per component section naming the
   default pattern the architecture replaces. Deliberately small.
------------------------------------------------------------ */
.trap {
  margin-top: 30px;
  display: flex;
  align-items: baseline;
  gap: 12px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--muted);
}
.trap__k {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  border: 1px dashed var(--border);
  border-radius: 99px;
  padding: 3px 9px;
  white-space: nowrap;
}

@media (max-width: 1024px) {
  .sov-core { grid-template-columns: repeat(2, 1fr); gap: 24px; }
}
@media (max-width: 768px) {
  .sov-core, .sov-edge { grid-template-columns: 1fr; gap: 18px; }
  .sov-group + .sov-group { margin-top: 36px; }
}

/* Ontology → Knowledge Graph → World Model progression */
.chain {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border: 1px solid var(--border);
  border-radius: 4px;
  overflow: hidden;
}
.chain__step {
  padding: 28px;
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: background .25s ease;
}
.chain__step:last-child { border-right: none; }
.chain__step:hover { background: var(--alt-bg); }
.chain__gives {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--accent-text);
}
.chain__name {
  font-size: 22px;
  font-weight: 400;
  letter-spacing: -.8px;
  color: var(--text);
}
.chain__body {
  font-size: 14px;
  line-height: 21px;
  color: var(--muted);
}

/* Journey / roadmap of a sovereignty programme */
.journey { display: flex; flex-direction: column; gap: 0; }
.journey__row {
  display: grid;
  grid-template-columns: 132px 1fr;
  gap: 32px;
  padding: 28px 0;
  border-top: 1px solid var(--border);
  align-items: start;
}
.journey__row:last-child { border-bottom: 1px solid var(--border); }
.journey__stage {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--accent-text);
}
.journey__time {
  font-size: 13px;
  color: var(--muted);
  margin-top: 4px;
}
.journey__title {
  font-size: 20px;
  font-weight: 400;
  letter-spacing: -.6px;
  color: var(--text);
  margin-bottom: 8px;
}
.journey__body {
  font-size: 14px;
  line-height: 22px;
  color: var(--muted);
  max-width: 640px;
}
.journey__items {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 14px;
}

/* ============================================================
   ABOUT
============================================================ */
.about-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.office-card {
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.office-card__region {
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -.3px;
  color: var(--text);
}
.office-card__addr {
  font-size: 14px;
  line-height: 22px;
  color: var(--muted);
  font-style: normal;
}

/* ============================================================
   CROSS-PAGE CTA STRIP
============================================================ */
.next-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.next-card {
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 26px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: border-color .25s ease, box-shadow .25s ease;
}
.next-card:hover {
  border-color: var(--accent);
  box-shadow: 0 8px 32px rgba(94,94,255,0.18);
}
.next-card__label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--accent-text);
}
.next-card__title {
  font-size: 20px;
  font-weight: 400;
  letter-spacing: -.6px;
  color: var(--text);
}
.next-card__body {
  font-size: 14px;
  line-height: 21px;
  color: var(--muted);
}

/* ============================================================
   FOOTER — sitemap columns
============================================================ */
/* Four columns: the Explore sitemap plus the three offices.
   The widest line in the footer is "Financial Dist, Hyderabad - 32" at 197px,
   and "Sovereign Enterprise paper ↗" at 194px — so each track needs ~200px.
   Four of those plus gaps does not fit beside the old 240px brand column, so
   the brand block gives up the difference. Below this the addresses wrap
   mid-line, which reads as an accident rather than a line break.

   Four ~200px tracks plus gaps need 860px, which the brand block only leaves
   once the page is at its 1120px cap. styles.css already stacks .footer__top
   below 1024px; that stack has to extend to 1220px, otherwise the band in
   between renders four squeezed 174px columns and the addresses break
   mid-line. Both bounds are set here rather than left to styles.css, because
   this sheet loads later and an unscoped rule would win over its media query. */
@media (max-width: 1219px) {
  .footer__top { grid-template-columns: 1fr; gap: 40px; }
}
@media (min-width: 1220px) {
  .footer__top { grid-template-columns: 190px 1fr; gap: 48px; }
}
.footer__cols { grid-template-columns: repeat(4, 1fr); gap: 24px; }

/* Column-count steps live here rather than in the shared breakpoint blocks
   further down, because they have to be ordered against each other: the wider
   rule must come first so the narrower one wins where both match. Each bound
   is the width at which a track would drop under ~200px and start breaking
   addresses mid-line. */
@media (max-width: 959px) { .footer__cols { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .footer__cols { grid-template-columns: 1fr; } }

.footer__nav { display: flex; flex-direction: column; gap: 9px; }
.footer__nav a {
  font-size: 14px;
  line-height: 20px;
  color: var(--footer-text);
  transition: color .2s ease;
}
.footer__nav a:hover { color: #ffffff; }

/* ============================================================
   THE FOUNDRY — AI Studio flow simulation
   (migrated verbatim out of index.html's inline <style> so the
   board can live on foundry.html)

   The board is a vertical stack of phase rows. During the pinned scroll each
   phase runs in turn and then collapses to its milestone; once the whole
   simulation has finished the board turns interactive and any completed phase
   can be re-opened to inspect the steps inside it.
============================================================ */
.board {
  background: var(--page-bg);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text);
  overflow: hidden;
}

/* Stage row — three columns: name | status | chevron */
.stage {
  display: grid;
  grid-template-columns: 32% 1fr auto;
  gap: 24px;
  padding: 22px 28px;
  transition: opacity .3s ease, background .25s ease;
}
.stage + .stage { border-top: 1px solid var(--border); }
.stage--pending { opacity: .5; }

.stage__left {
  display: flex; flex-direction: column; gap: 8px;
  align-self: start;
}

.stage__content {
  align-self: center;
  min-width: 0;
}

.stage__name {
  font-size: 18px; font-weight: 500; letter-spacing: -.3px;
  line-height: 1.3; color: var(--text);
}

.stage__sub { font-size: 14px; color: var(--muted); padding-top: 2px; }

/* Pending indicator */
.stage__pending {
  display: flex; align-items: center; gap: 12px;
  font-size: 15px; color: var(--muted);
}
.stage__pending::before {
  content: ''; width: 18px; height: 18px; border-radius: 50%;
  border: 1px solid var(--border); flex-shrink: 0;
}
.stage--running .stage__pending,
.stage--complete .stage__pending { display: none; }

/* Collapsible detail — subtitle + checklist. max-height is set in JS to the
   measured content height so the open/close transition animates in both
   directions (while a phase runs, and on manual expand once interactive). */
.stage__detail {
  max-height: 0; overflow: hidden;
  transition: max-height .5s cubic-bezier(.16,1,.3,1);
}

.stage__list { list-style: none; display: flex; flex-direction: column; gap: 12px; margin-bottom: 12px; }
/* Incomplete steps stay visible but dimmed (like the pending state): 50%
   opacity + the default empty circle. Completing a step (.on) brings it to
   full opacity and fills its check. */
.stage__item {
  display: flex; align-items: flex-start; gap: 12px;
  font-size: 15px; line-height: 1.45; color: var(--text);
  opacity: .5;
  transition: opacity .3s ease;
}
.stage__item.on { opacity: 1; }

.stage__check {
  width: 18px; height: 18px; border-radius: 50%;
  border: 1px solid var(--border);
  flex-shrink: 0; margin-top: 1px;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; line-height: 1; color: #ffffff;
  transition: background .25s ease, border-color .25s ease;
}
.stage__item.on .stage__check { background: rgba(94,94,255,.55); border-color: transparent; }
.stage__item.on .stage__check::after { content: '✓'; }

/* Milestone — the phase's final line. Visible throughout the running phase
   and once complete; hidden only while the phase is pending. Until it's
   reached it looks like an incomplete step (50% opacity, empty circle);
   reaching it (.on) brings it to full opacity and fills the check. */
.stage__milestone {
  display: none; align-items: center; gap: 12px;
  font-size: 15px; font-weight: 700; color: var(--text);
  opacity: .5;
  transition: opacity .3s ease;
}
.stage--running .stage__milestone,
.stage--complete .stage__milestone { display: flex; }
.stage__milestone.on { opacity: 1; }
.stage__milestone.on .stage__check { background: var(--accent); border-color: transparent; }
.stage__milestone.on .stage__check::after { content: '✓'; }

/* Expand affordance — a caret shown on completed phases; rotates to point up
   when the phase is expanded. Sits in its own right-hand column. */
.stage__chev {
  display: none; align-self: start; margin-top: 8px;
  width: 8px; height: 8px; flex-shrink: 0;
  border-right: 1.5px solid var(--muted);
  border-bottom: 1.5px solid var(--muted);
  transform: rotate(45deg);
  transition: transform .3s ease;
}
.stage--complete { cursor: pointer; }
/* Neutral hover — matches the industry tabs' hover style. */
.stage--complete:hover { background: rgba(0,0,0,.03); }
:root[data-theme="dark"] .stage--complete:hover { background: rgba(255,255,255,0.06); }
.stage--complete:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.stage--complete .stage__chev { display: block; }
.stage--expanded .stage__chev { transform: rotate(-135deg); }

/* ============================================================
   RESPONSIVE
============================================================ */
@media (max-width: 1024px) {
  .pillar-grid { grid-template-columns: 1fr; }
  .sol-grid, .sol-grid--3 { grid-template-columns: repeat(2, 1fr); }
  .chain { grid-template-columns: 1fr; }
  .chain__step { border-right: none; border-bottom: 1px solid var(--border); }
  .chain__step:last-child { border-bottom: none; }
  .paper-card { grid-template-columns: 1fr; gap: 28px; padding: 36px; }
  .paper-card__actions { flex-direction: row; }
  .next-grid, .about-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  .nav__links { display: none; }
  .nav__hamburger { display: block; }
  .sol-grid, .sol-grid--3 { grid-template-columns: 1fr; }
  .sol-card__metrics,
  .sol-grid > .sol-card:only-child .sol-card__metrics { grid-template-columns: repeat(2, 1fr); }
  .next-grid, .about-grid { grid-template-columns: 1fr; }
  #solutions-index .industries__layout { grid-template-columns: 1fr; }
  #solutions-index .ind-panel { padding: 24px; }
  .journey__row { grid-template-columns: 1fr; gap: 12px; }
  .paper-card { padding: 28px; }
  .paper-card__title { font-size: 26px; }
  .paper-card__actions { flex-direction: column; }
  .sov-list .adapt__item { flex-direction: column; gap: 12px; }
  .sov-list .adapt__letter { width: auto; }
  .stage { grid-template-columns: 1fr; gap: 12px; padding: 20px; }
}

@media (max-width: 480px) {
  .sol-card__metrics,
  .sol-grid > .sol-card:only-child .sol-card__metrics { grid-template-columns: 1fr; }
}