/* ========================================================= Licensed Connection Section — layout only (typography comes from base.css / common.css) ========================================================= */
.connection-section{background-color:var(--color-white);}
/* Figma butts this panel straight up under the licensing block — it reads as a footnote to it,so the pair share one run of vertical space and only the bottom edge carries the section rhythm. */
.connection-section .connection-section-wrapper{padding-bottom:var(--section-padding);}
.connection-section .connection-section-wrapper .connection-section-panel{gap:40px;padding:32px 36px;background-color:var(--color-ink-25);border-radius:var(--radius-lg);box-shadow:inset 0 0 0 1px var(--color-border);/* Figma draws the stroke inside the panel */
}
.connection-section .connection-section-wrapper .connection-section-panel .connection-section-col{flex:1 1 0;min-width:0;}
.connection-section .connection-section-wrapper .connection-section-panel .connection-section-intro{gap:12px;}
/* Figma sets this paragraph to 495px inside its 546px column so it breaks after "part of" — letting it fill pulls "your" up onto the first line */
.connection-section .connection-section-wrapper .connection-section-panel .connection-section-intro .connection-section-intro-text{max-width:495px;}
.connection-section .connection-section-wrapper .connection-section-panel .connection-section-examples{gap:14px;}
/* three rows filled top-to-bottom,then the second column — the reading order Figma lays out as two side-by-side stacks */
.connection-section .connection-section-wrapper .connection-section-panel .connection-section-examples .connection-section-list{display:grid;grid-template-rows:repeat(3,auto);grid-auto-flow:column;grid-auto-columns:max-content;justify-content:start;gap:12px 24px;}
/* ---------- Large Desktop / Laptop ---------- */
@media (max-width:1199px){.connection-section .connection-section-wrapper .connection-section-panel{gap:32px;padding:28px 30px;}
}
/* ---------- Tablet ---------- */
@media (max-width:991px){.connection-section .connection-section-wrapper .connection-section-panel{gap:var(--space-lg);}
}
/* ---------- Mobile ---------- */
@media (max-width:767px){.connection-section .connection-section-wrapper .connection-section-panel{flex-direction:column;gap:var(--space-md);padding:24px 22px;}
.connection-section .connection-section-wrapper .connection-section-panel .connection-section-col{flex:0 0 auto;width:100%;}
/* the columns are stacked now,so the 495px measure that reproduced Figma's line breaks just leaves a ragged short block */
 .connection-section .connection-section-wrapper .connection-section-panel .connection-section-intro .connection-section-intro-text{max-width:none;}
}
/* ---------- Small Mobile ---------- */
@media (max-width:575px){/* two columns of examples no longer fit — run them as one list */
 .connection-section .connection-section-wrapper .connection-section-panel .connection-section-examples .connection-section-list{grid-template-rows:none;grid-auto-flow:row;grid-auto-columns:auto;}
}