/* Benefits lead; the glass diagrams support them. Load after the card artwork. */
:is(#your-system, #transformation, #security) {
  --benefit-ink: #32131c;
  --benefit-copy: #645d58;
  --benefit-before: #9b4248;
}

:is(#your-system, #transformation, #security) :is(.agreement-grid, .outcome-grid) {
  gap: 16px;
  align-items: stretch;
}

:is(#your-system, #transformation, #security) :is(.agreement-card, .outcome-card) {
  min-width: 0;
  height: auto;
  min-height: 0;
}

:is(#your-system, #transformation, #security) :is(.benefit-card-copy, .outcome-result) h3 {
  margin: 0 0 12px;
  min-height: 0;
  color: var(--benefit-ink);
  font: 400 var(--type-card,24px)/var(--line-card,28px) var(--serif);
  letter-spacing: -.025em;
  text-wrap: balance;
}

:is(#your-system, #transformation, #security) :is(.benefit-card-copy, .outcome-result) > p {
  margin: 0;
  color: var(--benefit-copy);
  font: 400 var(--type-body,16px)/var(--line-body,24px) var(--sans);
  letter-spacing: 0;
}

/* The positive outcome is the first thing read on every results card. */
#transformation .outcome-card {
  display: flex;
  flex-direction: column;
}

#transformation .outcome-card-copy {
  order: 0;
  display: flex;
  flex: 1 0 auto;
  flex-direction: column;
  margin: 0;
  padding: 24px 24px 16px;
}

#transformation .outcome-result {
  order: 0;
  border: 0;
  padding: 0;
}

#transformation .outcome-result h3 {
  margin-bottom: 0;
  max-width: 30ch;
  font-size: 24px;
}

#transformation .outcome-before {
  order: 1;
  margin: 16px 0 0;
  min-height: 0;
  color: var(--benefit-before);
  font: 400 14px/1.45 var(--sans);
  letter-spacing: 0;
}

#transformation .outcome-before > span {
  display: inline-block;
  margin-right: 4px;
  color: inherit;
  font: 600 14px/1.45 var(--sans);
  letter-spacing: 0;
  text-transform: lowercase;
}

#transformation .outcome-before > span::first-letter {
  text-transform: uppercase;
}

#transformation .outcome-before > span::after { content: ":"; }

#transformation .outcome-card > .outcome-art {
  order: 1;
  flex: 0 0 244px;
  height: 244px;
  min-height: 244px;
  margin: 0;
}

#transformation .oa-stage { padding: 12px 28px 18px; }
#transformation .oa-flow { height: 24px; flex-basis: 24px; }
#transformation .oa-evidence-sheet header { padding-block: 8px; }
#transformation .oa-evidence-line { padding-block: 6px; }
#transformation .oa-consistency-question { margin-bottom: 12px; padding-block: 7px; }
#transformation .oa-consistency-grid > div { padding-block: 10px; }
#transformation :is(.oa-drifting, .oa-consistent) > div { min-height: 35px; }

/* Keep the three control promises prominent and their drawings subordinate. */
#your-system .agreement-illustrated {
  display: flex;
  flex-direction: column;
}

#your-system .agreement-illustrated .benefit-card-copy {
  order: 0;
  flex: 1 0 auto;
  margin: 0;
  padding: 24px 24px 12px;
}

#your-system .agreement-illustrated .benefit-art {
  order: 1;
  flex: 0 0 200px;
  height: 200px;
  min-height: 200px;
  margin: 0;
}

/* Shared rows keep icon, title and paragraph starts aligned across a set. */
:is(#your-system, #security) .agreement-grid { grid-auto-rows:auto; }
:is(#your-system, #security) .agreement-card { grid-row:span 3; }
:is(#your-system, #security) .agreement-compact {
 display:grid;
 grid-template-columns:minmax(0,1fr);
 grid-template-rows:subgrid;
 align-content:start;
 align-items:start;
 row-gap:16px;
 padding:24px;
 min-height:0;
}
:is(#your-system, #security) .agreement-compact>.benefit-icon {
 width:24px;height:24px;margin:0;padding:0;
 color:var(--benefit-ink);stroke:currentColor;stroke-width:1.25;
 border:0;border-radius:0;background:none;display:block;
}
:is(#your-system, #security) .agreement-compact .benefit-card-copy {display:contents;}
:is(#your-system, #security) .agreement-compact h3 {
 min-height:0;margin:0;font-size:24px;line-height:28px;text-wrap:pretty;
}
@media (min-width:641px) and (max-width:1050px) {
 #security .security-grid {grid-template-columns:repeat(2,minmax(0,1fr));}
}

@media (max-width: 640px) {
  /* Width and scroll snapping remain with the existing mobile carousel. */
  :is(#your-system, #transformation, #security) .mobile-card-track { gap: 12px; }
  :is(#your-system, #transformation, #security) :is(.benefit-card-copy, .outcome-result) h3 {
    font-size: 24px;
    line-height: 28px;
  }
  :is(#your-system, #transformation, #security) :is(.benefit-card-copy, .outcome-result) > p {
    font-size: 16px;
    line-height: 24px;
  }
  #transformation .outcome-card-copy { padding: 24px 24px 12px; }
  #transformation .outcome-before { margin-top: 16px; font-size: 14px; }
  #transformation .outcome-before > span { font-size: inherit; }
  #transformation .outcome-card > .outcome-art {
    height: 244px;
    min-height: 244px;
    flex-basis: 244px;
  }
  #transformation .oa-stage { padding: 12px 16px 18px; }
  #your-system .agreement-illustrated .benefit-card-copy { padding: 24px 24px 12px; }
  #your-system .agreement-illustrated .benefit-art {
    height: 174px;
    min-height: 174px;
    flex-basis: 174px;
  }
  :is(#your-system, #security) .agreement-compact {
    grid-template-columns:minmax(0,1fr);
    grid-template-rows:24px auto 1fr;
    row-gap:16px;padding:24px;align-self:start;
    min-height:240px;
  }
  :is(#your-system, #security) .agreement-compact h3 {font-size:24px;line-height:28px;}
  #security .security-card.agreement-compact {min-height:240px;align-self:stretch;}

}

@media (max-width: 380px) {
  #transformation .oa-stage { padding-inline: 9px; }
  #transformation .oa-context-sources { gap: 3px; }
  #transformation .oa-context-sources > div { padding-inline: 4px; }
}