/* Shared title-and-description link components. Kept isolated so template
   links cannot fall back to inline text when the main stylesheet is stale. */
.link-card{
  min-width:0;
  text-decoration:none;
}
.link-card strong,
.link-card small{
  display:block;
}
.link-card span{
  min-width:0;
}
.link-card-panel{
  min-width:0;
  transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease;
}
.link-card-panel:hover{border-color:#b9cae6!important;box-shadow:0 12px 30px rgba(15,23,42,.09)!important;transform:translateY(-2px)}
.link-card-panel:focus-within{border-color:#8fb1ec!important;box-shadow:0 0 0 3px rgba(37,99,235,.13)!important}
.link-card strong,
.link-card small,
.link-card-panel h3,
.link-card-panel p{
  overflow-wrap:anywhere;
}
body .pairing-card-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
  margin-top:28px;
}
body .pairing-card-grid>article{
  display:flex;
  min-height:245px;
  flex-direction:column;
  align-items:flex-start;
  padding:23px;
  border:1px solid #dfe5ed;
  border-radius:15px;
  background:#fff;
  box-shadow:0 8px 25px rgba(15,23,42,.045);
}
body .pairing-card-grid>article>span{
  display:inline-flex;
  padding:6px 8px;
  border-radius:999px;
  background:#edf3ff;
  color:#2563eb;
  font-size:11px;
  line-height:1.35;
  font-weight:750;
  letter-spacing:.05em;
  text-transform:uppercase;
}
body .pairing-card-grid h3{
  margin:16px 0 10px;
  color:#101828;
  font-size:18px;
  line-height:1.4;
  letter-spacing:-.02em;
}
body .pairing-card-grid h3>a{
  color:#101828;
  text-decoration:none;
}
body .pairing-card-grid p{
  margin:0 0 18px;
  color:#667085;
  font-size:14px;
  line-height:1.7;
}
body .pairing-card-grid article>a:last-child{
  display:flex;
  align-items:center;
  gap:7px;
  margin-top:auto;
  color:#2563eb;
  font-size:14px;
  line-height:1.4;
  font-weight:750;
  text-decoration:none;
}
body .component-library{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;
  margin-top:32px;
}
body .component-card{
  display:flex;
  min-width:0;
  flex-direction:column;
  padding:25px;
  border:1px solid #dfe5ed;
  border-radius:14px;
  background:#fff;
}
body .component-card>span{
  color:#2563eb;
  font-size:11px;
  font-weight:750;
  letter-spacing:.08em;
  text-transform:uppercase;
}
body .component-card h3{margin:10px 0 8px;font-size:20px;line-height:1.35}
body .component-card p{margin:0 0 17px;color:#667085;font-size:14px;line-height:1.65}
body .component-card>a:last-child{margin-top:auto;color:#2563eb;font-size:14px;font-weight:750}
body .recommendation-list{
  display:grid;
  gap:12px;
  margin:28px 0;
}
body .recommendation-list>article{
  display:grid;
  grid-template-columns:minmax(220px,.7fr) minmax(0,1.3fr) auto;
  align-items:center;
  gap:8px 24px;
  padding:22px;
  border:1px solid #dfe5ed;
  border-radius:13px;
  background:#fff;
}
body .recommendation-list>article>span{grid-column:1;color:#2563eb;font-size:11px;font-weight:750;text-transform:uppercase}
body .recommendation-list h3{grid-column:1;margin:0;font-size:18px;line-height:1.4}
body .recommendation-list p{grid-column:2;grid-row:1 / span 2;margin:0;color:#667085;font-size:14px;line-height:1.65}
body .recommendation-actions{display:flex;grid-column:3;grid-row:1 / span 2;flex-direction:column;align-items:flex-start;gap:9px}
body .recommendation-actions a{color:#2563eb;font-size:13px;font-weight:750;white-space:nowrap}
body .next-step-grid,
body .hub-link-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
  margin:24px 0 12px;
}
body .next-step-grid>a,
body .hub-link-grid>a{
  display:flex;
  min-width:0;
  min-height:122px;
  flex-direction:column;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  padding:19px;
  border:1px solid #dfe5ed;
  border-radius:14px;
  background:#fff;
  color:#101828;
  text-decoration:none;
  box-shadow:0 7px 22px rgba(15,23,42,.045);
  transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease;
}
body .next-step-grid>a:hover,
body .next-step-grid>a:focus-visible,
body .hub-link-grid>a:hover,
body .hub-link-grid>a:focus-visible{
  border-color:#b9cae6;
  box-shadow:0 12px 30px rgba(15,23,42,.09);
  transform:translateY(-2px);
  outline:0;
}
body .next-step-grid>a>strong,
body .hub-link-grid>a>strong{
  display:block;
  color:#101828;
  font-size:16px;
  line-height:1.4;
  letter-spacing:-.012em;
}
body .next-step-grid>a>span,
body .hub-link-grid>a>span{
  display:block;
  margin:0;
  color:#2563eb;
  font-size:14px;
  line-height:1.55;
  font-weight:650;
}
body .related-component-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:11px;
  margin:24px 0;
}
body .related-component-grid>a{
  display:block;
  min-width:0;
  padding:18px;
  border:1px solid #dfe5ed;
  border-radius:12px;
  background:#fff;
  color:#101828;
  text-decoration:none;
}
body .related-component-grid>a>span,
body .related-component-grid>a>strong,
body .related-component-grid>a>small{display:block}
body .related-component-grid>a>span{
  color:#2563eb;
  font-size:11px;
  font-weight:750;
  letter-spacing:.08em;
  text-transform:uppercase;
}
body .related-component-grid>a>strong{
  margin:7px 0 5px;
  color:#101828;
  font-size:15px;
  line-height:1.4;
}
body .related-component-grid>a>small{
  color:#667085;
  font-size:13px;
  line-height:1.55;
}
body .catalog-links{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
  margin-top:18px;
}
body .catalog-links>a{
  display:block;
  min-width:0;
  padding:20px;
  border-radius:13px;
  background:#101828;
  color:#fff;
  text-decoration:none;
}
body .catalog-links>a>strong,
body .catalog-links>a>span{display:block}
body .catalog-links>a>strong{color:#fff;font-size:15px;line-height:1.4}
body .catalog-links>a>span{margin-top:6px;color:#b7c5d7;font-size:13px;line-height:1.5}
body .scenario-links{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;
  margin:24px 0;
}
body .scenario-links>a{
  display:block;
  min-width:0;
  padding:15px;
  border:1px solid #dfe5ed;
  border-radius:11px;
  background:#f5f7fb;
  color:#101828;
  text-decoration:none;
}
body .scenario-links>a>strong,
body .scenario-links>a>span{display:block}
body .scenario-links>a>strong{font-size:14px;line-height:1.4}
body .scenario-links>a>span{margin-top:5px;color:#2563eb;font-size:13px;line-height:1.5}
.prose-shell a.button-primary,
.article-body a.button-primary{
  color:#fff!important;
  text-decoration:none!important;
}
@media(max-width:800px){
  body .pairing-card-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  body .next-step-grid,
  body .hub-link-grid{grid-template-columns:1fr}
  body .scenario-links{grid-template-columns:repeat(2,minmax(0,1fr))}
  body .recommendation-list>article{grid-template-columns:1fr}
  body .recommendation-list>article>span,
  body .recommendation-list h3,
  body .recommendation-list p,
  body .recommendation-actions{grid-column:1;grid-row:auto}
}
@media(max-width:540px){
  body .pairing-card-grid,
  body .component-library,
  body .related-component-grid,
  body .catalog-links,
  body .scenario-links{grid-template-columns:1fr}
  body .pairing-card-grid>article{min-height:0}
}