:root {
  --navy-950: #061625;
  --navy-900: #081c2d;
  --navy-800: #0d2a42;
  --blue-600: #1769e0;
  --cyan-500: #00b7c7;
  --green-500: #19b97a;
  --amber-400: #f7b955;
  --ink: #182334;
  --muted: #617084;
  --line: #dbe6f2;
  --paper: #ffffff;
  --mist: #f5f9fd;
  --soft-blue: #edf6ff;
  --shadow: 0 18px 60px rgba(8, 28, 45, 0.12);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  color: var(--ink);
  background: var(--mist);
  font-family: Inter, "Segoe UI", Roboto, Arial, sans-serif;
  line-height: 1.5;
}

body.modal-open {
  overflow: hidden;
}

a {
  color: inherit;
}

code,
pre {
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
}

pre {
  overflow: auto;
  margin: 0;
  padding: 18px;
  color: #eaf5ff;
  background: #071321;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  font-size: 14px;
}

.site-header {
  position: fixed;
  z-index: 20;
  top: 0;
  right: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 72px;
  padding: 16px 6%;
  color: #ffffff;
  background: rgba(6, 22, 37, 0.78);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(18px);
}

.brand-lockup {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
}

.brand-logo {
  display: block;
  width: clamp(164px, 17vw, 232px);
  height: auto;
}

.brand-product-pill {
  padding: 5px 9px;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 8px;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0;
  white-space: nowrap;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 22px;
  font-size: 14px;
  font-weight: 700;
}

.site-nav a,
.nav-button {
  color: rgba(255, 255, 255, 0.86);
  text-decoration: none;
}

.site-nav form {
  margin: 0;
}

.nav-button {
  padding: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
  font: inherit;
}

.site-nav a:hover,
.nav-button:hover {
  color: #ffffff;
}

.hero {
  position: relative;
  display: grid;
  min-height: 610px;
  padding: 150px 6% 72px;
  overflow: hidden;
  color: #ffffff;
  background-image: url("/images/vanguard-identity-architecture.png");
  background-position: center;
  background-size: cover;
}

.hero__overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(6, 22, 37, 0.94) 0%, rgba(6, 22, 37, 0.78) 40%, rgba(6, 22, 37, 0.28) 100%),
    linear-gradient(180deg, rgba(6, 22, 37, 0.25) 0%, rgba(6, 22, 37, 0.72) 100%);
}

.hero__content {
  position: relative;
  z-index: 1;
  max-width: 760px;
}

.eyebrow {
  margin: 0 0 12px;
  color: var(--cyan-500);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}

h1,
h2,
h3,
p {
  letter-spacing: 0;
}

h1 {
  margin: 0;
  font-size: 72px;
  line-height: 0.95;
}

h2 {
  margin: 0;
  color: var(--navy-900);
  font-size: 38px;
  line-height: 1.08;
}

h3 {
  margin: 0;
  color: var(--navy-900);
  font-size: 22px;
}

.hero__lead {
  max-width: 680px;
  margin: 24px 0 0;
  color: rgba(255, 255, 255, 0.86);
  font-size: 20px;
}

.hero__actions,
.demo-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 30px;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0 18px;
  border: 1px solid transparent;
  border-radius: 8px;
  font: inherit;
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
}

.button--primary {
  color: var(--navy-950);
  background: #ffffff;
  box-shadow: 0 14px 36px rgba(0, 183, 199, 0.2);
}

.button--primary:hover {
  color: #ffffff;
  background: var(--green-500);
}

.button--secondary {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.25);
}

.button--secondary:hover {
  border-color: var(--cyan-500);
}

.button--ghost {
  color: var(--navy-900);
  background: transparent;
  border-color: var(--line);
}

.button--blue {
  color: #ffffff;
  background: var(--blue-600);
}

.button--blue:hover {
  background: var(--green-500);
}

.button--dark-text {
  color: var(--navy-900);
  background: #f8fbff;
  border-color: var(--line);
}

.hero__status {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  align-self: end;
  width: min(860px, 100%);
  margin-top: 54px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.12);
}

.hero__status div {
  min-height: 88px;
  padding: 18px;
  background: rgba(6, 22, 37, 0.64);
}

.metric {
  display: block;
  color: #ffffff;
  font-size: 22px;
  font-weight: 900;
  text-transform: uppercase;
}

.hero__status span:last-child {
  color: rgba(255, 255, 255, 0.72);
  font-size: 14px;
}

.band {
  padding: 72px 6%;
}

.band--light {
  background: var(--mist);
}

.band--white {
  background: var(--paper);
}

.band--ink {
  color: #ffffff;
  background: var(--navy-950);
}

.mobile-downloads {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 28px;
  align-items: center;
  border-bottom: 1px solid var(--line);
}

.mobile-downloads__copy {
  max-width: 720px;
}

.mobile-downloads__copy h2 {
  font-size: 32px;
}

.mobile-downloads__copy p:last-child {
  max-width: 660px;
  margin-bottom: 0;
  color: var(--muted);
}

.store-badge-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 12px;
}

.store-badge {
  position: relative;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  min-width: 214px;
  min-height: 68px;
  padding: 10px 16px;
  overflow: hidden;
  color: #ffffff;
  background: #050b13;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 8px;
  box-shadow: 0 16px 42px rgba(6, 22, 37, 0.18);
  text-decoration: none;
}

.store-badge:hover,
.store-badge:focus-visible {
  border-color: var(--cyan-500);
  outline: 3px solid rgba(0, 183, 199, 0.22);
}

.store-badge__mark {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  color: #ffffff;
  background: linear-gradient(135deg, var(--blue-600), var(--cyan-500) 58%, var(--green-500));
  border-radius: 8px;
  font-size: 12px;
  font-weight: 900;
}

.store-badge__eyebrow {
  display: block;
  color: rgba(255, 255, 255, 0.72);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.1;
}

.store-badge strong {
  display: block;
  margin-top: 2px;
  font-size: 22px;
  line-height: 1.05;
}

.store-badge--android {
  background: #11171f;
}

.store-badge--android .store-badge__mark {
  background: linear-gradient(135deg, #3ddc84, #00b7c7);
}

.store-badge--disabled,
.store-badge--pending {
  cursor: not-allowed;
}

.store-badge--disabled {
  opacity: 0.58;
}

.store-badge--pending {
  color: rgba(255, 255, 255, 0.78);
  background: #1a2533;
}

.store-badge__watermark {
  position: absolute;
  inset: auto -32px 10px auto;
  width: 170px;
  padding: 4px 0;
  color: #ffffff;
  background: rgba(25, 185, 122, 0.92);
  font-size: 11px;
  font-weight: 900;
  text-align: center;
  text-transform: uppercase;
  transform: rotate(-28deg);
}

.section-heading {
  max-width: 760px;
  margin-bottom: 34px;
}

.section-heading p:last-child {
  color: var(--muted);
  font-size: 17px;
}

.track-grid,
.plan-grid,
.architecture-grid,
.video-layout,
.assurance-grid,
.example-app-grid,
.product-brief-card-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.plan-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.assurance-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.example-app-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.product-brief-card-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.track-card,
.plan-card,
.assurance-card,
.example-app-card,
.subscribe-form,
.console-panel,
.policy-block {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
  box-shadow: var(--shadow);
}

.track-card,
.plan-card,
.assurance-card,
.example-app-card {
  padding: 26px;
}

.track-card p,
.plan-card p,
.assurance-card p,
.example-app-card p {
  color: var(--muted);
}

.assurance-card h3 {
  margin-top: 16px;
}

.track-card ul {
  display: grid;
  gap: 8px;
  padding: 0;
  margin: 22px 0 0;
  list-style: none;
}

.example-app-card {
  display: grid;
  gap: 12px;
  align-content: space-between;
}

.example-app-card h3,
.example-app-card p {
  margin-bottom: 0;
}

.example-app-card__footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-top: 10px;
}

.example-app-card__meta {
  color: var(--muted);
  font-size: 13px;
  font-weight: 900;
  text-transform: uppercase;
}

.example-app-card__cta {
  min-height: 40px;
  padding-inline: 14px;
  color: #ffffff;
  text-decoration: none;
  transition: background-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.example-app-card__cta:hover,
.example-app-card__cta:focus-visible,
.example-app-card__cta:visited {
  color: #ffffff;
  text-decoration: none;
}

.example-app-card__cta:hover,
.example-app-card__cta:focus-visible {
  box-shadow: 0 14px 30px rgba(23, 105, 224, 0.24);
  transform: translateY(-1px);
}

.product-brief-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(360px, 1.05fr);
  gap: 28px;
  align-items: start;
}

.product-brief-intro {
  display: grid;
  gap: 22px;
}

.product-brief-intro .section-heading {
  max-width: 720px;
  margin-bottom: 0;
}

.product-brief-panel {
  display: grid;
  gap: 22px;
  align-content: space-between;
  padding: 28px;
  color: #ffffff;
  background:
    linear-gradient(135deg, rgba(23, 105, 224, 0.94), rgba(0, 183, 199, 0.9) 56%, rgba(25, 185, 122, 0.9)),
    var(--navy-950);
  border-radius: 8px;
  box-shadow: var(--shadow);
}

.product-brief-panel p {
  max-width: 600px;
  margin-bottom: 0;
  color: rgba(255, 255, 255, 0.84);
  font-weight: 700;
}

.product-brief-panel .button--secondary {
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.44);
  background: rgba(255, 255, 255, 0.1);
}

.brief-path {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 22px minmax(0, 1fr) 22px minmax(0, 1fr) 22px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
}

.brief-path span {
  display: block;
  padding: 14px 16px;
  color: var(--navy-950);
  background: rgba(255, 255, 255, 0.9);
  border-radius: 8px;
  font-weight: 900;
}

.brief-path i {
  width: 100%;
  height: 2px;
  justify-self: center;
  background: rgba(255, 255, 255, 0.76);
}

.product-brief-layout .product-brief-card-grid {
  grid-template-columns: 1fr;
  gap: 14px;
}

.product-brief-card {
  min-height: 100%;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 16px;
  row-gap: 8px;
  align-items: start;
  padding: 22px;
}

.product-brief-card .platform-icon {
  grid-row: span 2;
}

.product-brief-card h3 {
  margin-top: 0;
}

.product-brief-card p {
  margin: 0;
}

.track-card li {
  padding-left: 18px;
  color: var(--ink);
  border-left: 3px solid var(--cyan-500);
}

.track-label,
.plan-card span {
  display: inline-block;
  margin-bottom: 12px;
  color: var(--blue-600);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

/* Architecture on the home page.
 *
 * Read left to right: prove who you are, Aegis decides, applications act on
 * it. The middle column is deliberately the loudest — it is the only part that
 * is the product rather than an integration. The lab sits underneath, quieter
 * and fenced off, because it is never on the product path. */
.section-heading--inverse h2 {
  color: #ffffff;
}

.section-heading--inverse p {
  color: rgba(226, 238, 250, 0.78);
}

.arch-flow {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  align-items: stretch;
  margin-top: 32px;
}

.arch-col {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 24px 22px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.035);
}

/* The step marker doubles as the connector: an arrow from each column into the
 * next, rather than a line between boxes that implied a sequence that was not
 * real. */
.arch-col + .arch-col::before {
  content: "";
  position: absolute;
  top: 50%;
  left: -13px;
  width: 8px;
  height: 8px;
  border-top: 2px solid rgba(255, 255, 255, 0.28);
  border-right: 2px solid rgba(255, 255, 255, 0.28);
  transform: translateY(-50%) rotate(45deg);
}

.arch-col__head h3 {
  margin: 10px 0 8px;
  color: #ffffff;
  font-size: 1.22rem;
  line-height: 1.25;
}

.arch-col__head p {
  margin: 0;
  color: rgba(214, 229, 245, 0.72);
  font-size: 0.92rem;
  line-height: 1.5;
}

.arch-col__kicker {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  color: var(--navy-950);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.arch-col__list {
  display: grid;
  gap: 10px;
  margin: auto 0 0;
  padding: 0;
  list-style: none;
}

.arch-col__list li {
  display: grid;
  gap: 2px;
  padding: 11px 14px;
  border-left: 3px solid rgba(255, 255, 255, 0.16);
  border-radius: 0 8px 8px 0;
  background: rgba(6, 22, 37, 0.55);
}

.arch-col__list strong {
  color: #ffffff;
  font-size: 0.94rem;
  font-weight: 800;
}

.arch-col__list span {
  color: rgba(200, 218, 236, 0.72);
  font-size: 0.84rem;
  line-height: 1.45;
}

.arch-col--blue .arch-col__kicker {
  background: var(--blue-600);
  color: #ffffff;
}

.arch-col--blue .arch-col__list li {
  border-left-color: var(--blue-600);
}

.arch-col--cyan {
  border-color: rgba(0, 183, 199, 0.45);
  background: rgba(0, 183, 199, 0.09);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.28);
}

.arch-col--cyan .arch-col__kicker {
  background: var(--cyan-500);
}

.arch-col--cyan .arch-col__list li {
  border-left-color: var(--cyan-500);
}

.arch-col--green .arch-col__kicker {
  background: var(--green-500);
  color: #04241a;
}

.arch-col--green .arch-col__list li {
  border-left-color: var(--green-500);
}

.arch-lab {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 26px;
  align-items: center;
  margin-top: 22px;
  padding: 22px 24px;
  border: 1px dashed rgba(247, 185, 85, 0.38);
  border-radius: 14px;
  background: rgba(247, 185, 85, 0.05);
}

.arch-lab__label {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(247, 185, 85, 0.16);
  color: var(--amber-400);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.arch-lab__copy h3 {
  margin: 10px 0 6px;
  color: #ffffff;
  font-size: 1.08rem;
}

.arch-lab__copy p {
  margin: 0;
  color: rgba(214, 229, 245, 0.7);
  font-size: 0.9rem;
  line-height: 1.55;
}

.arch-lab__list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.arch-lab__list li {
  padding: 7px 12px;
  border: 1px solid rgba(247, 185, 85, 0.24);
  border-radius: 999px;
  color: rgba(233, 224, 208, 0.88);
  font-size: 0.82rem;
  font-weight: 700;
}

.subscription-layout {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 40px;
  align-items: start;
}

.auth-grid {
  display: grid;
  grid-template-columns: 0.82fr 1.18fr;
  gap: 40px;
  align-items: start;
}

.auth-grid--compact {
  max-width: 1040px;
  margin: 0 auto;
}

.subscribe-form {
  display: grid;
  gap: 18px;
  padding: 28px;
}

/* Sign-in panel.
   Every way of signing in lives in one card. The alternatives were previously
   a third child of .auth-grid, which is a two-column grid, so they wrapped to
   column 1 row 2 — detached from the form they belong to. */
.auth-panel {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.auth-panel__form {
  display: grid;
  gap: 18px;
  padding: 28px;
}

.auth-panel__links {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: -4px;
}

/* The shared button styles are built for the dark hero, so on this white card
   they read as washed out. Rescoped here rather than changed globally. */
.auth-panel .button {
  width: 100%;
  gap: 9px;
}

.auth-panel .button--primary {
  color: #ffffff;
  background: var(--navy-900);
  box-shadow: none;
}

.auth-panel .button--primary:hover {
  background: var(--green-500);
}

.auth-panel .button--ghost {
  color: var(--navy-900);
  background: var(--paper);
  border-color: var(--line);
}

.auth-panel .button--ghost:hover {
  border-color: var(--blue-600);
  background: var(--soft-blue);
}

/* Separated by a rule rather than by distance, so it reads as another way in
   rather than an unrelated feature. */
.auth-panel__alternatives {
  display: grid;
  gap: 12px;
  padding: 22px 28px 26px;
  border-top: 1px solid var(--line);
  background: var(--mist);
}

.auth-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.auth-divider::before,
.auth-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}

.auth-hint {
  margin: 0;
  font-size: 13px;
  color: var(--muted);
  text-align: center;
}

.form-footnote--centred {
  text-align: center;
}

.form-footnote--centred:empty {
  display: none;
}

.auth-panel__icon {
  width: 17px;
  height: 17px;
  flex: none;
}

.download-env-note {
  margin: 14px 0 0;
  padding: 12px 16px;
  border-left: 3px solid var(--cyan-500);
  border-radius: 0 8px 8px 0;
  background: rgba(255, 255, 255, 0.1);
  font-size: 14.5px;
  max-width: 620px;
}

.install-steps {
  display: grid;
  gap: 14px;
  margin: 4px 0 0;
  padding-left: 20px;
  font-size: 14.5px;
  color: var(--ink);
}

.install-steps li {
  padding-left: 4px;
}

.install-steps strong {
  display: block;
  margin-bottom: 2px;
}

.install-steps em {
  font-style: normal;
  font-weight: 700;
  color: var(--navy-900);
}

.enrol-passwordless {
  display: grid;
  gap: 10px;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--mist);
}

.enrol-passwordless__lead {
  margin: 0;
  font-size: 13.5px;
  color: var(--muted);
}

.enrol-passwordless .button {
  width: 100%;
  gap: 9px;
  color: var(--navy-900);
  background: var(--paper);
  border-color: var(--line);
}

.enrol-passwordless .button:hover {
  border-color: var(--blue-600);
  background: var(--soft-blue);
}

.recovery-code-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 18px;
  margin: 0;
  padding: 18px;
  list-style: none;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--mist);
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  font-size: 15px;
  letter-spacing: 0.04em;
}

@media (max-width: 620px) {
  .recovery-code-list {
    grid-template-columns: 1fr;
  }
}

.field-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.field-group {
  display: grid;
  gap: 7px;
}

label {
  color: var(--navy-900);
  font-size: 14px;
  font-weight: 800;
}

.field-label {
  display: flex;
  align-items: center;
  gap: 8px;
}

.field-tooltip {
  position: relative;
  display: inline-grid;
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  place-items: center;
  color: #ffffff;
  background: var(--blue-600);
  border-radius: 999px;
  cursor: help;
  font-size: 12px;
  font-weight: 900;
}

.field-tooltip::after {
  position: absolute;
  z-index: 20;
  bottom: calc(100% + 10px);
  left: 50%;
  width: min(320px, 76vw);
  padding: 10px 12px;
  color: #ffffff;
  background: var(--navy-950);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 8px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.24);
  content: attr(data-tooltip);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.35;
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%) translateY(4px);
  transition: opacity 140ms ease, transform 140ms ease;
}

.field-tooltip:hover::after,
.field-tooltip:focus-visible::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

input,
select,
textarea {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  color: var(--ink);
  background: #ffffff;
  border: 1px solid #cbd9e8;
  border-radius: 8px;
  font: inherit;
}

textarea {
  resize: vertical;
}

input:focus,
select:focus,
textarea:focus {
  outline: 3px solid rgba(0, 183, 199, 0.22);
  border-color: var(--cyan-500);
}

.checkline {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: var(--muted);
  font-weight: 600;
}

.checkline input {
  width: 18px;
  min-height: 18px;
  margin-top: 3px;
}

.field-error {
  margin: 0;
  color: #a3382b;
  font-size: 14px;
}

.form-alert,
.developer-code,
.form-footnote {
  margin: 0;
}

.form-alert {
  padding: 12px 14px;
  color: #7b241d;
  background: #fff2ef;
  border: 1px solid #f3c2b9;
  border-radius: 8px;
  font-weight: 800;
}

.form-footnote {
  color: var(--muted);
  font-size: 14px;
  font-weight: 700;
}

.form-footnote a {
  color: var(--blue-600);
}

.developer-code {
  padding: 12px 14px;
  color: var(--navy-900);
  background: #ecf9fb;
  border: 1px solid rgba(0, 183, 199, 0.28);
  border-radius: 8px;
  font-weight: 800;
}

.delivery-panel {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 16px;
  align-items: center;
  padding: 16px;
  background: #f5f9fd;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.delivery-panel h2 {
  margin-bottom: 4px;
  font-size: 24px;
}

.delivery-panel p {
  margin: 0;
  color: var(--muted);
}

.delivery-panel__icon {
  display: grid;
  width: 64px;
  height: 64px;
  place-items: center;
  color: #ffffff;
  background: linear-gradient(135deg, var(--blue-600), var(--cyan-500) 58%, var(--green-500));
  border-radius: 8px;
  font-size: 15px;
  font-weight: 900;
}

.nested-form,
.inline-actions {
  display: grid;
  gap: 14px;
}

.inline-actions {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.page-hero {
  padding: 156px 6% 74px;
  color: #ffffff;
  background:
    linear-gradient(90deg, rgba(6, 22, 37, 0.92), rgba(6, 22, 37, 0.58)),
    url("/images/vanguard-identity-architecture.png") center / cover;
}

.page-hero--compact {
  min-height: 430px;
}

.page-hero h1 {
  max-width: 820px;
  font-size: 56px;
}

.page-hero p {
  max-width: 780px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 19px;
}

.page-hero code {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.12);
  border-radius: 6px;
  padding: 2px 6px;
}

.mock-wallet-hero {
  min-height: 610px;
}

.mock-wallet-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 390px);
  align-items: center;
  gap: 42px;
  max-width: 1240px;
}

.mock-wallet-copy {
  min-width: 0;
}

.wallet-qr-card {
  display: grid;
  gap: 16px;
  padding: 22px;
  color: var(--navy-950);
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.56);
  border-radius: 8px;
  box-shadow: 0 26px 80px rgba(0, 0, 0, 0.28);
}

.wallet-qr-card__head {
  display: flex;
  align-items: center;
  gap: 12px;
}

.wallet-qr-card__head h2 {
  margin: 0;
  font-size: 25px;
}

.wallet-qr-card .eyebrow {
  color: var(--blue-600);
}

.wallet-qr-card__icon {
  display: grid;
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
  place-items: center;
  color: #ffffff;
  background: linear-gradient(135deg, var(--blue-600), var(--green-500));
  border-radius: 8px;
  font-size: 14px;
  font-weight: 900;
}

.wallet-qr-card__image {
  display: block;
  width: min(100%, 310px);
  margin: 0 auto;
  padding: 10px;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.mock-wallet-hero .wallet-qr-card__hint {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
}

.mock-wallet-hero .wallet-qr-card__url {
  display: block;
  max-width: 100%;
  padding: 10px;
  overflow-wrap: anywhere;
  color: var(--navy-950);
  background: #f4f8fb;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 13px;
}

.wallet-qr-card__fallback {
  display: grid;
  min-height: 210px;
  place-items: center;
  padding: 22px;
  color: var(--navy-950);
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 8px;
  text-align: center;
  font-weight: 800;
}

.mock-wallet-hero .wallet-qr-card__copy {
  justify-self: stretch;
  color: var(--navy-950);
  background: #ffffff;
  border-color: var(--line);
}

.mock-wallet-hero .wallet-qr-card__copy:hover,
.mock-wallet-hero .wallet-qr-card__copy:focus-visible {
  color: #ffffff;
  background: var(--blue-600);
  border-color: var(--blue-600);
}

.track-card--production {
  border-top: 5px solid var(--blue-600);
}

.track-card--lab {
  border-top: 5px solid var(--green-500);
}

.console-panel {
  display: grid;
  gap: 24px;
  max-width: 1100px;
  margin: 0 auto;
  padding: 28px;
  color: #ffffff;
  background: #0b2033;
}

.console-panel h2 {
  color: #ffffff;
}

.demo-output {
  min-height: 240px;
}

.demo-result-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.demo-qr-card {
  display: grid;
  gap: 12px;
  padding: 18px;
  align-content: start;
  color: var(--navy-950);
  background: #ffffff;
  border: 1px solid rgba(205, 222, 238, 0.96);
  border-radius: 8px;
}

.demo-qr-card h3 {
  font-size: 22px;
}

.demo-qr-card .eyebrow {
  color: var(--blue-600);
}

.demo-qr-card__description,
.demo-qr-card__warning,
.demo-qr-card__error {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
}

.demo-qr-card__warning {
  color: #8a4f00;
}

.demo-qr-card__error {
  color: #9f2f24;
  font-weight: 800;
}

.demo-qr-card__image {
  display: block;
  width: min(100%, 280px);
  margin: 0 auto;
  padding: 10px;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.demo-qr-card__url {
  display: block;
  max-width: 100%;
  padding: 10px;
  overflow-wrap: anywhere;
  color: var(--navy-950);
  background: #f4f8fb;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 13px;
}

.demo-qr-card__copy {
  justify-self: start;
}

.demo-qr-card__details {
  display: grid;
  gap: 10px;
}

.demo-qr-card__details summary {
  color: var(--blue-600);
  cursor: pointer;
  font-size: 13px;
  font-weight: 900;
}

.policy-block {
  max-width: 980px;
  margin: 0 auto;
  padding: 28px;
}

.video-layout {
  align-items: center;
  gap: 40px;
}

.video-shell {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--navy-950);
  box-shadow: var(--shadow);
}

.video-shell video,
.video-shell img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--navy-950);
  object-fit: cover;
}

.video-trigger {
  position: relative;
  padding: 0;
  font: inherit;
  cursor: pointer;
}

.video-trigger:hover .video-trigger__play,
.video-trigger:focus-visible .video-trigger__play {
  background: var(--green-500);
  transform: translate(-50%, -50%) scale(1.05);
}

.video-trigger:focus-visible {
  outline: 3px solid rgba(0, 183, 199, 0.35);
  outline-offset: 4px;
}

.video-trigger__play {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 72px;
  height: 72px;
  background: var(--blue-600);
  border-radius: 50%;
  box-shadow: 0 14px 42px rgba(6, 22, 37, 0.35);
  transform: translate(-50%, -50%);
  transition: transform 160ms ease, background 160ms ease;
}

.video-trigger__play::after {
  position: absolute;
  top: 22px;
  left: 29px;
  width: 0;
  height: 0;
  border-top: 14px solid transparent;
  border-bottom: 14px solid transparent;
  border-left: 20px solid #ffffff;
  content: "";
}

.video-trigger__label {
  position: absolute;
  right: 18px;
  bottom: 18px;
  min-height: 38px;
  padding: 8px 12px;
  color: #ffffff;
  background: rgba(6, 22, 37, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 8px;
  font-weight: 900;
}

.video-modal[hidden] {
  display: none;
}

.video-modal {
  position: fixed;
  z-index: 80;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
}

.video-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(6, 22, 37, 0.78);
  backdrop-filter: blur(12px);
}

.video-modal__dialog {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 18px;
  width: min(1040px, 100%);
  max-height: calc(100vh - 48px);
  padding: 22px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.34);
}

.video-modal__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.video-modal__head h2 {
  font-size: 28px;
}

.video-modal__close {
  display: grid;
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  place-items: center;
  color: #ffffff;
  background: var(--navy-900);
  border: 0;
  border-radius: 8px;
  font-size: 30px;
  line-height: 1;
  cursor: pointer;
}

.video-modal__close:hover,
.video-modal__close:focus-visible {
  background: var(--blue-600);
}

.video-modal video {
  display: block;
  width: 100%;
  max-height: min(68vh, 620px);
  aspect-ratio: 16 / 9;
  background: var(--navy-950);
  border-radius: 8px;
}

.dashboard-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.dashboard-summary--four {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-bottom: 22px;
}

.dashboard-summary article,
.platform-card,
.wizard-rail,
.wizard-panel,
.test-result {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
  box-shadow: var(--shadow);
}

.dashboard-summary article {
  padding: 22px;
}

.dashboard-summary .metric {
  color: var(--navy-900);
}

.dashboard-summary p {
  margin: 4px 0 0;
  color: var(--muted);
}

.workspace-blade {
  display: grid;
  grid-template-columns: 68px minmax(280px, 312px) minmax(0, 1fr);
  grid-template-rows: 64px minmax(0, 1fr);
  min-height: calc(100vh - 86px);
  color: var(--navy-900);
  background:
    linear-gradient(135deg, rgba(48, 104, 220, 0.08), transparent 34%),
    linear-gradient(220deg, rgba(0, 171, 185, 0.1), transparent 38%),
    #edf4fa;
}

.workspace-blade__topbar {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 0 24px;
  color: #ffffff;
  background: var(--navy-950);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.workspace-blade__product {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: inherit;
  text-decoration: none;
}

.workspace-brand-mark {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  color: #ffffff;
  background: linear-gradient(135deg, var(--blue-600), var(--cyan-500));
  border-radius: 8px;
  font-size: 14px;
  font-weight: 950;
}

.workspace-blade__product strong,
.workspace-blade__product small {
  display: block;
  line-height: 1.12;
}

.workspace-blade__product strong {
  font-size: 15px;
}

.workspace-blade__product small {
  color: rgba(255, 255, 255, 0.68);
  font-size: 12px;
  font-weight: 700;
}

.workspace-blade__topbar nav {
  display: flex;
  gap: 18px;
  margin-left: auto;
  color: rgba(255, 255, 255, 0.72);
  font-size: 13px;
  font-weight: 800;
}

.workspace-blade__topbar nav a {
  color: inherit;
  text-decoration: none;
}

.workspace-blade__topbar nav a:hover,
.workspace-blade__topbar nav a:focus-visible,
.workspace-blade__topbar nav a.is-active {
  color: #ffffff;
}

.workspace-blade__avatar {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  color: var(--navy-950);
  background: #ffffff;
  border: 0;
  border-radius: 50%;
  font-size: 12px;
  font-weight: 950;
  cursor: pointer;
  font-family: inherit;
  line-height: 1;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.workspace-blade__avatar:hover,
.workspace-blade__avatar:focus-visible {
  transform: translateY(-1px);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.18);
  outline: none;
}

.workspace-blade__rail {
  grid-column: 1;
  grid-row: 2;
  padding: 14px 10px;
  color: rgba(255, 255, 255, 0.68);
  background: #092033;
  border-right: 1px solid rgba(255, 255, 255, 0.1);
}

.workspace-blade__rail a {
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  margin-bottom: 8px;
  color: inherit;
  text-decoration: none;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 950;
}

.workspace-blade__rail a:hover,
.workspace-blade__rail a:focus-visible,
.workspace-blade__rail a.is-active {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.11);
}

.workspace-blade__nav {
  position: sticky;
  top: 0;
  grid-column: 2;
  grid-row: 2;
  max-height: calc(100vh - 64px);
  overflow: auto;
  color: var(--navy-900);
  background: rgba(255, 255, 255, 0.94);
  border-right: 1px solid var(--line);
  box-shadow: 8px 0 24px rgba(7, 22, 38, 0.06);
}

.workspace-blade__head {
  padding: 22px 22px 16px;
  border-bottom: 1px solid var(--line);
}

.workspace-blade__head p {
  margin: 0;
  color: var(--blue-600);
  font-size: 11px;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.workspace-blade__head h1 {
  margin: 8px 0;
  font-size: 24px;
  line-height: 1.05;
}

.workspace-blade__head > span {
  display: block;
  color: var(--muted);
  font-size: 13px;
  font-weight: 750;
  line-height: 1.55;
}

.workspace-blade__org-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
  padding: 10px;
  background: #f4f8fc;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.workspace-blade__org-chip > span {
  display: grid;
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  place-items: center;
  color: #ffffff;
  background: linear-gradient(135deg, var(--blue-600), var(--green-500));
  border-radius: 8px;
  font-weight: 950;
}

.workspace-blade__org-chip strong,
.workspace-blade__org-chip small {
  display: block;
}

.workspace-blade__org-chip small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.workspace-blade__menu {
  display: grid;
  gap: 2px;
  padding: 14px;
}

.workspace-blade__section-label {
  margin: 14px 10px 8px;
  color: #7b8ba0;
  font-size: 11px;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.workspace-blade__menu a {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  min-height: 52px;
  padding: 10px;
  color: #25354a;
  text-decoration: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 800;
}

.workspace-blade__menu a span {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  color: var(--blue-600);
  background: rgba(48, 104, 220, 0.1);
  border-radius: 8px;
  font-size: 12px;
  font-weight: 950;
}

.workspace-blade__menu a strong {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  gap: 7px;
}

.workspace-blade__menu a small {
  display: block;
}

.workspace-blade__menu a small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
}

.workspace-blade__menu a:hover,
.workspace-blade__menu a:focus-visible,
.workspace-blade__menu a.is-active {
  color: var(--blue-600);
  background: #e8f0ff;
}

.workspace-blade__menu a.is-active span {
  color: #ffffff;
  background: linear-gradient(135deg, var(--blue-600), var(--cyan-500));
}

.blade-menu-status {
  display: inline-block;
  width: 9px;
  height: 9px;
  flex: 0 0 auto;
  border-radius: 999px;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.85);
}

.blade-menu-status--warning {
  background: #d98b12;
}

.blade-menu-status--success {
  background: #18a86b;
}

.workspace-blade__advice {
  display: grid;
  gap: 6px;
  margin: 0 14px 18px;
  padding: 14px;
  color: var(--navy-900);
  background: #f8fbff;
  border: 1px solid var(--line);
  border-left: 4px solid var(--green-500);
  border-radius: 8px;
}

.workspace-blade__advice strong {
  color: var(--navy-900);
}

.workspace-blade__advice span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.45;
}

.workspace-blade__content {
  grid-column: 3;
  grid-row: 2;
  min-width: 0;
  padding: 24px;
  overflow: auto;
}

.workspace-blade .band {
  padding: 0;
  background: transparent;
}

.workspace-blade .section-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 18px;
}

.workspace-blade .section-heading h2 {
  margin: 8px 0;
  font-size: clamp(28px, 4vw, 48px);
  line-height: 0.98;
}

.workspace-blade .section-heading p:last-child {
  max-width: 760px;
  color: var(--muted);
  font-size: 16px;
  font-weight: 750;
  line-height: 1.55;
}

.workspace-blade .toolbar {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
  min-width: 240px;
}

.workspace-blade .platform-card,
.workspace-blade .people-directory,
.workspace-blade .config-tile,
.workspace-blade .brand-preview-card {
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 18px 44px rgba(7, 22, 38, 0.08);
}

.workspace-blade .people-table th {
  color: #52657c;
  background: #f8fbfe;
  border-color: var(--line);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.workspace-blade .identity-reminder {
  grid-template-columns: 44px minmax(0, 1fr) auto;
}

.split-panel {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(340px, 0.8fr);
  gap: 14px;
  margin-bottom: 18px;
}

.configuration-grid--single {
  grid-template-columns: minmax(0, 1fr);
}

.blade-panel[hidden] {
  display: none;
}

.blade-panel {
  min-height: calc(100vh - 112px);
  animation: blade-panel-in 180ms ease-out;
}

@keyframes blade-panel-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.blade-overview {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 18px;
}

.blade-overview h1 {
  max-width: 780px;
  margin: 8px 0;
  font-size: clamp(34px, 4vw, 52px);
  line-height: 0.98;
}

.blade-overview p:not(.eyebrow) {
  max-width: 760px;
  color: var(--muted);
  font-size: 16px;
  font-weight: 750;
  line-height: 1.55;
}

.blade-action-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-top: 14px;
}

.blade-action-card {
  display: grid;
  min-height: 148px;
  gap: 12px;
  align-content: space-between;
  padding: 18px;
  color: var(--navy-900);
  text-decoration: none;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}

.blade-action-card span {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  color: #ffffff;
  background: linear-gradient(135deg, var(--blue-600), var(--cyan-500));
  border-radius: 8px;
  font-weight: 900;
}

.blade-action-card small,
.blade-guidance span {
  color: var(--muted);
  font-weight: 750;
  line-height: 1.52;
}

.blade-action-card:hover,
.blade-action-card:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(48, 104, 220, 0.42);
  box-shadow: 0 18px 46px rgba(15, 79, 168, 0.16);
}

.blade-guidance {
  display: grid;
  gap: 6px;
  margin-bottom: 20px;
  padding: 16px;
  color: var(--navy-900);
  background: #f8fbff;
  border: 1px solid var(--line);
  border-left: 5px solid var(--blue-600);
  border-radius: 8px;
}

.note-panel--strong {
  margin: 18px 0;
  border-left: 5px solid var(--green-500);
}

.platform-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.organization-grid {
  display: grid;
  /* As many tiles as fit at a width the action row can live with, rather
     than three regardless — three across at 800px left "Verify domain"
     as a single character. */
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 18px;
}

.organization-tile {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  min-height: 152px;
  padding: 22px;
  color: inherit;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
}

.organization-tile--disabled {
  background: #f8fbff;
  opacity: 0.78;
}

.organization-tile h3 {
  margin-bottom: 4px;
}

.organization-tile p {
  margin: 0;
  color: var(--muted);
}

.organization-tile__body {
  min-width: 0;
}

.organization-tile__mark {
  display: grid;
  width: 52px;
  height: 52px;
  place-items: center;
  color: #ffffff;
  background: linear-gradient(135deg, var(--org-primary, var(--navy-800)), var(--org-accent, var(--blue-600)));
  border-radius: 8px;
  font-size: 20px;
  font-weight: 900;
  overflow: hidden;
}

.organization-tile__mark img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 6px;
  background: #ffffff;
}

.organization-tile__actions {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.organization-tile__actions form {
  margin: 0;
}

.organization-tile__actions .button {
  min-height: 38px;
  padding-inline: 14px;
  font-size: 14px;
}

.empty-state-panel {
  display: grid;
  max-width: 760px;
  gap: 14px;
  padding: 28px;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
}

.empty-state-panel p {
  margin: 0;
  color: var(--muted);
}

.issuer-org-layout {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(520px, 100%), 1fr));
  gap: 18px;
  align-items: start;
}

.admin-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  align-items: stretch;
  margin-bottom: 22px;
}

.platform-card {
  display: grid;
  gap: 18px;
  padding: 24px;
}

.platform-card__head {
  display: flex;
  align-items: center;
  gap: 14px;
}

.platform-icon {
  display: grid;
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  place-items: center;
  color: #ffffff;
  background: linear-gradient(135deg, var(--blue-600), var(--cyan-500));
  border-radius: 8px;
  font-weight: 900;
}

.platform-card p {
  margin: 0;
  color: var(--muted);
}

.progress-bar {
  height: 10px;
  overflow: hidden;
  background: #e8f0f8;
  border-radius: 999px;
}

.progress-bar span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--blue-600), var(--cyan-500), var(--green-500));
}

.platform-card__meta,
.platform-card__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.platform-card__meta {
  color: var(--muted);
  font-size: 14px;
  font-weight: 800;
}

.platform-card__actions {
  flex-wrap: wrap;
  justify-content: flex-start;
}

.platform-result {
  padding: 10px 12px;
  border-radius: 8px;
}

.platform-result--ok {
  color: #075f3f;
  background: #e8fff4;
}

.platform-result--bad {
  color: #8f2c21;
  background: #fff0ee;
}

.wizard-layout {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}

.wizard-rail,
.wizard-panel {
  padding: 24px;
}

.wizard-rail {
  position: sticky;
  top: 96px;
}

.wizard-rail ol {
  display: grid;
  gap: 10px;
  padding: 0;
  margin: 18px 0 0;
  list-style: none;
}

.wizard-rail a {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  padding: 10px;
  color: var(--muted);
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: 8px;
}

.wizard-rail span {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  color: var(--navy-900);
  background: #ecf4ff;
  border-radius: 8px;
  font-weight: 900;
}

.wizard-rail .is-active a {
  color: var(--navy-900);
  background: #f7fbff;
  border-color: var(--line);
}

.wizard-rail .is-complete span {
  color: #ffffff;
  background: var(--green-500);
}

.wizard-panel {
  display: grid;
  gap: 26px;
}

.wizard-panel__head p:last-child {
  color: var(--muted);
}

.wizard-form {
  display: grid;
  gap: 18px;
}

.checkbox-grid,
.claim-edit-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.claim-edit-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.wizard-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.note-panel {
  display: grid;
  gap: 4px;
  padding: 14px;
  color: #345;
  background: #f6fbff;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.note-panel--portal {
  max-width: 620px;
  margin-top: 18px;
  gap: 10px;
  color: var(--navy-900);
  background: rgba(255, 255, 255, 0.92);
}

.note-panel--portal .button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.note-panel--warning {
  color: #684b14;
  background: #fff8e8;
  border-color: #f0ce8c;
}

.note-panel--danger {
  color: #84251c;
  background: #fff0ee;
  border-color: #f0b5ae;
}

.form-note {
  margin: 0 0 8px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 900;
}

.structure-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(320px, 0.9fr);
  gap: 18px;
  align-items: start;
  margin: 22px 0;
}

.org-chart-canvas {
  display: grid;
  gap: 14px;
  padding: 18px;
  overflow: auto;
  background:
    linear-gradient(#e7eef6 1px, transparent 1px),
    linear-gradient(90deg, #e7eef6 1px, transparent 1px),
    #f8fbff;
  background-size: 28px 28px;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.org-node {
  position: relative;
  display: grid;
  width: min(520px, calc(100% - (var(--depth) * 34px)));
  min-width: 250px;
  gap: 7px;
  margin-left: calc(var(--depth) * 34px);
  padding: 14px;
  background: #ffffff;
  border: 1px solid #cddbea;
  border-left: 5px solid var(--blue-600);
  border-radius: 8px;
  box-shadow: 0 12px 24px rgba(13, 42, 74, 0.08);
}

.org-node::before {
  position: absolute;
  top: 22px;
  left: -34px;
  display: block;
  width: 28px;
  height: 2px;
  background: #9eb6cc;
  content: "";
}

.org-node[style*="--depth: 0"]::before {
  display: none;
}

.org-node strong {
  color: var(--navy-900);
  font-size: 16px;
}

.org-node span,
.org-node small {
  color: var(--muted);
  font-weight: 800;
}

.people-directory {
  display: grid;
  gap: 16px;
  margin: 24px 0;
  padding: 18px;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
}

.people-directory__head {
  display: grid;
  grid-template-columns: minmax(280px, 0.65fr) minmax(0, 1fr);
  gap: 18px;
  align-items: end;
}

.people-directory__head p {
  margin: 4px 0 0;
  color: var(--muted);
}

.people-directory__tools {
  display: grid;
  gap: 12px;
  justify-items: end;
}

.people-filters {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(130px, 0.7fr) minmax(130px, 0.7fr) auto;
  gap: 10px;
  align-items: center;
}

.people-table-wrap {
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.people-table {
  width: 100%;
  min-width: 960px;
  border-collapse: collapse;
  font-size: 14px;
}

.people-table th,
.people-table td {
  padding: 12px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}

.people-table th {
  color: var(--navy-900);
  background: #f4f8fb;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.people-table th a,
.people-table td a {
  color: var(--blue-600);
  font-weight: 900;
  text-decoration: none;
}

.people-table tr:last-child td {
  border-bottom: 0;
}

.people-table tbody tr {
  cursor: pointer;
}

.people-table tbody tr:hover td {
  background: #f8fbff;
}

.table-record-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0;
  color: var(--blue-600);
  background: transparent;
  border: 0;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.table-record-button strong {
  overflow-wrap: anywhere;
}

.row-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.icon-button {
  min-height: 34px;
  padding: 6px 10px;
  color: var(--navy-900);
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 8px;
  font: inherit;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
}

.icon-button:hover,
.icon-button:focus-visible {
  color: #ffffff;
  background: var(--blue-600);
  border-color: var(--blue-600);
}

.icon-button--danger:hover,
.icon-button--danger:focus-visible {
  background: #a3382b;
  border-color: #a3382b;
}

.validated-mark {
  display: inline-grid;
  width: 22px;
  height: 22px;
  place-items: center;
  color: #8a4f00;
  background: #fff7df;
  border: 1px solid #f0d18d;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
}

.validated-mark--ok {
  color: #075f3f;
  background: #e8fff4;
  border-color: #9de8c6;
}

.status-pill {
  display: inline-flex;
  min-height: 26px;
  align-items: center;
  padding: 4px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}

.status-pill--active,
.status-pill--accepted {
  color: #075f3f;
  background: #e8fff4;
  border-color: #9de8c6;
}

.status-pill--invited,
.status-pill--sent,
.status-pill--consent {
  color: #153e78;
  background: #eef6ff;
  border-color: #b8d6f4;
}

.status-pill--revoked {
  color: #84251c;
  background: #fff0ee;
  border-color: #f0b5ae;
}

.status-pill--declined {
  color: #84251c;
  background: #fff0ee;
  border-color: #f0b5ae;
}

.tag-row--compact span {
  min-height: 24px;
  padding: 3px 7px;
  font-size: 11px;
}

.people-pagination {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  color: var(--muted);
  font-weight: 900;
}

.empty-table-note {
  margin: 0;
  padding: 18px;
  color: var(--muted);
  font-weight: 800;
}

.identity-reminder {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  margin: 0 0 22px;
  padding: 18px;
  color: var(--navy-900);
  background: #fff8e8;
  border: 1px solid #f0ce8c;
  border-left: 5px solid var(--amber-400);
  border-radius: 8px;
  box-shadow: var(--shadow);
}

.identity-reminder h3,
.identity-reminder p {
  margin: 0;
}

.identity-reminder p:last-child {
  color: #684b14;
  font-weight: 700;
}

.identity-reminder--verified {
  color: #075f3f;
  background: #ecfff6;
  border-color: #9de8c6;
  border-left-color: #18a86b;
}

.identity-reminder--verified p,
.identity-reminder--verified p:last-child {
  color: #075f3f;
}

.identity-reminder__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
}

.workspace-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  gap: 14px;
  margin: 0 0 22px;
}

.workspace-steps article {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 10px 12px;
  align-items: start;
  align-content: start;
  padding: 16px;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 10px 28px rgba(8, 28, 45, 0.08);
}

.workspace-steps span {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  color: #ffffff;
  background: linear-gradient(135deg, var(--blue-600), var(--green-500));
  border-radius: 8px;
  font-weight: 900;
}

.workspace-steps strong {
  color: var(--navy-900);
}

.workspace-steps p {
  grid-column: 2;
  margin: -4px 0 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.consent-panel,
.consent-actions {
  display: grid;
  gap: 14px;
  margin-top: 14px;
  padding: 14px;
  background: #f8fbff;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.consent-panel h4 {
  margin: 0;
  color: var(--navy-900);
}

.consent-panel p {
  margin: 0;
  color: var(--muted);
}

.event-list {
  display: grid;
  max-height: 430px;
  gap: 10px;
  overflow: auto;
}

.event-list details,
.credential-card details {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fbff;
}

.event-list summary,
.credential-card summary {
  display: flex;
  min-height: 46px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px;
  color: var(--navy-900);
  font-weight: 900;
  cursor: pointer;
}

.event-list summary span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.event-list pre {
  margin: 0 12px 12px;
  font-size: 12px;
}

.event-list--compact {
  max-height: 260px;
  margin-top: 14px;
}

.credential-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.credential-card {
  display: grid;
  gap: 16px;
  padding: 22px;
  background: #ffffff;
  border: 1px solid var(--line);
  border-left: 5px solid var(--blue-600);
  border-radius: 8px;
  box-shadow: var(--shadow);
}

.credential-card--active {
  border-left-color: var(--green-500);
}

.credential-card--revoked {
  border-left-color: #b5473d;
  background: #fffafa;
}

.credential-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.credential-card__head p {
  margin: 4px 0 0;
  overflow-wrap: anywhere;
  color: var(--muted);
  font-weight: 700;
}

.credential-status,
.tag-row span {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 4px 9px;
  color: #075f3f;
  background: #e8fff4;
  border: 1px solid #9de8c6;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}

.credential-card--invited .credential-status {
  color: #6c4a00;
  background: #fff7df;
  border-color: #f0d18d;
}

.credential-card--revoked .credential-status {
  color: #84251c;
  background: #fff0ee;
  border-color: #f0b5ae;
}

.tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tag-row span {
  color: var(--navy-900);
  background: #f4f8fb;
  border-color: var(--line);
}

.credential-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}

.credential-actions form {
  margin: 0;
}

.inline-revoke-form {
  display: flex;
  flex: 1 1 320px;
  gap: 10px;
  align-items: center;
}

.inline-revoke-form input {
  min-width: 180px;
}

.definition-list {
  display: grid;
  gap: 10px;
}

.definition-list > div {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 12px;
  background: #f8fbff;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.definition-list span {
  color: var(--muted);
  font-size: 14px;
}

.definition-list form {
  margin: 0;
}

.configuration-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  gap: 18px;
}

.config-tile {
  display: grid;
  gap: 18px;
  align-content: start;
  padding: 24px;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
}

.config-tile__head {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
}

.config-tile__head p {
  margin: 4px 0 0;
  color: var(--muted);
}

.privilege-groups {
  display: grid;
  gap: 14px;
}

.privilege-groups fieldset {
  display: grid;
  gap: 12px;
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fbff;
}

.privilege-groups legend {
  padding: 0 6px;
  color: var(--navy-900);
  font-weight: 900;
}

.privilege-groups p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 750;
}

.checkline--strong {
  min-height: 100%;
  align-content: center;
  padding: 12px;
  background: #f8fbff;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.checkline span strong,
.checkline span small {
  display: block;
}

.checkline span small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.app-modal[hidden] {
  display: none;
}

.app-modal {
  position: fixed;
  z-index: 90;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
}

.app-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(6, 22, 37, 0.76);
  backdrop-filter: blur(12px);
}

.app-modal__panel {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 18px;
  width: min(720px, 100%);
  max-height: calc(100vh - 48px);
  padding: 24px;
  overflow: auto;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.34);
}

.app-modal__panel--wide {
  width: min(1040px, 100%);
}

.app-modal__panel--xwide {
  width: min(1480px, calc(100vw - 48px));
}

.app-modal__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}

.app-modal__head h2 {
  font-size: 30px;
}

.app-modal__head p:last-child {
  margin-bottom: 0;
  color: var(--muted);
}

.modal-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.modal-actions form {
  margin: 0;
}

.modal-split,
.idv-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  align-items: start;
}

.modal-split h3 {
  margin-bottom: 12px;
  font-size: 20px;
}

.idv-stepper {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.idv-stepper li {
  display: flex;
  min-width: 0;
  gap: 10px;
  align-items: center;
  padding: 12px;
  color: var(--muted);
  background: #f5f9fd;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-weight: 900;
}

.idv-stepper span {
  display: grid;
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  place-items: center;
  color: #ffffff;
  background: #8291a5;
  border-radius: 999px;
  font-size: 13px;
}

.idv-stepper .is-active {
  color: var(--navy-900);
  background: #eef6ff;
  border-color: rgba(48, 104, 220, 0.34);
}

.idv-stepper .is-active span,
.idv-stepper .is-complete span {
  background: linear-gradient(135deg, var(--blue-600), var(--green-500));
}

.idv-step {
  display: grid;
  gap: 18px;
  padding: 18px;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.idv-step[hidden] {
  display: none;
}

.idv-step h3 {
  margin-bottom: 4px;
  font-size: 24px;
}

.idv-document-grid,
.idv-analysis-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(280px, 1.1fr);
  gap: 16px;
  align-items: stretch;
}

.idv-analysis-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.idv-preview {
  display: grid;
  min-height: 210px;
  place-items: center;
  overflow: hidden;
  color: var(--muted);
  background:
    linear-gradient(#eef5fb 1px, transparent 1px),
    linear-gradient(90deg, #eef5fb 1px, transparent 1px),
    #f8fbff;
  background-size: 22px 22px;
  border: 1px dashed #bfd4e8;
  border-radius: 8px;
  font-weight: 900;
}

.idv-preview img {
  display: block;
  width: 100%;
  height: 100%;
  max-height: 280px;
  object-fit: cover;
}

.idv-camera-shell {
  display: grid;
  gap: 12px;
}

.idv-camera-frame {
  position: relative;
  display: grid;
  min-height: 360px;
  overflow: hidden;
  place-items: center;
  background: #07111d;
  border: 1px solid rgba(19, 32, 51, 0.18);
  border-radius: 8px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.idv-camera-frame video {
  width: 100%;
  height: 100%;
  min-height: 360px;
  object-fit: cover;
  transform: scaleX(-1);
}

.idv-face-guide {
  position: absolute;
  width: min(42%, 260px);
  aspect-ratio: 0.72;
  border: 3px solid rgba(255, 255, 255, 0.72);
  border-radius: 999px;
  box-shadow:
    0 0 0 999px rgba(6, 22, 37, 0.28),
    0 0 34px rgba(0, 183, 199, 0.18);
  pointer-events: none;
  transition: border-color 180ms ease, box-shadow 180ms ease;
}

.idv-camera-frame.is-ready .idv-face-guide {
  border-color: #19b97a;
  box-shadow:
    0 0 0 999px rgba(6, 22, 37, 0.18),
    0 0 34px rgba(25, 185, 122, 0.38);
}

.idv-camera-frame.is-warning .idv-face-guide {
  border-color: #f0ce8c;
}

.idv-camera-placeholder {
  position: absolute;
  inset: 18px;
  display: grid;
  place-content: center;
  gap: 6px;
  color: #ffffff;
  text-align: center;
  background: linear-gradient(135deg, rgba(15, 79, 168, 0.28), rgba(20, 149, 102, 0.24));
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 8px;
}

.idv-camera-placeholder[hidden] {
  display: none;
}

.idv-camera-status {
  min-height: 44px;
  padding: 12px 14px;
  color: var(--navy-900);
  background: #f5f9fd;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-weight: 900;
}

.idv-result-panel {
  min-height: 210px;
  align-content: center;
}

.tour-overlay[hidden] {
  display: none;
}

.tour-overlay {
  position: fixed;
  z-index: 100;
  inset: 0;
  pointer-events: none;
}

.tour-overlay__shade {
  position: absolute;
  inset: 0;
  background: rgba(6, 22, 37, 0.42);
}

.tour-popover {
  position: absolute;
  top: var(--tour-top, 120px);
  left: var(--tour-left, 24px);
  display: grid;
  width: min(360px, calc(100vw - 40px));
  gap: 12px;
  padding: 18px;
  pointer-events: auto;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.32);
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition:
    top 260ms cubic-bezier(0.22, 1, 0.36, 1),
    left 260ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 180ms ease,
    transform 260ms cubic-bezier(0.22, 1, 0.36, 1);
}

.tour-popover.is-moving {
  opacity: 0.92;
  transform: translate3d(0, 8px, 0);
}

.tour-popover h3,
.tour-popover p {
  margin: 0;
}

.tour-popover p {
  color: var(--muted);
}

.tour-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tour-highlight {
  position: relative;
  z-index: 101;
  outline: 4px solid rgba(0, 183, 199, 0.46);
  outline-offset: 4px;
  border-radius: 8px;
  transition: outline-color 180ms ease, outline-offset 180ms ease;
}

#org-branding {
  padding-bottom: 36px;
}

#issuer-orgs {
  padding-top: 36px;
}

#issuer-orgs .issuer-org-layout {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
}

#issuer-orgs .platform-card,
#issuer-orgs .demo-qr-card {
  min-height: 0;
}

#issuer-orgs .issuer-org-layout > .platform-card,
#issuer-orgs .issuer-org-layout > .note-panel {
  grid-column: 1 / -1;
}

#issuer-orgs .demo-qr-card {
  grid-template-columns: minmax(0, 1fr) minmax(190px, 240px);
  align-items: start;
  gap: 14px 18px;
}

#issuer-orgs .demo-qr-card .eyebrow,
#issuer-orgs .demo-qr-card h3,
#issuer-orgs .demo-qr-card__description {
  grid-column: 1;
}

#issuer-orgs .demo-qr-card__image {
  grid-column: 2;
  grid-row: 1 / 5;
  width: min(100%, 230px);
  justify-self: center;
}

#issuer-orgs .demo-qr-card__url,
#issuer-orgs .demo-qr-card .claim-list {
  grid-column: 1 / -1;
}

#issuer-orgs .demo-qr-card__url {
  max-height: 92px;
  overflow: auto;
}

.brand-preview-card {
  display: grid;
  min-height: 260px;
  gap: 12px;
  align-content: center;
  justify-items: center;
  padding: 28px;
  color: var(--brand-text);
  background:
    radial-gradient(circle at top right, color-mix(in srgb, var(--brand-accent) 22%, transparent), transparent 42%),
    var(--brand-bg);
  border: 1px solid color-mix(in srgb, var(--brand-primary) 22%, #ffffff);
  border-radius: 8px;
  box-shadow: var(--shadow);
  text-align: center;
}

.brand-preview-card img,
.brand-preview-card span {
  display: grid;
  width: 76px;
  height: 76px;
  place-items: center;
  object-fit: contain;
  color: #ffffff;
  background: linear-gradient(135deg, var(--brand-primary), var(--brand-accent));
  border-radius: 8px;
  font-size: 34px;
  font-weight: 900;
}

.brand-preview-card h3 {
  color: var(--brand-text);
}

.brand-preview-card p {
  margin: 0;
  color: color-mix(in srgb, var(--brand-text) 72%, #ffffff);
  font-weight: 800;
}

.test-result {
  display: grid;
  gap: 10px;
  padding: 20px;
}

.test-result--ok {
  border-color: #8be1ba;
}

.test-result--bad {
  border-color: #ffb4b4;
}

.verified-id-live-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.verified-id-live-card {
  display: grid;
  gap: 12px;
  align-content: start;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
}

.verified-id-live-card h4 {
  margin: 2px 0 4px;
  color: var(--navy-900);
}

.verified-id-live-card p {
  margin: 0;
  color: var(--muted);
}

.verified-id-live-card img {
  width: min(100%, 260px);
  aspect-ratio: 1;
  justify-self: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
}

.verified-id-live-card code {
  display: block;
  max-height: 110px;
  overflow: auto;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--navy-900);
  background: #f6f9fc;
  white-space: pre-wrap;
  word-break: break-all;
}

.verified-id-live-card .verified-id-pin {
  justify-self: center;
  padding: 8px 12px;
  border-radius: 8px;
  color: var(--navy-900);
  background: #eaf5ff;
  font-weight: 800;
}

.demo-app-shell {
  display: grid;
  gap: 26px;
  max-width: 1120px;
  margin: 0 auto;
}

.demo-app-shell--narrow {
  max-width: 760px;
}

.demo-app-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}

.demo-app-head h2 {
  max-width: 680px;
}

.demo-pill {
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  padding: 6px 10px;
  color: #075f3f;
  background: #e8fff4;
  border: 1px solid #9de8c6;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 900;
  white-space: nowrap;
}

.oidc-flow-grid,
.oidc-gate-layout,
.protected-app-grid,
.demo-status-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.oidc-gate-layout {
  grid-template-columns: minmax(280px, 0.85fr) minmax(0, 1.15fr);
  align-items: start;
}

.protected-app-grid {
  grid-template-columns: 1.15fr repeat(2, minmax(0, 1fr));
}

.oidc-step-card,
.protected-panel,
.demo-status-grid article {
  display: grid;
  gap: 14px;
  padding: 24px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
}

.oidc-step-card p,
.protected-panel p,
.demo-status-grid p {
  margin: 0;
  color: var(--muted);
}

.protected-panel--primary {
  color: #ffffff;
  background: linear-gradient(135deg, var(--navy-900), var(--blue-600));
  border-color: rgba(255, 255, 255, 0.18);
}

.protected-panel--primary h2,
.protected-panel--primary .eyebrow,
.protected-panel--primary p {
  color: #ffffff;
}

.auth-stepper {
  display: grid;
  grid-template-columns: repeat(var(--step-count, 3), minmax(0, 1fr));
  gap: 1px;
  padding: 0;
  margin: 0;
  overflow: hidden;
  list-style: none;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--line);
}

.auth-stepper__item {
  display: flex;
  align-items: center;
  min-height: 62px;
  padding: 16px;
  color: var(--muted);
  background: #ffffff;
  font-weight: 900;
}

.onboarding-shell {
  display: grid;
  gap: 20px;
}

.issuer-org-layout--onboarding {
  align-items: start;
}

.demo-qr-card--onboarding {
  max-width: 100%;
}

.onboarding-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.auth-stepper__item--active {
  color: var(--navy-900);
  background: var(--soft-blue);
}

.auth-stepper__item--complete {
  color: #075f3f;
  background: #e8fff4;
}

.auth-stepper__item--failed {
  color: #84251c;
  background: #fff0ee;
}

.claim-list {
  display: grid;
  gap: 1px;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--line);
}

.claim-list div {
  display: grid;
  grid-template-columns: 130px minmax(0, 1fr);
  gap: 12px;
  padding: 12px;
  background: #ffffff;
}

.claim-list dt {
  color: var(--muted);
  font-size: 13px;
  font-weight: 900;
}

.claim-list dd {
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
  color: var(--navy-900);
  font-weight: 700;
}

.challenge-ticket {
  display: grid;
  gap: 8px;
  padding: 14px;
  background: #f8fbff;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.challenge-ticket code {
  overflow-wrap: anywhere;
  color: var(--navy-900);
  font-weight: 900;
}

.challenge-ticket span:last-child {
  overflow-wrap: anywhere;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.demo-warning {
  max-width: 1120px;
  margin: 18px auto 0;
  padding: 14px;
  color: #8a4f00;
  background: #fff8e8;
  border: 1px solid #f0ce8c;
  border-radius: 8px;
  font-weight: 800;
}

.site-footer {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  padding: 28px 6%;
  color: rgba(255, 255, 255, 0.7);
  background: var(--navy-950);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.site-footer div {
  display: grid;
  gap: 6px;
}

.site-footer strong {
  color: #ffffff;
}

.footer-logo {
  width: min(210px, 48vw);
  height: auto;
}

body.document-page {
  background: #ffffff;
}

body.document-page main {
  min-height: auto;
  padding-top: 90px;
}

body.document-page .embedded-document {
  overflow: hidden;
}

@media (max-width: 980px) {
  .site-header {
    position: absolute;
    align-items: flex-start;
  }

  .site-nav {
    flex-wrap: wrap;
    justify-content: flex-end;
  }

  .hero {
    min-height: 590px;
    padding-top: 132px;
  }

  h1 {
    font-size: 54px;
  }

  h2 {
    font-size: 32px;
  }

  .hero__status,
  .mobile-downloads,
  .track-grid,
  .plan-grid,
  .assurance-grid,
  .example-app-grid,
  .product-brief-layout,
  .product-brief-card-grid,
  .architecture-grid,
  .demo-result-grid,
  .mock-wallet-layout,
  .video-layout,
  .dashboard-summary,
  .dashboard-summary--four,
  .platform-grid,
  .admin-grid,
  .configuration-grid,
  .credential-grid,
  .structure-layout,
  .verified-id-live-grid,
  .people-directory__head,
  .people-filters,
  .workspace-steps,
  .identity-reminder,
  .modal-split,
  .idv-grid,
  .organization-grid,
  .issuer-org-layout,
  .oidc-flow-grid,
  .oidc-gate-layout,
  .protected-app-grid,
  .demo-status-grid,
  .wizard-layout,
  .subscription-layout,
  .auth-grid,
  .inline-actions,
  .field-row {
    grid-template-columns: 1fr;
  }

  .workspace-blade {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
  }

  .workspace-blade__topbar {
    height: auto;
    flex-wrap: wrap;
    padding: 14px;
  }

  .workspace-blade__topbar nav {
    width: 100%;
    margin-left: 0;
  }

  .workspace-blade__rail {
    display: none;
  }

  .workspace-blade__nav {
    position: static;
    grid-column: 1;
    grid-row: auto;
    max-height: none;
  }

  .workspace-blade__content {
    grid-column: 1;
    grid-row: auto;
    padding: 16px;
  }

  .workspace-blade__menu {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .workspace-blade__section-label {
    grid-column: 1 / -1;
  }

  .blade-overview,
  .blade-action-grid,
  .split-panel {
    grid-template-columns: 1fr;
  }

  .blade-overview {
    flex-direction: column;
  }

  .blade-overview h1 {
    font-size: 46px;
  }

  .brief-path {
    grid-template-columns: 1fr;
  }

  .brief-path i {
    width: 2px;
    height: 18px;
  }

  .claim-edit-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .idv-stepper,
  .idv-document-grid,
  .idv-analysis-grid {
    grid-template-columns: 1fr;
  }

  .people-filters {
    align-items: stretch;
  }

  .people-directory__tools,
  .identity-reminder__actions {
    justify-items: stretch;
    justify-content: stretch;
  }

  #issuer-orgs .issuer-org-layout {
    grid-template-columns: 1fr;
  }

  #issuer-orgs .demo-qr-card {
    grid-template-columns: 1fr;
  }

  #issuer-orgs .demo-qr-card .eyebrow,
  #issuer-orgs .demo-qr-card h3,
  #issuer-orgs .demo-qr-card__description,
  #issuer-orgs .demo-qr-card__image,
  #issuer-orgs .demo-qr-card__url,
  #issuer-orgs .demo-qr-card .claim-list {
    grid-column: 1;
  }

  #issuer-orgs .demo-qr-card__image {
    grid-row: auto;
  }

  .wizard-rail {
    position: static;
  }

  .arch-flow {
    grid-template-columns: 1fr;
  }

  /* Stacked, the connector has to point down rather than across. */
  .arch-col + .arch-col::before {
    top: -13px;
    left: 50%;
    transform: translateX(-50%) rotate(135deg);
  }

  .arch-lab {
    grid-template-columns: 1fr;
    align-items: start;
  }
}

@media (max-width: 640px) {
  .site-header {
    display: grid;
    gap: 14px;
  }

  .site-nav {
    justify-content: flex-start;
    gap: 14px;
  }

  .brand-logo {
    width: 156px;
  }

  .brand-product-pill {
    padding: 4px 7px;
    font-size: 11px;
  }

  .hero {
    min-height: 560px;
    padding: 148px 20px 48px;
  }

  .hero__status {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 34px;
  }

  .hero__status div {
    min-height: 74px;
    padding: 12px;
  }

  .metric {
    font-size: 18px;
  }

  .store-badge-row {
    justify-content: flex-start;
  }

  .store-badge {
    width: 100%;
  }

  .hero__status span:last-child {
    font-size: 12px;
  }

  .band,
  .page-hero {
    padding-right: 20px;
    padding-left: 20px;
  }

  h1,
  .page-hero h1 {
    font-size: 42px;
  }

  .hero__lead,
  .page-hero p {
    font-size: 17px;
  }

  .subscribe-form,
  .console-panel,
  .policy-block,
  .wallet-qr-card,
  .track-card,
  .plan-card {
    padding: 20px;
  }

  .site-footer {
    display: grid;
    padding-right: 20px;
    padding-left: 20px;
  }

  .video-modal {
    padding: 14px;
  }

  .video-modal__dialog {
    padding: 16px;
  }

  .video-modal__head h2 {
    font-size: 22px;
  }

  .video-trigger__play {
    width: 58px;
    height: 58px;
  }

  .video-trigger__play::after {
    top: 18px;
    left: 24px;
    border-top-width: 11px;
    border-bottom-width: 11px;
    border-left-width: 16px;
  }

  .demo-app-head,
  .claim-list div,
  .claim-edit-grid,
  .checkbox-grid,
  .definition-list > div {
    grid-template-columns: 1fr;
  }

  .credential-card__head,
  .inline-revoke-form {
    display: grid;
  }

  .demo-app-head {
    display: grid;
  }

  .auth-stepper {
    grid-template-columns: 1fr;
  }

  .organization-tile {
    grid-template-columns: 44px minmax(0, 1fr);
  }

  .organization-tile__mark {
    width: 44px;
    height: 44px;
  }

  .organization-tile__arrow {
    display: none;
  }
}

/* Organization workspace blade refresh. Scoped to the dashboard so legacy site pages keep their styling. */
.workspace-blade {
  --workspace-site-header: 90px;
  --workspace-ink: #0a1626;
  --workspace-muted: #64748b;
  --workspace-line: #d9e4ef;
  --workspace-soft: #f4f8fc;
  --workspace-blue: #2268e8;
  --workspace-cyan: #00a6b8;
  --workspace-green: #15915f;
  --workspace-shadow: 0 18px 44px rgba(7, 22, 38, 0.08);
  grid-template-columns: 68px minmax(280px, 312px) minmax(0, 1fr);
  grid-template-rows: 64px minmax(0, 1fr);
  height: calc(100vh - var(--workspace-site-header));
  min-height: calc(100vh - var(--workspace-site-header));
  margin-top: var(--workspace-site-header);
  overflow: hidden;
  color: var(--workspace-ink);
  background:
    linear-gradient(135deg, rgba(34, 104, 232, 0.08), transparent 34%),
    linear-gradient(220deg, rgba(0, 166, 184, 0.10), transparent 38%),
    #edf4fa;
}

body:has(.workspace-blade) {
  background: #edf4fa;
}

body:has(.workspace-blade) .site-footer {
  display: none;
}

body:has(.workspace-blade) main {
  min-height: 100vh;
}

.workspace-blade h1,
.workspace-blade h2,
.workspace-blade h3,
.workspace-blade p,
.workspace-blade a,
.workspace-blade button,
.workspace-blade input,
.workspace-blade select,
.workspace-blade textarea {
  letter-spacing: 0;
}

.workspace-blade a {
  text-decoration: none;
}

.workspace-blade__topbar {
  position: relative;
  z-index: 5;
  min-height: 64px;
  padding: 0 24px;
  background: #061625;
}

.workspace-blade__product strong {
  color: #ffffff;
  font-size: 15px;
}

.workspace-blade__product small {
  color: rgba(255, 255, 255, 0.68);
  font-size: 12px;
}

.workspace-blade__topbar nav {
  gap: 18px;
  font-size: 13px;
  font-weight: 800;
}

.workspace-blade__rail {
  overflow: auto;
  background: #092033;
}

.workspace-blade__nav {
  position: static;
  height: 100%;
  max-height: none;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 8px 0 24px rgba(7, 22, 38, 0.06);
}

.workspace-blade__head h1 {
  margin: 8px 0;
  color: var(--workspace-ink);
  font-size: 24px;
  line-height: 1.05;
}

.workspace-blade__head > span,
.workspace-blade__org-chip small,
.workspace-blade__menu a small,
.workspace-blade__advice span {
  color: var(--workspace-muted);
}

.workspace-blade__content {
  height: 100%;
  min-width: 0;
  padding: 24px;
  overflow: auto;
}

.workspace-blade .blade-panel {
  min-height: auto;
  max-width: 1280px;
  margin: 0 auto;
}

.workspace-blade .blade-panel[hidden] {
  display: none !important;
}

.workspace-blade .section-heading,
.blade-overview {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 18px;
}

.workspace-blade .section-heading > div,
.blade-overview > div:first-child {
  min-width: 0;
}

.workspace-blade .eyebrow {
  color: var(--workspace-cyan);
  font-size: 12px;
  font-weight: 950;
  letter-spacing: 0.08em;
}

.workspace-blade .section-heading h2,
.blade-overview h1 {
  max-width: 880px;
  margin: 8px 0;
  color: var(--workspace-ink);
  font-size: clamp(28px, 4vw, 48px);
  line-height: 0.98;
}

.blade-overview h1 {
  font-size: clamp(34px, 4vw, 52px);
}

.workspace-blade .section-heading p:last-child,
.blade-overview p:not(.eyebrow) {
  max-width: 760px;
  margin: 0;
  color: var(--workspace-muted);
  font-size: 16px;
  font-weight: 650;
  line-height: 1.55;
}

.workspace-blade .toolbar,
.platform-card__actions,
.modal-actions,
.row-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.workspace-blade .toolbar {
  justify-content: flex-end;
  min-width: 240px;
}

.workspace-blade .button,
.workspace-blade .icon-button,
.workspace-blade .nav-button {
  min-height: 40px;
  padding: 0 14px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
}

.workspace-blade .button--primary,
.workspace-blade .button--primary.button--blue {
  color: #ffffff;
  background: var(--workspace-blue);
  border-color: var(--workspace-blue);
  box-shadow: 0 10px 24px rgba(7, 22, 38, 0.06);
}

.workspace-blade .button--primary:hover,
.workspace-blade .button--primary.button--blue:hover {
  color: #ffffff;
  background: #1556ca;
  border-color: #1556ca;
}

.workspace-blade .button--secondary,
.workspace-blade .button--dark-text,
.workspace-blade .icon-button {
  color: var(--workspace-ink);
  background: #ffffff;
  border-color: var(--workspace-line);
  box-shadow: 0 10px 24px rgba(7, 22, 38, 0.04);
}

.workspace-blade .button--secondary:hover,
.workspace-blade .button--dark-text:hover,
.workspace-blade .icon-button:hover {
  color: var(--workspace-blue);
  background: #eff5ff;
  border-color: rgba(34, 104, 232, 0.34);
}

.workspace-blade .button--ghost {
  color: #9f2623;
  background: #fff7f7;
  border-color: #f1c4c4;
}

.workspace-blade .button--ghost:hover,
.workspace-blade .icon-button--danger:hover {
  color: #ffffff;
  background: #b43832;
  border-color: #b43832;
}

.workspace-blade .dashboard-summary,
.workspace-blade .dashboard-summary--four {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin: 0 0 14px;
}

.workspace-blade .dashboard-summary article,
.workspace-blade .platform-card,
.workspace-blade .people-directory,
.workspace-blade .config-tile,
.workspace-blade .brand-preview-card,
.workspace-blade .policy,
.workspace-blade .note-panel,
.workspace-blade .demo-qr-card {
  min-width: 0;
  padding: 18px;
  color: var(--workspace-ink);
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid var(--workspace-line);
  border-radius: 8px;
  box-shadow: var(--workspace-shadow);
}

.workspace-blade .dashboard-summary .metric {
  margin-top: 8px;
  color: var(--workspace-ink);
  font-size: 28px;
  line-height: 1;
}

.workspace-blade .dashboard-summary p {
  margin: 4px 0 0;
  color: var(--workspace-muted);
  font-size: 12px;
  font-weight: 850;
}

.blade-action-grid,
.configuration-grid,
.platform-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.configuration-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.configuration-grid--single {
  grid-template-columns: 1fr;
}

.platform-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.blade-action-card {
  min-height: 148px;
  padding: 18px;
  color: var(--workspace-ink);
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid var(--workspace-line);
  border-radius: 8px;
  box-shadow: var(--workspace-shadow);
}

.blade-action-card strong,
.platform-card h3,
.config-tile h3,
.people-directory h3,
.workspace-blade .policy strong {
  color: var(--workspace-ink);
}

.blade-action-card small,
.blade-guidance span,
.platform-card p,
.config-tile p,
.people-directory p,
.workspace-blade .policy span,
.workspace-blade .note-panel span {
  color: var(--workspace-muted);
  font-weight: 650;
  line-height: 1.52;
}

.blade-action-card span,
.workspace-blade .platform-icon {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  color: #ffffff;
  background: linear-gradient(135deg, var(--workspace-blue), var(--workspace-cyan));
  border-radius: 8px;
  font-size: 12px;
  font-weight: 950;
}

.blade-guidance,
.identity-reminder {
  margin-bottom: 18px;
  border: 1px solid var(--workspace-line);
  border-left: 5px solid var(--workspace-blue);
  border-radius: 8px;
  background: #f8fbff;
  box-shadow: none;
}

.identity-reminder {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 14px;
  border-left-color: #b7791f;
  background: #fff8e8;
}

.identity-reminder p {
  margin: 0;
  color: #74521a;
}

.identity-reminder--verified {
  background: #ecfff6;
  border-color: #9de8c6;
  border-left-color: #18a86b;
}

.identity-reminder--verified p {
  color: #075f3f;
}

.split-panel,
.structure-layout--editor,
.admin-grid,
.issuer-org-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(340px, 0.8fr);
  gap: 14px;
  align-items: start;
}

.org-chart-side {
  display: grid;
  gap: 14px;
}

.org-chart-canvas {
  min-height: 360px;
  padding: 24px;
  border: 1px solid var(--workspace-line);
  border-radius: 8px;
  background-image:
    linear-gradient(var(--workspace-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--workspace-line) 1px, transparent 1px);
  background-size: 28px 28px;
  background-color: #f8fbff;
}

.org-node {
  width: fit-content;
  min-width: 210px;
  margin-left: calc(var(--depth, 0) * 42px);
  padding: 12px;
  border: 0;
  border-left: 4px solid var(--workspace-blue);
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 12px 28px rgba(7, 22, 38, 0.08);
}

.org-node + .org-node {
  margin-top: 18px;
}

.org-node::before {
  display: none;
}

.org-node strong,
.org-node span,
.org-node small {
  display: block;
}

.org-node span,
.org-node small {
  margin-top: 4px;
  color: var(--workspace-muted);
  font-size: 12px;
}

.people-directory {
  margin: 18px 0 0;
  padding: 18px;
}

.people-directory__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 0.9fr);
  gap: 18px;
  align-items: end;
}

.people-directory__tools {
  display: grid;
  width: 100%;
  min-width: 0;
  max-width: 980px;
  gap: 12px;
  justify-items: end;
}

.people-filters {
  display: grid;
  width: 100%;
  grid-template-columns: minmax(150px, 1fr) repeat(3, minmax(110px, 0.65fr)) auto;
  gap: 10px;
  align-items: center;
}

.workspace-blade input,
.workspace-blade select,
.workspace-blade textarea {
  width: 100%;
  min-height: 40px;
  padding: 9px 10px;
  color: var(--workspace-ink);
  background: #ffffff;
  border: 1px solid var(--workspace-line);
  border-radius: 8px;
  font: inherit;
  font-size: 13px;
}

.workspace-blade textarea {
  min-height: 88px;
  resize: vertical;
}

.workspace-blade label,
.workspace-blade .field-label,
.workspace-blade .form-note {
  color: #405169;
  font-size: 12px;
  font-weight: 850;
}

.people-table-wrap {
  overflow: auto;
  border: 1px solid var(--workspace-line);
  border-radius: 8px;
  background: #ffffff;
  box-shadow: var(--workspace-shadow);
}

.people-table {
  width: 100%;
  min-width: 880px;
  border-collapse: collapse;
  color: var(--workspace-ink);
  font-size: 13px;
}

.people-table th,
.people-table td {
  padding: 13px 14px;
  border-bottom: 1px solid var(--workspace-line);
  text-align: left;
  vertical-align: top;
}

.workspace-blade .people-table th {
  color: #52657c;
  background: #f8fbfe;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.table-record-button {
  color: var(--workspace-ink);
}

.status-pill {
  border: 0;
  font-size: 12px;
}

.definition-list {
  border: 1px solid var(--workspace-line);
  border-radius: 8px;
  background: var(--workspace-line);
}

.definition-list > div {
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  background: #ffffff;
}

.definition-list--compact > div {
  padding: 12px;
}

.policy-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.workspace-blade .app-modal__panel {
  border-radius: 8px;
}

.workspace-blade .app-modal__head h2 {
  color: var(--workspace-ink);
  font-size: clamp(26px, 4vw, 42px);
  line-height: 1;
}

.profile-modal-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 18px;
}

.profile-summary-card {
  display: grid;
  gap: 14px;
}

.profile-summary-card--table {
  align-content: start;
  padding: 4px 0;
}

.profile-summary-card h3 {
  margin: 0;
  color: var(--workspace-ink);
  font-size: 18px;
}

.profile-org-list {
  display: grid;
  gap: 10px;
}

.profile-org-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 14px;
  border: 1px solid var(--workspace-line);
  border-radius: 8px;
  background: #ffffff;
}

.profile-org-row strong,
.profile-org-row span {
  display: block;
}

.profile-org-row span,
.profile-org-row small {
  color: var(--muted);
  font-weight: 750;
}

.site-header__profile-trigger {
  margin-left: 6px;
}

.modal-actions--profile {
  justify-content: space-between;
  align-items: center;
}

@media (max-width: 1180px) {
  .workspace-blade {
    grid-template-columns: 60px minmax(260px, 290px) minmax(0, 1fr);
  }

  .blade-action-grid,
  .workspace-blade .dashboard-summary,
  .workspace-blade .dashboard-summary--four,
  .platform-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .split-panel,
  .structure-layout--editor,
  .admin-grid,
  .issuer-org-layout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 820px) {
  .profile-modal-grid,
  .profile-org-row {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 780px) {
  .workspace-blade {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto minmax(0, 1fr);
    height: auto;
    min-height: calc(100vh - var(--workspace-site-header));
    overflow: visible;
  }

  .workspace-blade__topbar {
    height: auto;
    flex-wrap: wrap;
    padding: 14px;
  }

  .workspace-blade__topbar nav {
    width: 100%;
    margin-left: 0;
  }

  .workspace-blade__rail {
    display: none;
  }

  .workspace-blade__nav,
  .workspace-blade__content {
    grid-column: 1;
    grid-row: auto;
    height: auto;
    overflow: visible;
  }

  .workspace-blade__content {
    padding: 16px;
  }

  .workspace-blade__menu {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .workspace-blade__section-label {
    grid-column: 1 / -1;
  }

  .workspace-blade .section-heading,
  .blade-overview,
  .people-directory__head,
  .identity-reminder {
    display: grid;
    grid-template-columns: 1fr;
  }

  .workspace-blade .toolbar,
  .people-directory__tools {
    justify-content: flex-start;
    justify-items: stretch;
    min-width: 0;
  }

  .blade-action-grid,
  .workspace-blade .dashboard-summary,
  .workspace-blade .dashboard-summary--four,
  .configuration-grid,
  .platform-grid,
  .policy-row,
  .people-filters,
  .field-row {
    grid-template-columns: 1fr;
  }

  .blade-overview h1,
  .workspace-blade .section-heading h2 {
    font-size: 36px;
  }
}

/* Workspace blade production polish: keep the app shell isolated from global page chrome. */
body.workspace-page,
body:has(.workspace-blade) {
  --workspace-site-header: 90px;
  --workspace-footer-height: 0px;
  overflow: auto;
  background: #edf4fa;
}

body.workspace-page main,
body:has(.workspace-blade) main {
  height: auto;
  min-height: 0;
  overflow: visible;
}

body.workspace-page .workspace-blade,
.workspace-blade {
  --workspace-site-header: 90px;
  --workspace-footer-height: 0px;
  height: calc(100dvh - var(--workspace-site-header));
  min-height: calc(100dvh - var(--workspace-site-header));
  margin-top: var(--workspace-site-header);
  overflow: hidden;
}

.workspace-blade__content {
  min-height: 100%;
  padding-bottom: 0;
  overflow-x: hidden;
  overflow-y: auto;
}

.workspace-blade .blade-panel {
  width: 100%;
  max-width: 1240px;
  min-height: 0;
}

.workspace-blade .section-heading,
.blade-overview {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: 8px;
  max-width: 1040px;
}

.workspace-blade .section-heading > .eyebrow {
  grid-column: 1;
  grid-row: auto;
}

.workspace-blade .section-heading > h2 {
  grid-column: 1;
  grid-row: auto;
}

.workspace-blade .section-heading > p:last-child {
  grid-column: 1;
  grid-row: auto;
  align-self: start;
}

.workspace-blade .section-heading h2,
.blade-overview h1 {
  max-width: 860px;
  margin-bottom: 0;
  font-size: clamp(28px, 3.2vw, 46px);
  line-height: 1.02;
}

.workspace-blade .section-heading p:last-child,
.blade-overview p:not(.eyebrow) {
  max-width: 860px;
  font-size: 15px;
}

body.workspace-page .site-footer,
body:has(.workspace-blade) .site-footer {
  display: flex !important;
  height: auto;
  min-height: auto;
  padding: 16px 6%;
  align-items: center;
  margin: 0;
}

body.workspace-page .site-footer .footer-logo,
body:has(.workspace-blade) .site-footer .footer-logo {
  width: 118px;
}

body.workspace-page .site-footer div,
body:has(.workspace-blade) .site-footer div {
  display: flex;
  align-items: center;
  gap: 12px;
}

body.workspace-page .site-footer strong,
body.workspace-page .site-footer div span,
body:has(.workspace-blade) .site-footer strong,
body:has(.workspace-blade) .site-footer div span {
  display: none;
}

.workspace-blade .dashboard-summary,
.workspace-blade .dashboard-summary--four {
  grid-template-columns: repeat(4, minmax(150px, 1fr));
}

.blade-action-grid {
  grid-template-columns: repeat(4, minmax(180px, 1fr));
}

.blade-action-card {
  min-height: 132px;
}

.people-directory {
  overflow: hidden;
}

.people-directory__head {
  grid-template-columns: minmax(250px, 0.55fr) minmax(430px, 1fr);
  align-items: end;
}

.people-directory__tools {
  width: 100%;
  min-width: 0;
  max-width: none;
}

.people-directory__tools > .button {
  justify-self: end;
}

.people-filters {
  width: 100%;
  grid-template-columns: minmax(170px, 1fr) repeat(3, minmax(120px, 0.65fr)) auto;
}

.people-table-wrap {
  max-width: 100%;
  overflow: auto;
}

.people-table {
  min-width: 1280px;
  table-layout: auto;
}

.definition-table {
  min-width: 980px;
}

.people-table th:first-child,
.people-table td:first-child {
  min-width: 160px;
}

.people-table th:nth-child(2),
.people-table td:nth-child(2) {
  min-width: 220px;
}

.definition-table th:nth-child(2),
.definition-table td:nth-child(2) {
  min-width: 180px;
}

.people-table th:last-child,
.people-table td:last-child {
  min-width: 180px;
}

.table-record-button strong {
  overflow-wrap: normal;
  word-break: normal;
}

.table-muted {
  color: var(--workspace-muted);
  font-size: 12px;
  font-weight: 750;
}

.workspace-blade .policy {
  display: grid;
  min-width: 0;
  gap: 8px;
  align-content: start;
}

.workspace-blade .policy strong,
.workspace-blade .policy span {
  display: block;
}

.workspace-blade .policy strong {
  font-size: 20px;
  line-height: 1.1;
}

.policy-row {
  grid-template-columns: repeat(3, minmax(150px, 1fr));
}

.platform-card .policy-row,
.split-panel .policy-row {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.platform-card .policy {
  padding: 14px;
}

.platform-card .policy span {
  font-size: 12px;
}

.structure-layout--editor {
  grid-template-columns: minmax(0, 1.3fr) minmax(360px, 0.7fr);
}

.org-chart-side .platform-card {
  overflow: hidden;
}

.workspace-blade .org-chart-card {
  padding: 22px;
}

.workspace-blade .org-chart-card .platform-card__head {
  margin-bottom: 18px;
}

.org-chart-canvas {
  display: block;
  min-height: 520px;
  padding: 32px;
  overflow: auto;
  border: 1px solid var(--workspace-line);
  border-radius: 8px;
  background-image:
    linear-gradient(var(--workspace-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--workspace-line) 1px, transparent 1px);
  background-size: 28px 28px;
  background-color: #f8fbff;
}

.org-chart-tree {
  display: flex;
  min-width: max-content;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  padding: 8px;
}

.org-chart-tree:has(.org-chart-level:nth-child(2)) {
  padding-bottom: 28px;
}

.org-chart-level {
  min-width: max-content;
}

.org-chart-level {
  position: relative;
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  gap: 32px;
}

.org-chart-level:not(:first-child)::before {
  position: absolute;
  top: -28px;
  left: 50%;
  width: 2px;
  height: 28px;
  background: #b7cae0;
  content: "";
}

.org-chart-level:not(:first-child)::after {
  position: absolute;
  top: -28px;
  left: 12%;
  right: 12%;
  height: 2px;
  background: #b7cae0;
  content: "";
}

.org-chart-level:first-child .org-node {
  width: 340px;
  min-width: 340px;
  border-left-color: var(--workspace-green);
  background: linear-gradient(180deg, #ffffff, #f7fbff);
}

.org-chart-level .org-node::before {
  position: absolute;
  top: -28px;
  left: 50%;
  display: block;
  width: 2px;
  height: 28px;
  background: #b7cae0;
  content: "";
}

.org-chart-level:first-child .org-node::before {
  display: none;
}

.org-node {
  position: relative;
  display: grid;
  width: 240px;
  min-width: 240px;
  min-height: 142px;
  margin: 0;
  padding: 16px;
  border: 1px solid var(--workspace-line);
  border-left: 5px solid var(--workspace-blue);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 16px 32px rgba(7, 22, 38, 0.08);
}

.org-node strong,
.org-node span,
.org-node small {
  display: block;
}

.org-node strong {
  color: var(--workspace-ink);
  font-size: 17px;
  line-height: 1.15;
}

.org-node span,
.org-node small {
  margin-top: 5px;
  color: var(--workspace-muted);
  font-size: 12px;
  font-weight: 750;
}

.org-node .tag-row {
  align-self: end;
  margin-top: 14px;
}

.org-chart-side .definition-list--compact {
  display: grid;
  gap: 10px;
}

.org-chart-side .definition-list--compact > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 12px;
  border: 1px solid var(--workspace-line);
  border-radius: 8px;
  background: #f8fbff;
}

.org-chart-side .definition-list--compact span {
  color: var(--workspace-muted);
  font-size: 12px;
  font-weight: 750;
}

.org-chart-toolbar {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: end;
  margin-bottom: 18px;
}

.org-chart-toolbar h3 {
  margin: 0;
  color: var(--workspace-ink);
  font-size: clamp(24px, 2.2vw, 34px);
  line-height: 1.05;
}

.org-chart-toolbar__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
}

.org-chart-alert {
  margin-bottom: 16px;
  padding: 14px 16px;
  border: 1px solid #e7bd75;
  border-left: 5px solid #bb7a13;
  border-radius: 8px;
  background: #fff6e5;
  color: #704707;
  font-weight: 800;
}

.org-chart-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}

.org-chart-metrics article {
  min-width: 0;
  padding: 20px;
  border: 1px solid var(--workspace-line);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 12px 26px rgba(7, 22, 38, 0.06);
}

.org-chart-metrics strong,
.org-chart-metrics span {
  display: block;
}

.org-chart-metrics strong {
  color: var(--workspace-ink);
  font-size: 34px;
  line-height: 1;
}

.org-chart-metrics span {
  margin-top: 8px;
  color: var(--workspace-muted);
  font-size: 14px;
  font-weight: 850;
  line-height: 1.2;
}

.org-chart-card {
  overflow: hidden;
  border: 1px solid var(--workspace-line);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 24px 54px rgba(7, 22, 38, 0.09);
}

.org-chart-card__head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
  padding: 22px 24px;
  border-bottom: 1px solid var(--workspace-line);
}

.org-chart-zoom {
  display: flex;
  gap: 8px;
}

.org-chart-d3-shell {
  position: relative;
  min-height: 720px;
  overflow: hidden;
  background-color: #f8fbff;
  background-image:
    linear-gradient(var(--workspace-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--workspace-line) 1px, transparent 1px);
  background-size: 30px 30px;
}

.org-chart-d3 {
  width: 100%;
  min-height: 720px;
}

.org-chart-d3 svg {
  min-height: 720px;
}

.org-chart-d3 .link {
  stroke: #8ea8c2;
  stroke-width: 2.25px;
  fill: none;
}

.org-chart-node {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr);
  width: 100%;
  height: 100%;
  gap: 14px;
  align-items: start;
  padding: 18px;
  border: 1px solid #cfe0f0;
  border-left: 6px solid var(--workspace-blue);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.98);
  color: var(--workspace-ink);
  box-shadow: 0 18px 38px rgba(7, 22, 38, 0.11);
  text-align: left;
  cursor: pointer;
}

.org-chart-node:hover,
.org-chart-node:focus-visible {
  border-color: rgba(37, 105, 225, 0.55);
  box-shadow: 0 20px 46px rgba(37, 105, 225, 0.14);
  outline: none;
}

.org-chart-node--person {
  border-left-color: #21836e;
  background: #ffffff;
}

.org-chart-node__avatar {
  display: grid;
  width: 58px;
  height: 58px;
  place-items: center;
  overflow: hidden;
  border-radius: 8px;
  background: linear-gradient(135deg, #2569e1, #00abc0);
  color: #fff;
  font-size: 18px;
  font-weight: 950;
}

.org-chart-node__avatar-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.org-chart-node__body {
  min-width: 0;
}

.org-chart-node__body strong,
.org-chart-node__body span,
.org-chart-node__body small {
  display: block;
}

.org-chart-node__body strong {
  color: var(--workspace-ink);
  font-size: 22px;
  line-height: 1.05;
}

.org-chart-node__body span,
.org-chart-node__body small {
  margin-top: 7px;
  color: var(--workspace-muted);
  font-weight: 800;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.org-chart-node__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 14px;
}

.org-chart-node__tags span {
  margin: 0;
  padding: 5px 9px;
  border: 1px solid var(--workspace-line);
  border-radius: 999px;
  background: #f4f8fb;
  color: var(--workspace-muted);
  font-size: 12px;
  font-weight: 850;
}

.org-chart-expand-button {
  min-width: 42px;
  min-height: 36px;
  border: 1px solid var(--workspace-line);
  border-radius: 999px;
  background: #ffffff;
  color: var(--workspace-blue);
  font-weight: 950;
  box-shadow: 0 10px 22px rgba(7, 22, 38, 0.1);
}

.org-chart-empty,
.org-chart-fallback-list {
  display: grid;
  gap: 12px;
  padding: 24px;
}

.org-chart-fallback-list button {
  display: grid;
  gap: 6px;
  max-width: 460px;
  padding: 14px;
  border: 1px solid var(--workspace-line);
  border-radius: 8px;
  background: #fff;
  color: var(--workspace-ink);
  text-align: left;
}

.org-chart-people-list {
  display: grid;
  gap: 10px;
}

.org-chart-person-row {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  width: 100%;
  padding: 12px;
  border: 1px solid var(--workspace-line);
  border-radius: 8px;
  background: #f8fbff;
  color: var(--workspace-ink);
  text-align: left;
}

.org-chart-person-row span {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 999px;
  background: #287965;
  color: #fff;
  font-size: 14px;
  font-weight: 950;
}

.org-chart-person-row strong {
  min-width: 0;
  overflow-wrap: anywhere;
}

.org-chart-person-row small {
  color: var(--workspace-muted);
  font-weight: 750;
}

.workspace-blade .app-modal__head .video-modal__close {
  flex: 0 0 46px;
  width: 46px;
  min-width: 46px;
  height: 46px;
  padding: 0;
  overflow: hidden;
  font-size: 26px;
  line-height: 1;
}

.workspace-blade .checkbox-grid {
  grid-template-columns: repeat(2, minmax(120px, 1fr));
  gap: 8px;
}

.workspace-blade .checkline {
  align-items: center;
  min-width: 0;
  gap: 8px;
  color: var(--workspace-muted);
  font-size: 13px;
  line-height: 1.25;
}

.workspace-blade input[type="checkbox"],
.workspace-blade input[type="radio"] {
  flex: 0 0 16px;
  width: 16px;
  min-width: 16px;
  height: 16px;
  min-height: 16px;
  margin: 0;
  padding: 0;
}

.workspace-blade .checkline span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.workspace-blade .platform-card__head,
.workspace-blade .config-tile__head {
  grid-template-columns: 46px minmax(0, 1fr);
}

.workspace-blade .platform-icon,
.blade-action-card span {
  width: 40px;
  height: 40px;
  font-size: 12px;
}

@media (max-width: 1180px) {
  .workspace-blade .section-heading,
  .blade-overview,
  .people-directory__head,
  .org-chart-toolbar {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .people-directory__tools,
  .people-directory__tools > .button,
  .org-chart-toolbar__actions {
    justify-self: stretch;
    justify-content: flex-start;
  }

  .people-filters {
    grid-template-columns: minmax(180px, 1fr) repeat(3, minmax(130px, 0.7fr)) auto;
  }

  .org-chart-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 780px) {
  body.workspace-page {
    overflow: auto;
  }

  body.workspace-page main {
    height: auto;
    overflow: visible;
  }

  body.workspace-page .workspace-blade,
  .workspace-blade {
    height: auto;
    overflow: visible;
  }

  .people-filters,
  .workspace-blade .checkbox-grid,
  .policy-row,
  .org-chart-metrics {
    grid-template-columns: 1fr;
  }

  .org-chart-toolbar,
  .org-chart-toolbar__actions,
  .org-chart-card__head {
    display: grid;
    justify-content: stretch;
  }

  .org-chart-d3-shell,
  .org-chart-d3,
  .org-chart-d3 svg {
    min-height: 580px;
  }
}

/* Human-facing health dashboard */
.health-page {
  display: grid;
  gap: 28px;
  padding: 132px 6% 84px;
  background:
    radial-gradient(circle at top right, rgba(15, 178, 203, 0.14), transparent 30%),
    linear-gradient(180deg, #f4f9fc 0%, #ffffff 60%);
}

.health-hero {
  display: grid;
  max-width: 1060px;
  gap: 14px;
}

.health-hero h1 {
  max-width: 760px;
  margin: 0;
  color: var(--navy-900);
  font-size: clamp(44px, 7vw, 86px);
  line-height: 0.96;
}

.health-hero > p:not(.eyebrow) {
  max-width: 780px;
  margin: 0;
  color: var(--muted);
  font-size: 20px;
  line-height: 1.45;
}

.health-summary,
.health-card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.health-summary {
  max-width: 920px;
  margin-top: 12px;
}

.health-summary article,
.health-card,
.health-log-panel {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: var(--shadow);
}

.health-summary article {
  display: grid;
  gap: 6px;
  padding: 18px;
}

.health-summary strong {
  color: var(--navy-900);
  font-size: 32px;
  line-height: 1;
}

.health-summary span,
.health-card p,
.health-log-panel__head span {
  color: var(--muted);
  font-weight: 750;
}

.health-card {
  display: grid;
  gap: 18px;
  align-content: start;
  min-height: 260px;
  padding: 24px;
}

.health-card__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: start;
}

.health-card h2,
.health-log-panel h2 {
  margin: 0;
  color: var(--navy-900);
  font-size: 28px;
  line-height: 1.05;
}

.health-badge {
  display: inline-flex;
  min-height: 32px;
  align-items: center;
  justify-content: center;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 950;
  white-space: nowrap;
}

.health-badge--ok {
  color: #087247;
  background: #dff9ec;
}

.health-badge--warn {
  color: #80540b;
  background: #fff4d9;
}

.health-badge--down {
  color: #9f1d1d;
  background: #ffe3e3;
}

.health-card code {
  display: block;
  min-width: 0;
  padding: 10px;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--navy-900);
  background: #f6f9fc;
  font-size: 12px;
}

.health-log-panel {
  display: grid;
  gap: 18px;
  padding: 24px;
}

.health-log-panel__head {
  display: flex;
  gap: 16px;
  align-items: end;
  justify-content: space-between;
}

.health-log-table-wrap {
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.health-log-table {
  width: 100%;
  min-width: 920px;
  border-collapse: collapse;
}

.health-log-table th,
.health-log-table td {
  padding: 13px 14px;
  border-bottom: 1px solid var(--line);
  color: var(--navy-900);
  text-align: left;
  vertical-align: top;
}

.health-log-table th {
  background: #f4f8fb;
  color: var(--muted);
  font-size: 12px;
  font-weight: 950;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.health-log-table pre {
  max-width: 460px;
  max-height: 150px;
  margin: 0;
  overflow: auto;
  color: var(--muted);
  font-size: 12px;
  white-space: pre-wrap;
}

.health-empty {
  margin: 0;
}

.credential-invite-viewer {
  display: grid;
  gap: 14px;
  padding: 16px;
  border: 1px solid rgba(148, 170, 196, 0.32);
  border-radius: 8px;
  background: #f7fafd;
}

.credential-invite-viewer__head {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  justify-content: space-between;
}

.credential-invite-viewer__head h3 {
  margin: 4px 0 0;
  color: var(--navy-900);
  font-size: 20px;
}

.credential-invite-switch {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  border: 1px solid rgba(148, 170, 196, 0.36);
  border-radius: 999px;
  background: #ffffff;
}

.credential-invite-switch input {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  opacity: 0;
  pointer-events: none;
}

.credential-invite-switch label {
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  padding: 6px 14px;
  border-radius: 999px;
  color: var(--muted);
  font-weight: 900;
  cursor: pointer;
}

.credential-invite-switch input:checked + label {
  color: #ffffff;
  background: var(--blue-600);
}

.credential-invite-panel {
  min-width: 0;
}

.credential-invite-panel--qr {
  display: grid;
  grid-template-columns: minmax(150px, 260px) minmax(0, 1fr);
  gap: 16px;
  align-items: center;
}

.credential-invite-panel--qr img {
  width: min(100%, 240px);
  padding: 10px;
  border: 1px solid rgba(148, 170, 196, 0.34);
  border-radius: 8px;
  background: #ffffff;
}

.credential-invite-panel--qr strong {
  color: var(--navy-900);
}

.credential-invite-panel--qr p {
  margin: 6px 0 12px;
  color: var(--muted);
  font-weight: 700;
}

.credential-invite-panel code,
.credential-invite-panel pre {
  display: block;
  max-width: 100%;
  padding: 12px;
  overflow: auto;
  border: 1px solid rgba(148, 170, 196, 0.32);
  border-radius: 8px;
  color: var(--navy-900);
  background: #ffffff;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.credential-invite-panel--json {
  display: none;
}

.credential-invite-viewer:has(.credential-invite-switch input[id^="credential-invite-json-"]:checked) .credential-invite-panel--qr {
  display: none;
}

.credential-invite-viewer:has(.credential-invite-switch input[id^="credential-invite-json-"]:checked) .credential-invite-panel--json {
  display: block;
}

/* Workspace people directory responsive polish */
.workspace-blade .people-directory {
  overflow: visible;
}

.workspace-blade .people-directory__head {
  grid-template-columns: minmax(260px, 0.6fr) minmax(0, 1fr);
  align-items: end;
}

.workspace-blade .people-directory__tools {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: flex-end;
  width: 100%;
  min-width: 0;
}

.workspace-blade .people-directory__tools > .button {
  flex: 0 0 auto;
  justify-self: auto;
  white-space: nowrap;
}

.workspace-blade .people-filters {
  flex: 1 1 720px;
  min-width: min(100%, 620px);
  grid-template-columns: minmax(160px, 1fr) repeat(3, minmax(112px, 0.7fr)) minmax(88px, auto);
}

.workspace-blade .people-table {
  min-width: 1080px;
  font-size: 12.5px;
}

.workspace-blade .people-table th,
.workspace-blade .people-table td {
  padding: 11px 10px;
}

.workspace-blade .people-table th:first-child,
.workspace-blade .people-table td:first-child {
  min-width: 130px;
}

.workspace-blade .people-table th:nth-child(2),
.workspace-blade .people-table td:nth-child(2) {
  min-width: 190px;
}

.workspace-blade .people-table th:last-child,
.workspace-blade .people-table td:last-child {
  min-width: 124px;
}

.workspace-blade .row-actions {
  flex-wrap: wrap;
  min-width: 0;
}

.workspace-blade .connected-app-directory .people-directory__head {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}

.workspace-blade .connected-app-directory .connected-app-create-button {
  width: auto;
  min-width: 220px;
  max-width: 260px;
  justify-self: end;
  white-space: nowrap;
}

.workspace-blade .connected-app-filters {
  width: 100%;
  min-width: 0;
  grid-template-columns: minmax(190px, 1.4fr) repeat(4, minmax(120px, 0.75fr)) minmax(96px, auto);
}

.workspace-blade .connected-app-table-wrap,
.workspace-blade .connected-app-card .table-wrap {
  overflow-x: hidden;
}

.workspace-blade .connected-app-table {
  width: 100%;
  min-width: 0;
  table-layout: fixed;
  font-size: 12px;
}

.workspace-blade .connected-app-table th,
.workspace-blade .connected-app-table td,
.workspace-blade .connected-app-subtable th,
.workspace-blade .connected-app-subtable td {
  padding: 10px 8px;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: normal;
  vertical-align: top;
}

.workspace-blade .connected-app-table th:first-child,
.workspace-blade .connected-app-table td:first-child {
  width: 18%;
  min-width: 0;
}

.workspace-blade .connected-app-table th:nth-child(2),
.workspace-blade .connected-app-table td:nth-child(2) {
  width: 17%;
  min-width: 0;
}

.workspace-blade .connected-app-table th:nth-child(3),
.workspace-blade .connected-app-table td:nth-child(3) {
  width: 7%;
}

.workspace-blade .connected-app-table th:nth-child(4),
.workspace-blade .connected-app-table td:nth-child(4) {
  width: 8%;
}

.workspace-blade .connected-app-table th:nth-child(5),
.workspace-blade .connected-app-table td:nth-child(5) {
  width: 10%;
}

.workspace-blade .connected-app-table th:nth-child(6),
.workspace-blade .connected-app-table td:nth-child(6) {
  width: 9%;
}

.workspace-blade .connected-app-table th:nth-child(7),
.workspace-blade .connected-app-table td:nth-child(7) {
  width: 11%;
}

.workspace-blade .connected-app-table th:last-child,
.workspace-blade .connected-app-table td:last-child {
  width: 20%;
  min-width: 0;
}

.workspace-blade .connected-app-table .row-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.workspace-blade .connected-app-table .row-actions form {
  min-width: 0;
}

.workspace-blade .connected-app-table .icon-button,
.workspace-blade .connected-app-subtable .icon-button {
  width: 100%;
  min-width: 0;
  padding-inline: 8px;
  white-space: normal;
  line-height: 1.15;
}

.workspace-blade .connected-app-modal {
  align-content: start;
}

.workspace-blade .connected-app-modal-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

.workspace-blade .connected-app-subtable {
  min-width: 0;
  width: 100%;
  table-layout: fixed;
  font-size: 12px;
}

@media (max-width: 1380px) {
  .workspace-blade .people-directory__head {
    grid-template-columns: 1fr;
  }

  .workspace-blade .people-directory__tools {
    justify-content: flex-start;
  }

  .workspace-blade .connected-app-directory .people-directory__head,
  .workspace-blade .connected-app-filters {
    grid-template-columns: 1fr;
  }

  .workspace-blade .connected-app-directory .connected-app-create-button {
    width: min(100%, 260px);
    justify-self: start;
  }
}

@media (max-width: 920px) {
  .health-summary,
  .health-card-grid,
  .workspace-blade .people-filters {
    grid-template-columns: 1fr;
  }

  .workspace-blade .people-filters {
    min-width: 100%;
  }

  .health-log-panel__head {
    display: grid;
    justify-content: stretch;
  }

  .credential-invite-panel--qr {
    grid-template-columns: 1fr;
  }
}

.connected-app-layout {
  display: grid;
  grid-template-columns: minmax(280px, 0.8fr) minmax(420px, 1.6fr);
  gap: 18px;
  align-items: start;
  margin-top: 22px;
}

.connected-app-layout--secondary {
  grid-template-columns: minmax(320px, 0.85fr) minmax(520px, 1.4fr);
}

.connected-app-card {
  border: 1px solid rgba(148, 170, 196, 0.32);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 18px 48px rgba(7, 25, 40, 0.08);
  padding: 24px;
}

.connected-app-card__head {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: flex-start;
  margin-bottom: 20px;
}

.connected-app-card__head h3 {
  margin: 4px 0 6px;
  font-size: clamp(22px, 2vw, 34px);
  line-height: 1.08;
}

.connected-app-card__head p {
  margin: 0;
  color: #65748a;
  font-weight: 700;
  max-width: 760px;
}

.connected-app-list {
  display: grid;
  gap: 12px;
}

.connected-app-list__item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 6px 12px;
  padding: 16px;
  border: 1px solid rgba(148, 170, 196, 0.38);
  border-radius: 8px;
  color: #071928;
  text-decoration: none;
}

.connected-app-list__item--active {
  border-color: rgba(33, 107, 230, 0.7);
  box-shadow: inset 4px 0 0 #216be6;
}

.connected-app-list__item span,
.connected-app-list__item em {
  color: #65748a;
  font-style: normal;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 11px;
}

.connected-app-list__item strong {
  grid-column: 2 / 3;
  font-size: 18px;
}

.connected-app-list__item small {
  grid-column: 2 / 4;
  color: #65748a;
  font-weight: 700;
  word-break: break-word;
}

.connected-app-endpoints {
  margin: 18px 0;
}

.connected-app-endpoints code,
.connected-app-code,
.api-docs-page code {
  overflow-wrap: anywhere;
  color: #071928;
}

.secret-callout {
  display: grid;
  gap: 8px;
  padding: 16px;
  border: 1px solid rgba(25, 135, 84, 0.35);
  border-left: 5px solid #198754;
  border-radius: 8px;
  background: #ecfdf4;
  color: #071928;
}

.secret-callout code {
  padding: 10px 12px;
  border-radius: 6px;
  background: #ffffff;
  border: 1px solid rgba(148, 170, 196, 0.34);
  overflow-wrap: anywhere;
}

.compact-form {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-bottom: 16px;
}

.compact-form input,
.compact-form select {
  min-height: 44px;
  border: 1px solid rgba(148, 170, 196, 0.4);
  border-radius: 8px;
  padding: 0 12px;
  font: inherit;
}

.credential-list {
  display: grid;
  gap: 10px;
  margin-top: 16px;
}

.credential-list article {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6px 12px;
  align-items: center;
  padding: 14px;
  border: 1px solid rgba(148, 170, 196, 0.34);
  border-radius: 8px;
  background: rgba(247, 250, 253, 0.82);
}

.credential-list article span,
.credential-list article small {
  color: #65748a;
  font-weight: 700;
}

.connected-app-log-table {
  min-width: 760px;
}

.api-docs-page,
.authorize-page {
  background: linear-gradient(135deg, #eef7fb 0%, #ffffff 55%);
  color: #071928;
  padding: 84px 6%;
}

.api-docs-hero,
.authorize-panel {
  max-width: 1180px;
  margin: 0 auto 28px;
}

.api-docs-hero h1,
.authorize-panel h1 {
  max-width: 980px;
  margin: 0 0 18px;
  font-size: clamp(42px, 7vw, 96px);
  line-height: 0.96;
}

.api-docs-hero p,
.authorize-panel > p {
  max-width: 760px;
  color: #65748a;
  font-size: 20px;
  font-weight: 700;
}

.api-docs-grid,
.api-code-grid {
  max-width: 1180px;
  margin: 0 auto 28px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.api-docs-grid article,
.api-docs-section,
.authorize-panel {
  border: 1px solid rgba(148, 170, 196, 0.32);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.95);
  padding: 28px;
  box-shadow: 0 22px 56px rgba(7, 25, 40, 0.08);
}

.api-docs-grid span {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 8px;
  background: linear-gradient(135deg, #216be6, #00a8b8);
  color: #ffffff;
  font-weight: 900;
}

.api-docs-grid h2,
.api-code-grid h3 {
  margin: 18px 0 8px;
}

.api-docs-grid p,
.api-endpoint-list p {
  color: #65748a;
  font-weight: 700;
}

.api-docs-section {
  max-width: 1180px;
  margin: 0 auto 28px;
}

.api-endpoint-list,
.api-code-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.api-endpoint-list {
  display: grid;
  gap: 12px;
}

.api-endpoint-list article,
.api-code-grid article {
  padding: 16px;
  border: 1px solid rgba(148, 170, 196, 0.32);
  border-radius: 8px;
  background: #ffffff;
}

.api-endpoint-list span {
  color: #216be6;
  font-weight: 900;
}

.api-code-grid pre {
  margin: 0;
  padding: 16px;
  border: 1px solid rgba(148, 170, 196, 0.32);
  border-radius: 8px;
  color: #071928;
  background: #f7fafd;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.api-code-grid pre code {
  color: #071928;
  background: transparent;
  font-size: 13px;
  line-height: 1.55;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.authorize-panel {
  max-width: 820px;
}

.authorize-scopes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 18px 0;
}

.authorize-scopes span {
  border: 1px solid rgba(148, 170, 196, 0.32);
  border-radius: 999px;
  padding: 6px 10px;
  color: #071928;
  font-weight: 800;
  background: #f7fafd;
}

.docs-workspace-body > main {
  --docs-site-header-offset: 90px;
  --docs-top-gap: 4px;
  background: #f4f8fb;
  padding-top: var(--docs-site-header-offset);
}

.docs-workspace-page {
  color: #071928;
  padding: var(--docs-top-gap, 4px) 4% 18px;
  background: #f4f8fb;
}

.docs-shell {
  display: grid;
  grid-template-columns: minmax(260px, 320px) minmax(0, 1fr);
  gap: 20px;
  max-width: 1480px;
  margin: 0 auto;
  align-items: start;
}

.docs-sidebar,
.docs-reader {
  border: 1px solid rgba(148, 170, 196, 0.34);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 18px 44px rgba(7, 25, 40, 0.06);
}

.docs-sidebar {
  position: sticky;
  top: calc(var(--docs-site-header-offset, 90px) + var(--docs-top-gap, 14px));
  max-height: calc(100vh - var(--docs-site-header-offset, 90px) - (var(--docs-top-gap, 14px) * 2));
  overflow: auto;
  padding: 18px;
  overscroll-behavior: contain;
  scroll-padding-top: 96px;
}

.docs-sidebar__header {
  margin: -18px -18px 0;
  padding: 18px 18px 14px;
  background: #ffffff;
  border-bottom: 1px solid rgba(148, 170, 196, 0.18);
}

.docs-sidebar__header h1 {
  margin: 2px 0 6px;
  font-size: 28px;
  letter-spacing: 0;
}

.docs-sidebar__header p:not(.eyebrow),
.docs-search label,
.docs-search-results p,
.docs-reader__meta,
.docs-reader__content p,
.docs-reader__content li,
.docs-reader__content td {
  color: #5f7087;
}

.docs-sidebar__header p:not(.eyebrow),
.docs-search-results p {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  font-weight: 650;
}

.docs-search {
  margin: 18px 0;
}

.docs-search label,
.docs-nav-heading {
  display: block;
  margin: 0 0 8px;
  color: #00a8b8;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.docs-search div {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
}

.docs-search input {
  min-width: 0;
  border: 1px solid rgba(148, 170, 196, 0.45);
  border-radius: 8px;
  padding: 10px 12px;
  font: inherit;
  font-size: 14px;
  color: #071928;
  background: #ffffff;
}

.docs-search button {
  border: 0;
  border-radius: 8px;
  padding: 10px 12px;
  color: #ffffff;
  background: #216be6;
  font: inherit;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
}

.docs-search-results {
  margin: 0 0 18px;
  padding: 14px;
  border: 1px solid rgba(33, 107, 230, 0.18);
  border-radius: 8px;
  background: #f7fafd;
}

.docs-result-link,
.docs-category__links a {
  display: block;
  border-radius: 7px;
  color: #071928;
  text-decoration: none;
}

.docs-result-link {
  padding: 10px;
}

.docs-result-link:hover,
.docs-category__links a:hover,
.docs-category__links a.is-active {
  background: #eaf2ff;
}

.docs-result-link strong {
  display: block;
  font-size: 14px;
}

.docs-result-link span {
  display: block;
  margin-top: 2px;
  color: #5f7087;
  font-size: 12px;
  font-weight: 700;
}

.docs-category {
  border-top: 1px solid rgba(148, 170, 196, 0.22);
}

.docs-category summary {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 12px 0;
  color: #071928;
  font-size: 14px;
  font-weight: 850;
  cursor: pointer;
}

.docs-category summary::marker {
  color: #216be6;
}

.docs-category summary small {
  display: inline-grid;
  place-items: center;
  min-width: 26px;
  min-height: 24px;
  border-radius: 999px;
  color: #216be6;
  background: #edf4ff;
  font-size: 12px;
  font-weight: 900;
}

.docs-category__links {
  display: grid;
  gap: 2px;
  padding: 0 0 12px 18px;
}

.docs-category__links a {
  padding: 8px 10px;
  color: #39495d;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.35;
}

.docs-category__links a.is-active {
  color: #216be6;
  font-weight: 900;
}

.docs-reader {
  min-width: 0;
  padding: 0;
  overflow: hidden;
}

.docs-reader__meta {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
  border-bottom: 1px solid rgba(148, 170, 196, 0.28);
  padding: 14px 28px;
  font-size: 12px;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.docs-reader__meta a {
  color: #216be6;
  text-decoration: none;
}

.docs-reader__content,
.docs-empty-state {
  max-width: 960px;
  padding: 30px 36px 48px;
}

.docs-reader__content h1 {
  margin: 0 0 12px;
  font-size: clamp(34px, 5vw, 54px);
  line-height: 1.02;
  letter-spacing: 0;
}

.docs-reader__content h2 {
  margin: 34px 0 10px;
  padding-top: 6px;
  border-top: 1px solid rgba(148, 170, 196, 0.18);
  font-size: 24px;
  line-height: 1.18;
}

.docs-reader__content h3 {
  margin: 26px 0 8px;
  font-size: 19px;
  line-height: 1.25;
}

.docs-reader__content h4 {
  margin: 20px 0 6px;
  font-size: 16px;
}

.docs-reader__content p,
.docs-reader__content li,
.docs-reader__content td {
  font-size: 15px;
  line-height: 1.68;
  font-weight: 600;
}

.docs-reader__content a {
  color: #216be6;
  font-weight: 800;
}

.docs-reader__content ul,
.docs-reader__content ol {
  padding-left: 22px;
}

.docs-reader__content li + li {
  margin-top: 5px;
}

.docs-reader__content code {
  border-radius: 5px;
  padding: 2px 5px;
  color: #071928;
  background: #edf4ff;
  font-size: 0.92em;
}

.docs-reader__content pre {
  margin: 16px 0;
  border: 1px solid rgba(148, 170, 196, 0.32);
  border-radius: 8px;
  padding: 16px;
  background: #f7fafd;
  overflow-x: auto;
}

.docs-reader__content pre code {
  padding: 0;
  color: #071928;
  background: transparent;
  font-size: 13px;
  line-height: 1.55;
  white-space: pre;
}

.docs-reader__content img {
  max-width: 100%;
  height: auto;
}

.docs-reader__content .mermaid {
  margin: 16px 0;
  border: 1px solid rgba(148, 170, 196, 0.32);
  border-radius: 8px;
  padding: 18px;
  color: #071928;
  background: #ffffff;
  overflow-x: auto;
  text-align: center;
}

.docs-reader__content .mermaid svg {
  max-width: 100%;
  height: auto;
}

.docs-reader__content .mermaid--error {
  text-align: left;
  white-space: pre-wrap;
  color: #8f1d1d;
  background: #fff7f7;
}

.docs-reader__content .mermaid--error::before {
  content: attr(data-error);
  display: block;
  margin-bottom: 8px;
  font-weight: 900;
}

.docs-reader__content table {
  width: 100%;
  margin: 16px 0;
  border-collapse: collapse;
  border: 1px solid rgba(148, 170, 196, 0.32);
  border-radius: 8px;
  overflow: hidden;
  display: block;
  max-width: 100%;
  overflow-x: auto;
}

.docs-reader__content th,
.docs-reader__content td {
  border-bottom: 1px solid rgba(148, 170, 196, 0.24);
  padding: 10px 12px;
  text-align: left;
  vertical-align: top;
}

.docs-reader__content th {
  color: #39495d;
  background: #f2f7fc;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.docs-reader__content blockquote {
  margin: 18px 0;
  border-left: 4px solid #216be6;
  border-radius: 8px;
  padding: 12px 16px;
  color: #39495d;
  background: #f7fafd;
}

.docs-empty-state h2 {
  margin: 0 0 8px;
  font-size: 28px;
}

@media (max-width: 1120px) {
  .connected-app-layout,
  .connected-app-layout--secondary,
  .api-docs-grid,
  .api-endpoint-list,
  .api-code-grid,
  .docs-shell {
    grid-template-columns: 1fr;
  }

  .docs-sidebar {
    position: static;
    max-height: none;
    overflow: visible;
  }
}

@media (max-width: 720px) {
  .docs-workspace-body > main {
    --docs-site-header-offset: 78px;
    --docs-top-gap: 10px;
  }

  .docs-workspace-page {
    padding: 16px;
  }

  .docs-reader__content,
  .docs-empty-state {
    padding: 22px 18px 34px;
  }

  .docs-reader__content h1 {
    font-size: 34px;
  }

  .docs-reader__meta {
    align-items: flex-start;
    flex-direction: column;
    padding: 12px 18px;
  }

  .docs-search div {
    grid-template-columns: 1fr;
  }
}

/* Testing page — purpose line and the list of what each app exercises. */
.example-app-card__purpose {
  font-weight: 600;
  color: var(--navy-800, #143453);
  margin-bottom: 6px;
}

.example-app-card__tests {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.example-app-card__tests li {
  font-size: 12px;
  font-weight: 600;
  color: var(--navy-800, #143453);
  background: var(--soft-blue, #eaf5fd);
  border: 1px solid var(--line, #dce7f2);
  border-radius: 999px;
  padding: 3px 10px;
}

/* Page-level heading: the global h1 is sized for the marketing hero, which is
   oversized for an interior page. The site header is fixed and roughly 104px
   tall, so an interior page that starts at the top of the document has to clear
   it explicitly or the heading renders underneath it. */
.band--page-top {
  padding-top: calc(104px + 48px);
}

@media (max-width: 760px) {
  .band--page-top {
    padding-top: calc(104px + 24px);
  }
}

.section-heading--page h1 {
  font-size: clamp(30px, 3.4vw, 52px);
  line-height: 1.08;
}

/* Admin tables.
   Used by the wallet, account-recovery and registration-code screens. The
   wrapper scrolls rather than the page, so a wide table never pushes the whole
   layout sideways. */
.data-table {
  width: 100%;
  margin: 0 0 22px;
  border-collapse: collapse;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  font-size: 14px;
}

.data-table th,
.data-table td {
  padding: 12px 14px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--line);
}

.data-table th {
  color: var(--navy-900);
  background: var(--mist);
  font-weight: 900;
  white-space: nowrap;
}

.data-table tr:last-child td {
  border-bottom: none;
}

.data-table code {
  word-break: break-all;
}

.table-note {
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.inline-form {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin: 0 0 8px;
}

.inline-form input[type='text'] {
  min-width: 0;
  flex: 1 1 140px;
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  font: inherit;
  font-size: 13px;
}

.checkbox-row {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 0 0 8px;
  font-weight: 700;
}

.checkbox-row input {
  width: 18px;
  min-height: 18px;
  margin-top: 3px;
  padding: 0;
  flex: 0 0 18px;
}

.checkbox-row .table-note {
  display: block;
  margin-top: 0;
}

/* A secret shown once. Large and selectable, because the only chance to copy it
   is right now. */
.code-reveal {
  margin: 10px 0;
}

.code-reveal code {
  display: inline-block;
  padding: 10px 16px;
  color: var(--navy-900);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 22px;
  font-weight: 900;
  letter-spacing: 2px;
  user-select: all;
}

@media (max-width: 720px) {
  .data-table {
    display: block;
    overflow-x: auto;
  }
}

/* Choosing a plan.
   Used on the landing page and on /plans, which show the same catalogue. */
.plan-choices {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 18px;
  margin: 0 0 26px;
  align-items: stretch;
}

.plan-choice {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 22px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow);
}

.plan-choice--featured {
  border-color: var(--blue-600);
  border-width: 2px;
}

.plan-choice h2,
.plan-choice h3 {
  margin: 0;
  color: var(--navy-900);
  font-size: 20px;
}

.plan-choice__flag {
  margin: 0;
  color: var(--blue-600);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.plan-choice__price {
  margin: 0;
  color: var(--navy-900);
  font-size: 17px;
  font-weight: 900;
}

.plan-choice__blurb {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
}

.plan-choice__limits {
  margin: 0;
  padding: 0 0 0 18px;
  color: var(--ink);
  font-size: 14px;
}

.plan-choice__limits li {
  margin-bottom: 4px;
}

/* The button sits at the bottom whatever the card's height, so a row of cards
   reads as one row rather than a staircase. */
.plan-choice form {
  margin-top: auto;
  padding-top: 10px;
}

.plan-choice form .button {
  width: 100%;
}

/* Checkout. */
.checkout-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: 24px;
  align-items: start;
}

.checkout-summary,
.checkout-option {
  padding: 22px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 12px;
}

.checkout-summary h2,
.checkout-option h2 {
  margin: 0 0 10px;
  color: var(--navy-900);
  font-size: 18px;
}

.checkout-options {
  display: grid;
  gap: 18px;
}

.checkout-option p {
  margin: 0 0 14px;
  color: var(--muted);
  font-size: 14px;
}

@media (max-width: 860px) {
  .checkout-layout {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* The plan a signup is already committed to, shown but not editable. */
.chosen-plan {
  margin: 0 0 20px;
  padding: 16px 18px;
  background: var(--soft-blue);
  border: 1px solid var(--line);
  border-left: 5px solid var(--blue-600);
  border-radius: 8px;
}

.chosen-plan h3 {
  margin: 4px 0 6px;
  color: var(--navy-900);
  font-size: 17px;
}

.chosen-plan p {
  margin: 0;
  color: var(--ink);
  font-size: 14px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Choosing a plan inside the account form.
   A plain list rather than a boxed panel, so the plan column and the account
   column start on the same line and read as one form. */
.plan-picker {
  display: grid;
  gap: 7px;
  margin: 0;
  padding: 0;
  border: 0;
}

.plan-picker legend {
  padding: 0;
  color: var(--navy-900);
  font-size: 14px;
  font-weight: 800;
}

.plan-picker__note {
  margin: 0 0 4px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.4;
}

.plan-picker__options {
  display: grid;
  gap: 10px;
}

.plan-option {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  margin: 0;
  padding: 14px 16px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 10px;
  cursor: pointer;
  transition: border-color 120ms ease, background-color 120ms ease;
}

.plan-option:hover {
  border-color: #9dc2ec;
}

/* The chosen plan should be unmistakable — it is the most consequential
   choice on this form. */
.plan-option:has(input:checked) {
  background: var(--soft-blue);
  border-color: var(--blue-600);
  box-shadow: inset 3px 0 0 var(--blue-600);
}

/* The global input rule sets width:100% and min-height:44px, which turns a
   radio into a block the size of the row. Same override as .checkline. */
.plan-option input {
  width: 18px;
  min-height: 18px;
  margin: 3px 0 0;
  padding: 0;
}

.plan-option__body {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.plan-option__head {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.plan-option__name {
  color: var(--navy-900);
  font-size: 15px;
  font-weight: 900;
}

.plan-option__flag {
  padding: 2px 7px;
  color: var(--blue-600);
  background: #e4f0fe;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.plan-option__price {
  color: var(--blue-600);
  font-size: 15px;
  font-weight: 900;
}

.plan-option__limits {
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.4;
}

/* Registration layout.
   The intro spans the width, then the plan choice and the account fields sit
   side by side — the two halves of one decision, rather than a form with a
   tall preamble bolted on top of it. */
.register-layout {
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  align-items: start;
  gap: 24px;
}

.register-layout__full {
  grid-column: 1 / -1;
}

.register-layout__plan,
.register-layout__account {
  display: grid;
  gap: 18px;
  align-content: start;
  /* Without this a grid column refuses to shrink below its content, and the
     wider field rows push the whole card sideways. */
  min-width: 0;
}

/* A hairline between the two halves, so they read as one form split in two
   rather than two cards that happen to be adjacent. */
@media (min-width: 901px) {
  .register-layout__plan {
    padding-right: 28px;
    border-right: 1px solid var(--line);
  }
}

@media (max-width: 900px) {
  .register-layout {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* A single outcome, centred and self-contained: payment confirmed, or waiting
   on the provider. Narrow on purpose — a full-width band for one sentence and
   one button reads as a layout accident. */
.outcome-card {
  display: grid;
  justify-items: center;
  gap: 12px;
  max-width: 560px;
  margin: 0 auto;
  padding: 34px 32px;
  text-align: center;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow);
}

.outcome-card__mark {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 999px;
  font-size: 24px;
  font-weight: 900;
  line-height: 1;
}

.outcome-card__mark--good {
  color: #0b7a52;
  background: #e3f8ee;
}

.outcome-card__mark--wait {
  color: #8a6212;
  background: #fdf3dd;
}

.outcome-card h2 {
  margin: 0;
  color: var(--navy-900);
  font-size: 21px;
}

.outcome-card p {
  margin: 0;
  max-width: 44ch;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.55;
}

.outcome-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-top: 8px;
}

/* Sized to its label rather than to the container, so one button does not
   stretch across the whole card. */
.outcome-card__actions .button {
  min-width: 160px;
}


/* Subscribing an organization: the form leads, the plan sits beside it.
   Previously the heading, the plan card and the form were three children of a
   two-column grid, so they landed in whichever cell came next and the page
   read as three unrelated fragments. */
.subscribe-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: 28px;
  align-items: start;
}

.subscribe-aside {
  display: grid;
  gap: 16px;
  align-content: start;
  min-width: 0;
}

.subscribe-aside .chosen-plan {
  margin: 0;
}

@media (max-width: 900px) {
  .subscribe-layout {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* The add-organization form is one short field; it does not need the full
   width of the band. */
.subscribe-form--narrow {
  max-width: 620px;
}

/* Administration index. */
.admin-status {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 22px;
}

.admin-status__pill {
  padding: 6px 12px;
  color: var(--ink);
  background: var(--mist);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
}

.admin-status__pill--warn {
  color: #8a6212;
  background: #fdf3dd;
  border-color: #f0ce8c;
}

.admin-status__pill--live {
  color: #0b7a52;
  background: #e3f8ee;
  border-color: #9fdcc2;
}

.admin-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
  margin: 0 0 26px;
}

.admin-card {
  display: grid;
  align-content: start;
  gap: 4px;
  padding: 22px;
  color: inherit;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 12px;
  text-decoration: none;
  transition: border-color 120ms ease, box-shadow 120ms ease, transform 120ms ease;
}

.admin-card:hover {
  border-color: var(--blue-600);
  box-shadow: var(--shadow);
  transform: translateY(-2px);
}

.admin-card__stat {
  color: var(--navy-900);
  font-size: 30px;
  font-weight: 900;
  line-height: 1.1;
}

.admin-card__statlabel {
  margin-bottom: 8px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.admin-card h2 {
  margin: 0;
  color: var(--navy-900);
  font-size: 17px;
}

.admin-card p {
  margin: 0;
  color: var(--muted);
  font-size: 13.5px;
  line-height: 1.45;
}

/* Something needs a look — a revoked wallet, an account out of recovery codes,
   no delivery channel at all. */
.admin-card--attention {
  border-left: 4px solid var(--amber-400);
}

.admin-card__note {
  margin-top: 6px;
  color: #8a6212;
  font-weight: 800;
}

/* Callouts.
   These had no styles at all — every "Copy this code now", every validation
   message and every test-mode notice was rendering as bare paragraph text,
   which is the one thing a callout must not do. */
.callout {
  display: grid;
  gap: 6px;
  margin: 0 0 22px;
  padding: 16px 18px;
  background: var(--mist);
  border: 1px solid var(--line);
  border-left: 5px solid var(--muted);
  border-radius: 8px;
}

.callout strong {
  color: var(--navy-900);
  font-size: 15px;
}

.callout span,
.callout p {
  margin: 0;
  color: var(--ink);
  font-size: 14px;
  line-height: 1.5;
}

.callout code {
  padding: 1px 5px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 4px;
  font-size: 13px;
  white-space: nowrap;
}

.callout--warning {
  background: #fff8e8;
  border-color: #f0ce8c;
  border-left-color: var(--amber-400);
}

.callout--warning strong {
  color: #684b14;
}

.callout--info {
  background: #eef5ff;
  border-color: #b9d2f5;
  border-left-color: var(--blue-600);
}

.callout--info strong {
  color: #163d73;
}

.callout--success {
  background: #ecfff6;
  border-color: #9fdcc2;
  border-left-color: var(--green-500);
}

.callout--success strong {
  color: #075f3f;
}

/* Used for "No registration codes have been issued." and similar. */
.muted {
  color: var(--muted);
}

/* A field with a help note under it is taller than one without, and a stretched
   grid row pushes the shorter field's control down to match. Align to the top
   so the two controls sit on the same line. */
.subscribe-layout .field-row,
.register-layout .field-row {
  align-items: start;
}

/* Organization identity. */
.identity-layout{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:26px;align-items:start}
.identity-aside{display:grid;gap:14px;align-content:start;min-width:0}
@media (max-width:900px){.identity-layout{grid-template-columns:minmax(0,1fr)}}

.identity-state,
.identity-step{padding:24px;margin:0 0 20px;background:var(--paper);border:1px solid var(--line);border-radius:12px}
.identity-state--verified{background:#f4fdf8;border-color:#9fdcc2}
.identity-state h2{margin:4px 0 10px;font-size:22px;color:var(--navy-900);word-break:break-all}
.identity-step h2{margin:0 0 8px;font-size:18px;color:var(--navy-900)}

.identity-facts{display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px 16px;margin:16px 0 0;font-size:13.5px}
.identity-facts dt{color:var(--muted);font-weight:800}
.identity-facts dd{margin:0;min-width:0;word-break:break-all}

.pill--muted{background:var(--mist);color:var(--muted);border:1px solid var(--line)}
.wrap-anywhere{overflow-wrap:anywhere;word-break:break-all;white-space:normal}

/* Help page. */
.provider-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:18px}
.provider-card{padding:22px;background:var(--paper);border:1px solid var(--line);border-radius:12px}
.provider-card h3{margin:0 0 6px;font-size:17px;color:var(--navy-900)}
.provider-steps{margin:12px 0 0;padding-left:20px;font-size:14px;line-height:1.6}
.provider-steps li{margin-bottom:6px}
.provider-cli{margin:6px 0 0;padding:12px;background:var(--navy-950);color:#dbeafe;border-radius:8px;
  font-size:12.5px;line-height:1.5;overflow-x:auto}
.provider-cli code{white-space:pre}
.help-list{margin:0;padding-left:20px;font-size:14.5px;line-height:1.65}
.help-list li{margin-bottom:10px}

.rootwallet-qr{display:block;width:220px;height:220px;margin:12px 0 0;background:#fff;padding:8px;
  border:1px solid var(--line);border-radius:10px}

/* Louder than a warning: something is one failure away from going wrong. */
.callout--danger {
  background: #fdecea;
  border-color: #f0b3ab;
  border-left-color: #c0392b;
}

.callout--danger strong {
  color: #8c2d22;
}

/* ---------------------------------------------------------------------------
   Organization setup wizard.
   The two steps were a full-bleed hero over a two-column band, so the stepper
   floated a long way from the cards it described and the panels had wildly
   different heights. Constrained, centred, and the two steps now the same
   shape as each other.
   --------------------------------------------------------------------------- */
.onboarding-shell {
  padding-bottom: 18px;
}

.onboarding-shell .section-heading {
  max-width: 720px;
}

.onboarding-shell .section-heading h1 {
  font-size: clamp(28px, 3.4vw, 40px);
  line-height: 1.12;
}

.auth-stepper {
  display: grid;
  grid-template-columns: repeat(var(--step-count, 2), minmax(0, 1fr));
  gap: 10px;
  max-width: 720px;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
}

.auth-stepper__item {
  position: relative;
  padding: 13px 16px 13px 42px;
  color: var(--muted);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 10px;
  font-size: 14px;
  font-weight: 800;
}

/* A numbered disc rather than a coloured bar: it says which step you are on
   without needing the colour to be read. */
.auth-stepper__item::before {
  position: absolute;
  left: 14px;
  top: 50%;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: #e7eef7;
  color: var(--muted);
  content: counter(list-item);
  font-size: 11px;
  font-weight: 900;
  transform: translateY(-50%);
}

.auth-stepper__item--complete {
  color: #0b7a52;
  background: #f2fdf8;
  border-color: #9fdcc2;
}

.auth-stepper__item--complete::before {
  background: #0b7a52;
  color: #fff;
  content: '✓';
}

.auth-stepper__item--current {
  color: var(--navy-900);
  background: var(--soft-blue);
  border-color: var(--blue-600);
  box-shadow: inset 2px 0 0 var(--blue-600);
}

.auth-stepper__item--current::before {
  background: var(--blue-600);
  color: #fff;
}

.issuer-org-layout--onboarding {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 22px;
  align-items: stretch;
}

/* Both steps the same shape, so neither reads as more important than the
   sequence says it is. */
.issuer-org-layout--onboarding > * {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 26px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow);
}

.issuer-org-layout--onboarding .onboarding-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: auto;
  padding-top: 18px;
}

.demo-qr-card--onboarding img,
.demo-qr-card--onboarding canvas {
  display: block;
  width: 100%;
  max-width: 260px;
  height: auto;
  margin: 16px auto 0;
  padding: 10px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
}

.store-badge-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 14px 0 0;
}

/* Capacity and its action, in one bar.
   These were a bare button with a loose sentence floating to its right, which
   read as two unrelated things. Now the count leads, the action sits at the
   end where the eye finishes, and the whole row is one object. */
.capacity-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
  margin: 22px 0 0;
  padding: 16px 20px;
  background: var(--mist);
  border: 1px solid var(--line);
  border-radius: 12px;
}

.capacity-bar--full {
  background: #fff8e8;
  border-color: #f0ce8c;
}

.capacity-bar__text {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.capacity-bar__text strong {
  color: var(--navy-900);
  font-size: 15px;
}

.capacity-bar__text span {
  color: var(--muted);
  font-size: 13.5px;
}

/* Organization tile actions.
   Two rows: the first is what you do with the organization (Open leads,
   the rest quiet), the second what you do to it. Both are grids rather
   than wrapping flex, so every button in a row is the same height and the
   rows line up tile to tile no matter how long a verified domain is. */
.organization-tile__actions,
.organization-tile__manage {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: stretch;
}

.organization-tile__actions {
  margin-top: 12px;
}

/* Every button in the row shares the width; when the tile is too narrow
   for three, they wrap and the wrapped ones still fill their line. */
.organization-tile__actions .button {
  flex: 1 1 auto;
  min-width: 0;
}

.organization-tile__manage {
  justify-content: space-between;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

.organization-tile__actions .button,
.organization-tile__manage .button {
  min-height: 40px;
  padding: 0 14px;
  font-size: 13.5px;
  white-space: nowrap;
}

.organization-tile__manage form {
  margin: 0;
}

/* A verified domain can be long; it truncates inside its button rather
   than pushing the row apart. */
.organization-tile__truncate {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* The one thing to do next. */
.organization-tile__actions > .button--blue:first-child {
  padding: 0 20px;
  font-size: 14px;
}

@media (max-width: 640px) {
  /* Open takes the whole first line; the two quiet actions share the next. */
  .organization-tile__actions > .button--blue:first-child {
    flex-basis: 100%;
    min-height: 44px;
  }

  .organization-tile__manage form {
    flex: 1 1 0;
  }

  .organization-tile__manage .button {
    width: 100%;
  }
}

/* Everything else recedes, and destructive actions further still. */
.organization-tile__actions .button--ghost {
  color: var(--muted);
  background: transparent;
  border-color: var(--line);
}

.organization-tile__actions .button--ghost:hover {
  color: var(--navy-900);
  background: var(--paper);
  border-color: var(--blue-600);
}


/* Bootstrap-5 outline variants.
   The tile actions were five near-identical white buttons, so nothing carried
   meaning. Colour is the meaning now: the primary action stays filled, the
   rest are outlined in their semantic colour, and hover fills them so the
   target is unambiguous. Text colours are the darker Bootstrap variants where
   the base hue is too light to read on white. */
.button--outline-secondary,
.button--outline-info,
.button--outline-success,
.button--outline-warning,
.button--outline-danger {
  background: #fff;
  border-width: 1px;
  border-style: solid;
  transition: color 120ms ease, background-color 120ms ease, border-color 120ms ease;
}

.button--outline-secondary { color: #6c757d; border-color: #6c757d; }
.button--outline-secondary:hover { color: #fff; background: #6c757d; border-color: #6c757d; }

.button--outline-info { color: #087990; border-color: #6edff6; }
.button--outline-info:hover { color: #000; background: #0dcaf0; border-color: #0dcaf0; }

.button--outline-success { color: #198754; border-color: #198754; }
.button--outline-success:hover { color: #fff; background: #198754; border-color: #198754; }

.button--outline-warning { color: #997404; border-color: #ffc107; }
.button--outline-warning:hover { color: #000; background: #ffc107; border-color: #ffc107; }

.button--outline-danger { color: #dc3545; border-color: #dc3545; }
.button--outline-danger:hover { color: #fff; background: #dc3545; border-color: #dc3545; }

/* Keep the focus ring visible on every variant — colour alone must not be the
   only thing distinguishing them. */
.button--outline-secondary:focus-visible,
.button--outline-info:focus-visible,
.button--outline-success:focus-visible,
.button--outline-warning:focus-visible,
.button--outline-danger:focus-visible {
  outline: 2px solid var(--navy-900);
  outline-offset: 2px;
}

/* The earlier rule greyed every ghost in a tile; these variants own their
   colour, so scope that back to actual ghosts. */
.organization-tile__actions .button--outline-info,
.organization-tile__actions .button--outline-success,
.organization-tile__actions .button--outline-warning,
.organization-tile__actions .button--outline-danger,
.organization-tile__actions .button--outline-secondary {
  background: #fff;
}

/* The capacity bar now leads the section rather than trailing it. */
.capacity-bar {
  margin: 0 0 22px;
}

/* The workspace shell collapses to one column as soon as the icon rail is
   hidden.
   
   It already tried to, at max-width: 980px, but two later rules re-declare
   .workspace-blade with the three-column desktop template — so between 781px
   and 980px the rail and nav were moved into column 1 while the grid still
   reserved three tracks. Column 1 is 60px, which is where the content ended up:
   a dashboard heading rendered one word per line with two empty columns beside
   it. Below 781px a separate block happened to fix it, which is why this only
   showed on tablets, split-screen windows, and phones asking for the desktop
   site.
   
   Kept at the end of the file deliberately. The collapse has to outrank every
   earlier .workspace-blade declaration, and source order is what decides that
   between rules of equal specificity. */
@media (max-width: 980px) {
  .workspace-blade {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto minmax(0, 1fr);
  }

  .workspace-blade__rail {
    display: none;
  }

  /* Both carry an explicit grid-area at every width, so neither lands in the
     single column without being told to. */
  .workspace-blade__nav,
  .workspace-blade__content {
    grid-column: 1;
    grid-row: auto;
    max-height: none;
    position: static;
  }

  .workspace-blade__content {
    min-width: 0;
  }
}

/* Wallet sign-in for connected applications. */
.wallet-signin__qr {
  display: grid;
  place-items: center;
  padding: 14px;
  margin: 6px 0 12px;
  background: #fff;
  border: 1px solid var(--line, #d8e2ec);
  border-radius: 10px;
}

.wallet-signin__qr img {
  display: block;
  width: 240px;
  height: 240px;
  max-width: 100%;
}

/* The deep link is shown so it can be read or copied on a second device, so it
   has to wrap rather than run off the panel. */
.wallet-signin__link {
  word-break: break-all;
  font-family: "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 12px;
}

/* Bulk credential import: the modal's validation report and the progress
   panel that stays on the people directory while a job runs. */
.people-directory__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
}

.import-progress {
  display: grid;
  gap: 8px;
  padding: 12px 14px;
  background: #f6fbff;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.import-progress__head {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: baseline;
  font-size: 14px;
}

.import-progress__head span {
  color: var(--muted);
}

.import-progress__head .link-button {
  margin-left: auto;
}

.import-progress--done .progress-bar span {
  background: var(--green-500);
}

.import-progress--failed .progress-bar span,
.import-progress--interrupted .progress-bar span {
  background: #c0392b;
}

.import-progress__failures {
  margin: 0;
  padding-left: 18px;
  font-size: 13px;
  color: #8a2a1f;
}

.link-button {
  padding: 0;
  font: inherit;
  font-size: 13px;
  color: var(--blue-600);
  background: none;
  border: 0;
  cursor: pointer;
  text-decoration: underline;
}

.note-panel--error {
  color: #6e1f14;
  background: #fff4f2;
  border-color: #f0c2b8;
}

.note-panel--success {
  color: #145c3a;
  background: #f1fbf5;
  border-color: #bfe6cf;
}

.note-panel--error .people-table {
  min-width: 0;
}

.note-panel--error .people-table-wrap {
  max-height: 260px;
  background: #ffffff;
}

.import-progress[hidden],
.import-progress__failures[hidden],
[data-import-result][hidden],
[data-import-errors][hidden],
[data-import-ready][hidden] {
  display: none;
}

/* A site with a name but no logo — an organization that has not uploaded
   one yet — shows its name where the lockup would be. */
.brand-wordmark {
  font-size: 18px;
  font-weight: 800;
  color: #ffffff;
  white-space: nowrap;
}

.footer-wordmark {
  display: block;
  font-size: 16px;
}

.footer-powered-by {
  color: var(--muted);
}