/* Product suite and MSDP Connect pages. Drawn with msdp-tokens.css; reuses the dv- hero stage and ms- buttons. */
.su-page{padding-bottom:var(--msdp-space-16)}
.su-hero{background:var(--msdp-inverse);color:#fff;border-radius:var(--msdp-radius-lg);padding:var(--msdp-space-12);margin-top:var(--msdp-space-4);display:grid;grid-template-columns:.92fr 1.08fr;gap:var(--msdp-space-12);align-items:center}
.su-hero>*{min-width:0}
.su-hero h1{font-size:clamp(40px,5vw,68px);line-height:1.02;color:#fff;margin:var(--msdp-space-3) 0 var(--msdp-space-6);letter-spacing:-.035em}
.su-hero h1 em{font-style:normal;color:#ff6b78}
.su-lead{font-size:var(--msdp-text-lg);line-height:1.5;color:#dbe5f3;max-width:560px}
.su-hero figcaption{font-size:var(--msdp-text-xs);color:#9fb4d3;margin-top:var(--msdp-space-6)}
.su-hero .dv-phone img{margin-top:0}
.su-head{max-width:760px;margin:var(--msdp-space-16) 0 var(--msdp-space-8)}
.su-head .dv-label{color:var(--msdp-action)}
.su-head h2{font-size:clamp(28px,3.4vw,44px);line-height:1.08;letter-spacing:-.03em;margin:var(--msdp-space-2) 0 var(--msdp-space-3)}
.su-head p{font-size:var(--msdp-text-lg);color:var(--msdp-text-secondary);line-height:1.5}

.su-three{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--msdp-space-6);margin-top:var(--msdp-space-6)}
.su-three article{background:var(--msdp-layer);border:1px solid var(--msdp-border);border-top:6px solid var(--msdp-inverse);border-radius:var(--msdp-radius-lg);padding:var(--msdp-space-8);display:flex;flex-direction:column;gap:var(--msdp-space-3);min-width:0}
.su-three article.field{border-top-color:var(--msdp-action)}
.su-three article.connect{border-top-color:var(--msdp-progress)}
.su-three article.mobile{border-top-color:var(--msdp-approved)}
.su-four{grid-template-columns:repeat(2,1fr)}
.su-tag{font:600 var(--msdp-text-xs)/1.4 var(--msdp-font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--msdp-text-muted)}
.su-three h2{font-size:var(--msdp-text-xl);letter-spacing:-.03em;line-height:1.1}
.su-one{font-size:var(--msdp-text-lg);line-height:1.35;color:var(--msdp-text)}
.su-list{border-top:1px solid var(--msdp-border);margin-top:var(--msdp-space-3)!important}
.su-list li{padding:var(--msdp-space-3) 0 var(--msdp-space-3) 28px;border-bottom:1px solid var(--msdp-border);position:relative;font-size:var(--msdp-text-md);line-height:1.4}
.su-list li::before{content:"";position:absolute;left:2px;top:17px;width:12px;height:6px;border-left:2px solid var(--msdp-approved);border-bottom:2px solid var(--msdp-approved);transform:rotate(-45deg)}
.su-buy{font-size:var(--msdp-text-sm);color:var(--msdp-text-secondary);line-height:1.5;flex:1}
.su-buy b{color:var(--msdp-text)}
.su-more{font-weight:600;font-size:var(--msdp-text-sm);text-decoration:none}

.su-links{display:grid;gap:var(--msdp-space-4)}
.su-link{display:grid;grid-template-columns:230px 1fr;gap:var(--msdp-space-8);align-items:center;background:var(--msdp-layer);border:1px solid var(--msdp-border);border-radius:var(--msdp-radius-lg);padding:var(--msdp-space-6) var(--msdp-space-8)}
.su-pair{display:flex;align-items:center;gap:var(--msdp-space-2);font:600 var(--msdp-text-xs)/1.3 var(--msdp-font-mono);letter-spacing:.06em;text-transform:uppercase;flex-wrap:wrap}
.su-pair span{padding:4px 9px;border-radius:var(--msdp-radius-full);background:var(--msdp-layer-sunken);color:var(--msdp-text-secondary)}
.su-pair i{font-style:normal;color:var(--msdp-action)}
.su-link h3{font-size:var(--msdp-text-lg);letter-spacing:-.015em;margin-bottom:4px}
.su-link p{color:var(--msdp-text-secondary);line-height:1.5}

.su-table{overflow-x:auto;background:var(--msdp-layer);border:1px solid var(--msdp-border);border-radius:var(--msdp-radius-lg)}
.su-table table{width:100%;border-collapse:collapse;font-size:var(--msdp-text-md);white-space:normal;min-width:640px}
.su-table :is(th,td){text-align:left;padding:var(--msdp-space-4) var(--msdp-space-6);border-bottom:1px solid var(--msdp-border);vertical-align:top;white-space:normal;line-height:1.45}
.su-table thead th{font:600 var(--msdp-text-xs) var(--msdp-font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--msdp-text-muted);background:var(--msdp-canvas)}
.su-table tbody th{font-weight:650;width:24%;font-size:var(--msdp-text-md);color:var(--msdp-text);background:none;text-transform:none;letter-spacing:0}
.su-table tr:last-child :is(th,td){border-bottom:0}
.su-table td.plain{color:var(--msdp-text-muted)}

.su-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--msdp-space-6)}
.su-grid article{background:var(--msdp-layer);border:1px solid var(--msdp-border);border-radius:var(--msdp-radius-lg);padding:var(--msdp-space-6)}
.su-icon{width:40px;height:40px;border-radius:10px;background:var(--msdp-progress-bg);color:var(--msdp-progress-text);display:grid;place-items:center;margin-bottom:var(--msdp-space-4)}
.su-icon svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.su-grid h3{font-size:var(--msdp-text-lg);letter-spacing:-.015em;margin-bottom:6px}
.su-grid p{color:var(--msdp-text-secondary);font-size:15px;line-height:1.5}

.dv-page .su-show{display:grid;grid-template-columns:1fr 300px;gap:var(--msdp-space-12);align-items:center;background:var(--msdp-layer-sunken);border-radius:var(--msdp-radius-lg);padding:var(--msdp-space-12)}
.su-show h3{font-size:clamp(22px,2.4vw,30px);letter-spacing:-.025em;line-height:1.15;margin-bottom:var(--msdp-space-4)}
.su-show p{color:var(--msdp-text-secondary);font-size:var(--msdp-text-lg);line-height:1.5;max-width:520px}
.su-device{border:6px solid #0b1730;border-radius:30px;overflow:hidden;box-shadow:var(--msdp-shadow-2);background:#fff}
.su-device img{display:block;width:100%;height:auto}
.su-shot{border:1px solid var(--msdp-border-strong);border-radius:var(--msdp-radius-lg);overflow:hidden;box-shadow:var(--msdp-shadow-2);margin:0}
.su-shot img{display:block;width:100%;height:auto}
.su-shot figcaption{padding:var(--msdp-space-3) var(--msdp-space-4);font-size:var(--msdp-text-xs);color:var(--msdp-text-muted);border-top:1px solid var(--msdp-border);background:var(--msdp-layer)}

.su-two{display:grid;grid-template-columns:1fr 1fr;gap:var(--msdp-space-6)}
.su-two article{background:var(--msdp-layer);border:1px solid var(--msdp-border);border-radius:var(--msdp-radius-lg);padding:var(--msdp-space-8)}
.su-two h3{font-size:var(--msdp-text-lg);margin-bottom:var(--msdp-space-3)}
.su-two .next li::before{border-color:var(--msdp-open);transform:none;width:8px;height:8px;border:2px solid var(--msdp-open);border-radius:50%;top:15px}

.dv-page .su-close{background:var(--msdp-inverse);border-radius:var(--msdp-radius-lg);padding:var(--msdp-space-12);text-align:center;margin-top:var(--msdp-space-16)}
.su-close h2{color:#fff;font-size:clamp(26px,3vw,40px);letter-spacing:-.03em;margin-bottom:var(--msdp-space-3)}
.su-close p{color:#c4d2e6;max-width:560px;margin:0 auto var(--msdp-space-6)!important;font-size:var(--msdp-text-lg)}
.su-close .dv-actions{justify-content:center;margin-top:0}

@media(max-width:1000px){
 .su-hero{grid-template-columns:1fr;padding:var(--msdp-space-8)}
 .su-three,.su-grid{grid-template-columns:1fr 1fr}
 .su-three:not(.su-four) article:last-child{grid-column:1/-1}
 .su-link{grid-template-columns:1fr;gap:var(--msdp-space-3)}
 .dv-page .su-show{grid-template-columns:1fr 220px;padding:var(--msdp-space-8);gap:var(--msdp-space-8)}
}
@media(max-width:700px){
 .su-hero{padding:var(--msdp-space-6) var(--msdp-space-4)}
 .su-three,.su-grid,.su-two{grid-template-columns:1fr}
 .su-three article{padding:var(--msdp-space-6)}
 .su-head{margin-top:var(--msdp-space-12)}
 .dv-page .su-show{grid-template-columns:1fr;padding:var(--msdp-space-6)}
 .su-device{max-width:240px;margin:0 auto}
 .dv-page .su-close{padding:var(--msdp-space-8) var(--msdp-space-4)}
 .su-link{padding:var(--msdp-space-4)}
}