@import url("/assets/css/pages/synergy-legibility.css?v=20260916-1");

/* Cognitive-agency section only. Larger, shorter editorial copy sits around
   the unchanged cards; shared homepage styles and release states are untouched. */
.synergy-home-v1 .sy-agency { background: #f7f9ff; }
/* Keep long words within the panel when visitors enlarge text. */
.synergy-home-v1 #cognitive-agency { overflow-wrap: anywhere; }
.synergy-home-v1 #cognitive-agency .sy-agency-heading > div { min-width: 0; }
.synergy-home-v1 #cognitive-agency .sy-agency-panel {
  padding: clamp(1.5rem, 4vw, 3.25rem);
  border: 1px solid #344c79;
  border-radius: 24px;
  background: linear-gradient(125deg, #172d53, #111b38 78%);
  color: #f7f9ff;
  box-shadow: 0 12px 36px #182b4d12;
}
.synergy-home-v1 #cognitive-agency .sy-agency-heading {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
  gap: clamp(1.5rem, 4vw, 3.25rem);
}
.synergy-home-v1 #cognitive-agency .sy-kicker { color: #c9daf1; }
.synergy-home-v1 #cognitive-agency h2 { color: #ffffff; }
.synergy-home-v1 #cognitive-agency h2 span { color: #ccff66; }
.synergy-home-v1 #cognitive-agency p { max-width: 65ch; }
.synergy-home-v1 #cognitive-agency .sy-agency-intro p {
  max-width: 42ch;
  color: #d1dff0;
  font-size: clamp(1.125rem, 1rem + .3vw, 1.25rem);
  line-height: 1.65;
}
.synergy-home-v1 #cognitive-agency .sy-agency-intro .sy-agency-intro-title {
  font-size: clamp(1.25rem, 1.05rem + .5vw, 1.5rem);
  line-height: 1.4;
}
.synergy-home-v1 #cognitive-agency .sy-agency-intro p + p { margin-top: 1.25rem; }
.synergy-home-v1 #cognitive-agency .sy-agency-intro strong { color: #ffffff; }
.synergy-home-v1 #cognitive-agency .sy-agency-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
  margin-top: 2.5rem;
}
.synergy-home-v1 #cognitive-agency .sy-agency-card {
  min-width: 0;
  padding: clamp(1.2rem, 2.5vw, 1.75rem);
  border: 1px solid #48618b;
  border-top: 3px solid #22aaff;
  border-radius: 14px;
  background: #1b3053;
  transition: transform 170ms ease, border-color 170ms ease;
}
.synergy-home-v1 #cognitive-agency .sy-agency-card--capture { border-top-color: #b4a2ff; }
.synergy-home-v1 #cognitive-agency .sy-agency-label {
  margin-bottom: .8rem;
  font-size: .875rem;
  line-height: 1.6;
  letter-spacing: .07em;
  text-transform: uppercase;
  font-weight: 700;
  color: #96dfff;
}
.synergy-home-v1 #cognitive-agency .sy-agency-card--capture .sy-agency-label { color: #d2c6ff; }
.synergy-home-v1 #cognitive-agency h3 { color: #ffffff; font-size: 1.375rem; }
.synergy-home-v1 #cognitive-agency .sy-agency-card p:not(.sy-agency-label) {
  margin-top: 1rem;
  color: #d1dff0;
  font-size: 1rem;
  line-height: 1.65;
}
.synergy-home-v1 #cognitive-agency .sy-agency-connection {
  display: grid;
  gap: 1.1rem;
  border-top: 1px solid #48618b;
  margin-top: 2.5rem;
  padding-top: 2rem;
}
.synergy-home-v1 #cognitive-agency .sy-agency-connection-title {
  max-width: 42ch;
  font-size: clamp(1.25rem, 1.05rem + .5vw, 1.5rem);
  line-height: 1.4;
}
.synergy-home-v1 #cognitive-agency .sy-agency-connection > p {
  max-width: 60ch;
  margin: 0;
  color: #d1dff0;
  font-size: clamp(1.125rem, 1rem + .3vw, 1.25rem);
  line-height: 1.65;
}
.synergy-home-v1 #cognitive-agency .sy-agency-connection strong { color: #ffffff; }
.synergy-home-v1 #cognitive-agency .sy-agency-connection .sy-agency-principle {
  max-width: 42ch;
  color: #ccff66;
  font: 700 clamp(1.375rem, 1.1rem + .55vw, 1.625rem)/1.4 var(--sy-display);
  margin-top: .5rem;
}
.synergy-home-v1 #cognitive-agency .sy-agency-connection .sy-agency-boundary {
  max-width: 74ch;
  color: #b8cbe2;
  font-size: 1rem;
  line-height: 1.65;
}
.synergy-home-v1 #cognitive-agency .sy-agency-evidence { margin-top: 1.5rem; }
.synergy-home-v1 #cognitive-agency summary {
  width: fit-content;
  max-width: 100%;
  padding: .6rem 0;
  min-height: 44px;
  color: #d8e7f9;
  cursor: pointer;
  font-size: .95rem;
  font-weight: 650;
}
.synergy-home-v1 #cognitive-agency .sy-agency-evidence div { margin-top: .5rem; }
.synergy-home-v1 #cognitive-agency .sy-agency-evidence p {
  color: #c3d4e8;
  font-size: .95rem;
  line-height: 1.65;
  max-width: 90ch;
}
.synergy-home-v1 #cognitive-agency a { color: #abdeff; }
.synergy-home-v1 #cognitive-agency :where(a,summary):focus-visible {
  outline: 3px solid #ccff66;
  outline-offset: 5px;
}
@media (max-width: 760px) {
  .synergy-home-v1 #cognitive-agency .sy-agency-heading,
  .synergy-home-v1 #cognitive-agency .sy-agency-grid { grid-template-columns: 1fr; }
  .synergy-home-v1 #cognitive-agency .sy-agency-panel { border-radius: 18px; }
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .synergy-home-v1[data-motion="on"] #cognitive-agency .sy-agency-card:hover {
    transform: translateY(-3px);
    border-color: #91afd6;
  }
}
@media (prefers-reduced-motion: reduce) {
  .synergy-home-v1 #cognitive-agency .sy-agency-card { transition: none; transform: none; }
}
.synergy-home-v1[data-motion="off"] #cognitive-agency .sy-agency-card { transition: none; transform: none; }
@media (forced-colors: active) {
  .synergy-home-v1 #cognitive-agency .sy-agency-panel,
  .synergy-home-v1 #cognitive-agency .sy-agency-card { border-color: CanvasText; background: Canvas; }
  .synergy-home-v1 #cognitive-agency :where(h2,h3,p,strong,summary),
  .synergy-home-v1 #cognitive-agency h2 span { color: CanvasText !important; }
  .synergy-home-v1 #cognitive-agency a { color: LinkText; }
}