/* Connections page */
.connections { padding-bottom: 40px; }
.connections h1 { font-size: clamp(34px, 6vw, 52px); overflow-wrap: anywhere; }
.eyebrow { color: var(--blue); font-size: 14px; font-weight: bold; margin-bottom: 12px; }
.connection { padding: 38px 0; border-bottom: 1px solid #d5ddd7; }
.connection h2 { font-size: 30px; }
.explanation p { margin: 20px 0; }
.concept { background: #fff7c8; padding: 24px; margin-bottom: 26px; }
#economics .concept { background: #eff6ff; }
#politics .concept { background: #edf5ef; }
.flow { list-style: none; padding: 0; margin: 0; display: flex; align-items: stretch; gap: 30px; }
.flow li { flex: 1; position: relative; border: 1px solid #6c7d72; background: white; padding: 15px 10px; text-align: center; font-size: 16px; font-weight: bold; line-height: 1.4; display: grid; place-items: center; }
.flow li:not(:last-child)::after { content: '→'; position: absolute; right: -25px; font-size: 23px; font-weight: normal; }
.concept figcaption { margin-top: 16px; font-size: 13px; line-height: 1.5; }
.connection-source { font-size: 14px; margin-top: 20px; }
.connection-source a { color: var(--blue); }
@media (max-width: 500px) {
  .flow { flex-direction: column; gap: 28px; }
  .flow li { min-height: 55px; }
  .flow li:not(:last-child)::after { content: '↓'; right: auto; bottom: -29px; }
  .connection h2 { font-size: 27px; }
}

/* Internet comparison */
.tradeoff { width: 100%; border-collapse: collapse; font-size: 16px; line-height: 1.5; table-layout: fixed; }
.tradeoff caption { text-align: left; font-weight: bold; margin-bottom: 14px; }
.tradeoff th { text-align: left; background: #174cca; color: white; padding: 12px; }
.tradeoff td { vertical-align: top; background: white; padding: 14px 12px; border-bottom: 1px solid #c9d5e6; }
.tradeoff th + th, .tradeoff td + td { border-left: 2px solid #eff6ff; }
/* Shared responsibility map */
.map-center { border: 2px solid var(--green); border-radius: 50%; width: 220px; min-height: 95px; margin: 0 auto 30px; display: grid; place-items: center; background: white; font-size: 18px; font-weight: bold; position: relative; }
.map-center::after { content: ''; height: 16px; width: 2px; background: #6c7d72; position: absolute; bottom: -18px; }
.map-roles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; list-style: none; padding: 0; margin: 0; position: relative; }
.map-roles::before { content: ''; position: absolute; top: -15px; left: 16.5%; right: 16.5%; height: 1px; background: #6c7d72; }
.map-roles li { position: relative; text-align: center; padding: 14px 5px; background: white; border: 1px solid #6c7d72; font-size: 14px; line-height: 1.5; }
.map-roles li::before { content: ''; height: 15px; width: 1px; background: #6c7d72; position: absolute; top: -16px; left: 50%; }
.map-roles strong, .map-roles span { display: block; }
.map-roles span { margin-top: 5px; }
@media (max-width: 500px) {
  .concept { padding: 18px 12px; }
  .tradeoff { font-size: 14px; }
  .tradeoff th, .tradeoff td { padding: 10px 8px; }
  .map-roles { gap: 5px; }
  .map-roles li { font-size: 12px; padding: 12px 3px; overflow-wrap: anywhere; }
  .map-center { width: 190px; }
}

/* Give the responsibility labels room on small phones */
@media (max-width: 400px) {
  .map-roles { display: flex; flex-direction: column; gap: 12px; padding-left: 20px; }
  .map-roles::before { top: 0; bottom: 27px; left: 0; right: auto; width: 1px; height: auto; }
  .map-roles li { font-size: 14px; padding: 10px; }
  .map-roles li::before { top: 50%; left: -21px; width: 20px; height: 1px; }
  .map-center { margin-left: 0; margin-bottom: 20px; border-radius: 12px; width: 100%; min-height: 65px; }
  .map-center::after { left: -2px; height: 22px; bottom: -24px; width: 1px; }
}