/* Quiet, actionable manufacturer guidance immediately above the card footer. */
.device-learning{margin:13px 20px 0;min-width:0}
.how-to-panel{display:flex;align-items:stretch;border:1px solid #cfdeda;border-radius:13px;background:linear-gradient(125deg,#f3f8f5,#edf5f2);overflow:visible;box-shadow:0 2px 5px #173c4303}
.how-to-guide{display:flex;align-items:center;gap:10px;flex:1;min-width:0;padding:12px;text-decoration:none;border-radius:12px;transition:background .18s ease}
.how-to-guide:hover{background:#e5f0eb}
.how-to-icon{display:grid;place-items:center;flex:0 0 31px;width:31px;height:34px;color:#477468}
.how-to-icon svg{width:25px;height:25px}
.how-to-copy{min-width:0}
.how-to-copy strong{display:block;font-size:14px;line-height:1.3;font-weight:650;letter-spacing:-.12px;color:#264d43}
.how-to-copy small{display:block;margin-top:3px;font-size:11px;line-height:1.45;color:#59736a;overflow-wrap:anywhere}
.how-to-arrow{margin-left:auto;align-self:center;color:#66867b;font-size:16px;padding-left:4px}
.how-to-video{display:flex;align-items:center;justify-content:center;gap:6px;flex:0 0 auto;margin:9px 0;padding:0 10px;border-left:1px solid #cfdfd7;text-decoration:none;color:#3e665b;font-size:11px;line-height:1.3}
.how-to-video svg{width:18px;height:18px;flex:none}
.how-to-video small{display:block;color:#687f76;font-size:10px;margin-top:2px}
.how-to-video:hover{color:#126d5a;text-decoration:underline}
.device-learning-detail{margin:22px 0}
.device-learning-detail .how-to-guide{padding:15px 17px;gap:12px}
.device-learning-detail .how-to-copy strong{font-size:16px}
.device-learning-detail .how-to-copy small{font-size:12px}
.device-learning-detail .how-to-video{padding:0 18px;font-size:13px}
.spacer-advice{display:inline-flex;align-items:center;gap:8px;margin:0 0 12px;padding:7px 11px 7px 8px;border:1px solid #d3c5df;border-radius:10px;background:linear-gradient(120deg,#f5faf7,#f4eff9);color:#624b7a;text-decoration:none;font-size:12px;font-weight:600;line-height:1.4;min-height:38px;box-shadow:0 3px 10px #69518114,inset 0 1px 0 #fff}
.spacer-advice svg{width:35px;height:22px;flex:none;color:#80658e}
.spacer-advice:hover{background:linear-gradient(120deg,#eaf5ef,#ece2f5);border-color:#bda8ce;color:#563b70;box-shadow:0 4px 12px #69518120,inset 0 1px 0 #fff}
.spacer-advice:focus-visible{outline:3px solid #9475aa;outline-offset:3px}
.spacer-advice .spacer-arrow{font-size:12px;color:#80658e;margin-left:2px}
.spacer-note{font-size:13px;line-height:1.6;color:#597068;margin:0 0 12px}
@media(max-width:700px){
 .device-learning{margin:11px 14px 0}
 .how-to-guide{padding:10px;gap:8px}
 .how-to-copy strong{font-size:13px}
 .how-to-copy small{font-size:10.5px}
 .how-to-icon{flex-basis:26px;width:26px}
 .how-to-video{padding:0 8px;gap:4px}
 .device-learning-detail{margin:20px 0}
}
@media(prefers-reduced-motion:reduce){.how-to-guide{transition:none}}

/* Keep both links readable in the narrow, two-card mobile catalogue. */
@media(min-width:22.5em) and (max-width:780px){
 .mobile-pairs .device-learning{margin-left:11px;margin-right:11px}
 .mobile-pairs .how-to-panel{flex-wrap:wrap}
 .mobile-pairs .how-to-guide{flex-basis:100%;padding:10px 8px;gap:6px}
 .mobile-pairs .how-to-icon{flex-basis:19px;width:19px}
 .mobile-pairs .how-to-icon svg{width:19px;height:19px}
 .mobile-pairs .how-to-arrow{display:none}
 .mobile-pairs .how-to-video{flex-basis:100%;margin:0;padding:10px;border-left:0;border-top:1px solid #cfdfd7}
 .mobile-pairs .how-to-video small{display:inline;margin:0 0 0 5px}
 .mobile-pairs .spacer-advice{display:flex;max-width:100%;gap:5px;padding:6px;min-height:44px}
 .mobile-pairs .spacer-advice svg{width:24px}
 .mobile-pairs .spacer-arrow{display:none}
}

.product-card .device-learning{margin-top:auto;padding-top:13px}
.product-card .device-learning + .product-actions{margin-top:12px}

/* Keep the icon and two-line label balanced in every card width. */
.device-learning .spacer-advice{display:grid;grid-template-columns:42px minmax(0,1fr) auto;align-items:center;width:100%;min-height:62px;padding:10px 12px;gap:10px;margin-bottom:12px;border-radius:13px;background:linear-gradient(115deg,#f5f8f7,#eee7f7);box-shadow:0 3px 13px #8d72aa18,inset 0 1px 0 #fff}
.device-learning .spacer-advice svg{width:42px;height:30px}
.device-learning .spacer-copy{display:block;min-width:0;text-align:left;line-height:1.2}
.device-learning .spacer-copy strong{display:block;font-size:18px;font-weight:700;letter-spacing:-.2px}
.device-learning .spacer-copy>span{display:block;margin-top:2px;font-size:14px;font-weight:550}
.device-learning .spacer-advice .spacer-arrow{margin:0;font-size:16px}
.device-learning-detail .spacer-advice{grid-template-columns:46px minmax(0,1fr) auto;min-height:66px;padding:11px 14px;gap:12px}
.device-learning-detail .spacer-advice svg{width:46px;height:32px}
.device-learning-detail .spacer-copy strong{font-size:20px}
.device-learning-detail .spacer-copy>span{font-size:15px}
@media(max-width:780px){
 .mobile-pairs .device-learning .spacer-advice{grid-template-columns:28px minmax(0,1fr);justify-items:stretch;min-height:60px;padding:9px 8px;gap:7px}
 .mobile-pairs .device-learning .spacer-advice svg{width:28px;height:26px}
 .mobile-pairs .device-learning .spacer-copy strong{font-size:17px}
 .mobile-pairs .device-learning .spacer-copy>span{font-size:13px}
 .mobile-pairs .device-learning .spacer-advice .spacer-arrow{display:none}
}