/*
 * ISO 15189 · Unified diagram system
 * Apple restraint meets McKinsey information discipline:
 * one typographic ladder, one left-hand grid and one numbering language.
 */

.iso-signature {
  --diagram-section-size: clamp(42px, 4.45vw, 62px);
  --diagram-core-size: clamp(27px, 2.2vw, 31px);
  --diagram-panel-size: clamp(17px, 1.45vw, 20px);
  --diagram-item-size: 13px;
  --diagram-body-size: 13px;
  --diagram-meta-size: 9px;
  --diagram-section-leading: 1.08;
  --diagram-core-leading: 1.24;
  --diagram-tight: -.052em;
  --diagram-item-tight: -.018em;
  --diagram-space-section: clamp(54px, 5vw, 72px);
}

/* Shared chapter header: same grid, scale and numbering across all three diagrams. */
.iso-signature .iso-diagram-head,
.iso-signature .iso-stage-performance-web .iso-diagram-head {
  width: min(100%, 780px);
  max-width: 780px;
  margin: 0 0 var(--diagram-space-section);
  text-align: left;
}

.iso-signature .iso-diagram-head p,
.iso-signature .iso-stage-performance-web .iso-diagram-head p {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 19px;
  color: var(--diagram-accent, #147a5b);
  font-size: var(--diagram-meta-size);
  font-weight: 700;
  line-height: 1;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}

.iso-signature .iso-diagram-head p::before,
.iso-signature .iso-stage-performance-web .iso-diagram-head p::before {
  content: "";
  display: block;
  width: 28px;
  height: 1px;
  flex: 0 0 28px;
  background: color-mix(in srgb, var(--diagram-accent, #147a5b) 36%, transparent);
}

.iso-signature .iso-diagram-head p::after,
.iso-signature .iso-stage-performance-web .iso-diagram-head p::after {
  display: none;
  content: none;
}

.iso-signature .iso-diagram-head p b,
.iso-signature .iso-stage-performance-web .iso-diagram-head p b {
  display: grid;
  width: 25px;
  height: 25px;
  flex: 0 0 25px;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--diagram-accent, #147a5b) 23%, transparent);
  border-radius: 50%;
  background: color-mix(in srgb, var(--diagram-accent, #147a5b) 5%, transparent);
  color: inherit;
  font-size: 9px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
}

.iso-signature .iso-module .iso-diagram-head h2,
.iso-signature .iso-stage-performance-web .iso-diagram-head h2 {
  max-width: 780px;
  margin: 0;
  color: var(--diagram-ink, #10271f);
  font-size: var(--diagram-section-size);
  font-weight: 600;
  line-height: var(--diagram-section-leading);
  letter-spacing: var(--diagram-tight);
  text-align: left;
  text-wrap: balance;
  text-shadow: none;
}

.iso-signature .iso-diagram-head > span,
.iso-signature .iso-stage-performance-web .iso-diagram-head > span {
  display: block;
  max-width: 680px;
  margin-top: 21px;
  color: var(--diagram-copy, #5d6c65);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.82;
  letter-spacing: -.008em;
}

.iso-signature .iso-stage-quality-web {
  --diagram-accent: var(--quality-green);
  --diagram-ink: var(--quality-ink);
  --diagram-copy: var(--quality-copy);
}

.iso-signature .iso-stage-performance-web {
  --diagram-accent: var(--performance-blue);
  --diagram-ink: var(--performance-ink);
  --diagram-copy: var(--performance-copy);
}

.iso-signature .iso-stage-system-web {
  --diagram-accent: #16845d;
  --diagram-ink: #123529;
  --diagram-copy: #64756d;
  padding: clamp(112px, 9vw, 156px) 0;
}

.iso-signature .iso-system-web {
  padding: clamp(38px, 4.5vw, 64px);
}

/* The three central ideas deliberately share one voice and one visual weight. */
.iso-signature .iso-quality-cycle-core b,
.iso-signature .iso-performance-core strong,
.iso-signature .iso-system-core h3 {
  margin: 0;
  color: #fff;
  font-size: var(--diagram-core-size);
  font-weight: 600;
  line-height: var(--diagram-core-leading);
  letter-spacing: -.047em;
  text-align: center;
  text-wrap: balance;
}

.iso-signature .iso-quality-cycle-core small,
.iso-signature .iso-performance-core em,
.iso-signature .iso-system-core > p {
  margin: 0 0 9px;
  color: rgba(255, 255, 255, .67);
  font-size: 8px;
  font-style: normal;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .17em;
  text-transform: uppercase;
}

.iso-signature .iso-quality-cycle-core small {
  color: rgba(159, 226, 202, .62);
}

.iso-signature .iso-system-core > p {
  color: rgba(255, 255, 255, .74);
}

.iso-signature .iso-performance-core span,
.iso-signature .iso-system-core > span {
  margin-top: 9px;
  color: rgba(255, 255, 255, .72);
  font-size: 10px;
  font-weight: 400;
  line-height: 1.65;
  letter-spacing: 0;
}

.iso-signature .iso-performance-core {
  width: min(100%, 320px);
  max-width: 320px;
  margin-right: auto;
  margin-left: auto;
}

.iso-signature .iso-system-core {
  width: min(100%, 320px);
}

.iso-signature .iso-system-core::after {
  inset: 12%;
}

/* Panel hierarchy: title, item title and explanatory copy use fixed shared rungs. */
.iso-signature .iso-quality-table h3,
.iso-signature .iso-performance-matrix h3 {
  font-size: var(--diagram-panel-size);
  font-weight: 620;
  line-height: 1.32;
  letter-spacing: -.035em;
}

.iso-signature .iso-quality-cycle-card-head strong,
.iso-signature .iso-quality-execution-copy > strong,
.iso-signature .iso-performance-value strong {
  font-size: 17px;
  font-weight: 620;
  line-height: 1.35;
  letter-spacing: -.03em;
}

.iso-signature .iso-quality-cycle-stage strong,
.iso-signature .iso-quality-table li strong,
.iso-signature .iso-quality-execution li,
.iso-signature .iso-performance-input li > span,
.iso-signature .iso-performance-matrix li b,
.iso-signature .iso-system-card h3,
.iso-signature .iso-system-chain b {
  font-size: var(--diagram-item-size);
  font-weight: 620;
  line-height: 1.42;
  letter-spacing: var(--diagram-item-tight);
}

.iso-signature .iso-quality-cycle-stage small,
.iso-signature .iso-quality-table li > span,
.iso-signature .iso-quality-execution small,
.iso-signature .iso-performance-input small,
.iso-signature .iso-performance-matrix li span,
.iso-signature .iso-performance-value span,
.iso-signature .iso-system-card p,
.iso-signature .iso-system-chain span {
  font-size: var(--diagram-body-size);
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: -.006em;
}

.iso-signature .iso-quality-cycle-stage em,
.iso-signature .iso-quality-table > header p,
.iso-signature .iso-quality-table li b,
.iso-signature .iso-quality-execution-copy > span,
.iso-signature .iso-quality-execution li b,
.iso-signature .iso-performance-input > p,
.iso-signature .iso-performance-input b,
.iso-signature .iso-system-card em {
  font-size: var(--diagram-meta-size);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .12em;
  font-variant-numeric: tabular-nums;
}

/* McKinsey-like row discipline: shared rhythm and less decorative noise. */
.iso-signature .iso-quality-table li {
  min-height: 52px;
}

.iso-signature .iso-performance-input li {
  min-height: 62px;
}

.iso-signature .iso-performance-matrix li {
  min-height: 46px;
}

.iso-signature .iso-system-card {
  min-height: 126px;
}

.iso-signature .iso-system-card h3 {
  margin: 3px 0 7px;
  color: #173d31;
}

.iso-signature .iso-system-card p {
  color: #6d7e76;
}

.iso-signature .iso-system-chain b {
  color: #244f3f;
}

.iso-signature .iso-quality-table > header,
.iso-signature .iso-performance-matrix section > header {
  min-height: 48px;
  margin-bottom: 12px;
}

@media (max-width: 1080px) {
  .iso-signature {
    --diagram-section-size: clamp(40px, 6vw, 56px);
    --diagram-space-section: 54px;
  }

  .iso-signature .iso-system-grid {
    row-gap: 18px;
  }
}

@media (max-width: 760px) {
  .iso-signature {
    --diagram-section-size: clamp(35px, 9.5vw, 44px);
    --diagram-core-size: clamp(25px, 7vw, 29px);
    --diagram-panel-size: 18px;
    --diagram-item-size: 13px;
    --diagram-body-size: 13px;
    --diagram-space-section: 40px;
  }

  .iso-signature .iso-stage-system-web {
    padding: 88px 0;
  }

  .iso-signature .iso-system-web {
    padding: 30px 20px;
  }

  .iso-signature .iso-diagram-head,
  .iso-signature .iso-stage-performance-web .iso-diagram-head {
    margin-bottom: var(--diagram-space-section);
  }

  .iso-signature .iso-diagram-head p,
  .iso-signature .iso-stage-performance-web .iso-diagram-head p {
    margin-bottom: 17px;
  }

  .iso-signature .iso-module .iso-diagram-head h2,
  .iso-signature .iso-stage-performance-web .iso-diagram-head h2 {
    font-size: var(--diagram-section-size);
    line-height: 1.1;
  }

  .iso-signature .iso-diagram-head > span,
  .iso-signature .iso-stage-performance-web .iso-diagram-head > span {
    margin-top: 17px;
    font-size: 13px;
    line-height: 1.75;
  }

  .iso-signature .iso-performance-core,
  .iso-signature .iso-system-core {
    width: min(82vw, 310px);
    max-width: 310px;
  }

  .iso-signature .iso-system-grid {
    gap: 14px;
  }
}

@media (max-width: 480px) {
  .iso-signature {
    --diagram-section-size: clamp(33px, 9.2vw, 39px);
    --diagram-body-size: 13px;
  }

  .iso-signature .iso-stage-system-web {
    padding: 84px 0;
  }

  .iso-signature .iso-system-web {
    padding-right: 16px;
    padding-left: 16px;
  }

  .iso-signature .iso-diagram-head p,
  .iso-signature .iso-stage-performance-web .iso-diagram-head p {
    gap: 8px;
    letter-spacing: .14em;
  }

  .iso-signature .iso-diagram-head p::before,
  .iso-signature .iso-stage-performance-web .iso-diagram-head p::before {
    width: 20px;
    flex-basis: 20px;
  }

  .iso-signature .iso-system-card {
    min-height: auto;
  }
}