﻿/* Connection chapter: clear reading surfaces, blue iconography and one yellow highlight. */
.introduction{position:relative;isolation:isolate;background:linear-gradient(115deg,#fff 0%,#f4f8ff 58%,#eef6ff 100%);padding-block:clamp(88px,8vw,125px);overflow:hidden}
.introduction .connection-layout{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.65fr);gap:44px;align-items:center}
.connection-copy{min-width:0}
.connection-label{display:inline-flex;align-items:center;gap:9px;padding:9px 15px;border:1px solid #b6d5ff;background:#e5f1ff;border-radius:99px;font-size:14px;font-weight:600;color:#0642a1;margin-bottom:25px;line-height:1.4}
.connection-label svg{width:23px;height:24px;stroke:#0962e7;fill:none;stroke-width:2;stroke-linejoin:round;stroke-linecap:round;flex-shrink:0}
.connection-copy h2{font-size:clamp(30px,2.6vw,40px);line-height:1.23;letter-spacing:-.045em;color:#071e45;text-wrap:pretty;margin:0 0 26px;max-width:500px}
.connection-copy h2>span{display:inline-block;background:#ffce16;color:#071e35;padding:0 11px 4px;border-radius:13px;white-space:nowrap}
.connection-description{font-size:17px;line-height:1.75;color:#263d59;max-width:49ch}
.connection-note{font-size:13px;line-height:1.7;color:#52657a;margin-top:20px;max-width:55ch}
.connection-benefits{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;align-items:stretch;min-width:0}
.connection-card{position:relative;display:flex;flex-direction:column;align-items:center;min-width:0;text-align:center;padding:31px 17px 29px;border:1px solid #d5e5fc;border-radius:23px;background:linear-gradient(160deg,#ffffffd9,#edf5ff);box-shadow:0 12px 30px #1b5bc008;transition:transform .25s,border-color .25s}
.connection-card:hover{transform:translateY(-4px);border-color:#8abafa}
.connection-icon{display:grid;place-items:center;width:61px;height:64px;border-radius:17px;background:linear-gradient(150deg,#edf7ff,#d4eaff);margin-bottom:22px;flex-shrink:0}
.connection-icon svg{width:41px;height:44px;stroke:#075bd9;stroke-width:2.5;fill:none;stroke-linecap:round;stroke-linejoin:round}
.connection-card:last-child .connection-icon svg{fill:#0b9fe9;stroke:#0b9fe9;stroke-width:1}
.connection-card h3{font-size:20px;line-height:1.3;letter-spacing:-.03em;color:#0b2145;margin:0 0 23px;font-weight:600}
.connection-card p{font-size:15px;line-height:1.65;color:#344b68;margin:0;max-width:22ch}
@media(min-width:1600px){.introduction .connection-layout{gap:50px}.connection-card{padding-block:35px}.connection-copy h2{font-size:39px}}
@media(max-width:1100px){.introduction .connection-layout{grid-template-columns:minmax(0,.9fr) minmax(0,1.3fr);gap:32px}.connection-benefits{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.connection-card{padding:26px 20px;min-height:260px}.connection-icon{width:57px;height:59px;margin-bottom:18px}.connection-icon svg{width:38px;height:40px}.connection-card h3{font-size:21px;margin-bottom:16px}.connection-card p{font-size:15px;max-width:24ch}.connection-copy h2{font-size:36px}}
@media(max-width:800px){.introduction{padding-block:86px}.introduction .connection-layout{grid-template-columns:minmax(0,1fr);gap:38px}.connection-copy h2{font-size:38px;max-width:630px}.connection-description{max-width:64ch}.connection-note{max-width:70ch}.connection-benefits{grid-template-columns:repeat(4,minmax(0,1fr));gap:13px}.connection-card{padding:25px 13px;min-height:300px}.connection-card h3{font-size:18px}.connection-card p{font-size:14px}.connection-icon{width:54px;height:57px}.connection-label{margin-bottom:23px}}
@media(max-width:580px){.introduction{padding-block:76px}.introduction .connection-layout{gap:32px}.connection-label{font-size:13px;padding:8px 13px;margin-bottom:23px}.connection-label svg{width:22px;height:23px}.connection-copy h2{font-size:32px;line-height:1.25;letter-spacing:-.04em;margin-bottom:24px}.connection-copy h2>span{padding:0 9px 3px;border-radius:10px}.connection-description{font-size:16px;line-height:1.75}.connection-note{font-size:13px;line-height:1.7;margin-top:19px}.connection-benefits{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.connection-card{padding:25px 15px;min-height:275px;border-radius:18px}.connection-icon{width:55px;height:58px;margin-bottom:18px}.connection-icon svg{width:37px;height:40px}.connection-card h3{font-size:18px;line-height:1.35;margin-bottom:16px}.connection-card p{font-size:14px;line-height:1.65}.connection-card:hover{transform:none}}
@media(max-width:360px){.connection-copy h2{font-size:29px}.connection-benefits{gap:11px}.connection-card{padding:23px 11px;min-height:285px}.connection-card h3{font-size:17px}.connection-card p{font-size:13px}}
@media(prefers-reduced-motion:reduce){.connection-card{transition:none}.connection-card:hover{transform:none}}
