.product-depth{max-width:1100px}
.depth-case{margin-top:12px}
.depth-case h3{font-size:22px}
.depth-case .workspace-pairs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.depth-case .workspace-pairs>div{display:block}
.depth-case .workspace-pairs dd{margin:8px 0 0}
@media(max-width:860px){.depth-case .workspace-pairs{grid-template-columns:1fr;gap:14px}}
.depth-case .workspace-pairs{margin-top:10px}
.depth-relationship{font-size:13px;text-transform:uppercase;letter-spacing:.04em;color:var(--accent);display:block;margin-bottom:6px}
.depth-service-diagram{margin:8px 0 12px;background:linear-gradient(120deg,var(--paper),var(--surface));padding:8px 12px}
.depth-control-plane{display:flex;align-items:center;justify-content:center;gap:20px;border-bottom:1px dashed var(--line);padding-bottom:5px}
.depth-control-plane .depth-node img{height:40px;width:48px}
.depth-control-plane .depth-node{flex-direction:row;gap:8px}
.depth-control-plane p{margin:0;font-size:14px;line-height:1.3}.depth-control-plane p span{display:block}
.depth-data-plane{display:grid;grid-template-columns:1fr 1fr 1fr;align-items:center;gap:8px}
.depth-data-plane .depth-node img{height:48px;width:60px}
.depth-control-note{font-size:14px;line-height:1.3;text-align:center;margin:4px 0 0}
@media(max-width:860px){.depth-control-plane{flex-direction:column;gap:8px;padding-block:8px}.depth-data-plane{grid-template-columns:1fr;gap:8px;padding-top:10px}.depth-data-plane .depth-path{justify-self:center}.depth-control-note{text-align:left}}
.product-depth .product-diagram{max-width:640px;margin:8px auto}
.product-depth .product-diagram img{width:100%;max-height:112px;object-fit:contain}
.depth-graph.depth-parallel{grid-template-columns:repeat(3,minmax(0,1fr))}
.depth-graph.depth-parallel .depth-node{flex-direction:column}
.product-depth .provider-block{margin:10px 0 0;padding:0}
.product-depth .provider-block h3{font-size:22px;margin:0 0 8px}
.product-depth .provider-block p{font-size:16px;line-height:1.4;margin:8px 0;max-width:none}
.product-depth .provider-names{margin:10px 0;padding:0;gap:8px 20px}
.product-depth .provider-names li{font-size:17px;padding:6px 0}
.product-depth .provider-block>a{font-size:15px}
.product-depth .diagram-labels{font-size:14px;max-width:336px;margin-inline:auto;gap:4px}
.depth-approved-diagram .explanation{margin:8px 0;padding:4px 8px}
.depth-approved-diagram .explain-node img{width:66px;height:54px}
.depth-approved-diagram .explain-node{padding:0;gap:1px}
.depth-approved-diagram .explain-node strong,.depth-approved-diagram .explain-node span,.depth-approved-diagram .explain-group-title{font-size:13px;line-height:1.2}
.depth-approved-diagram .explain-group{display:flex;align-items:center;justify-content:space-around;flex-wrap:wrap;padding:3px;gap:2px}
.depth-approved-diagram .explain-group-title{flex-basis:100%;margin:0;text-align:center}
.depth-approved-diagram .explain-group .explain-node{flex:1}
.depth-approved-diagram .explain-flow{gap:5px}
.depth-approved-diagram .explain-or{font-size:12px}
.workspace-detail .product-depth h2{font-size:27px;margin-bottom:8px}
.product-depth .depth-intro{font-size:18px;line-height:1.4;margin:0 0 14px;max-width:76ch}
.depth-controls{display:none;gap:8px;border-bottom:1px solid var(--line);padding-bottom:10px}
.depth-enhanced .depth-controls{display:flex;flex-wrap:wrap}
.depth-controls button{min-height:44px;padding:9px 15px;border:1px solid var(--line);border-radius:3px;color:var(--ink);background:var(--bg);font-size:16px}
.depth-controls button[aria-pressed=true]{color:var(--accent-ink);background:var(--accent);border-color:var(--accent)}
.depth-controls button:hover{border-color:var(--accent)}
.depth-panel[hidden]{display:none!important}
.depth-graph{display:grid;grid-template-columns:1fr 32px 1fr minmax(130px,1.2fr) 1fr;gap:6px;align-items:center;margin:12px 0 16px;padding:10px 12px;background:linear-gradient(120deg,var(--paper),var(--surface))}
.depth-node{display:flex;flex-direction:column;align-items:center;text-align:center;gap:0;min-width:0}
.depth-node img{width:96px;height:84px;object-fit:contain;max-width:100%}
.depth-node span{font-size:15px;line-height:1.25}
.depth-connector svg{width:30px}
.depth-paths{display:grid;gap:12px}
.depth-path{display:flex;flex-direction:column;align-items:center;color:var(--accent)}
.depth-path svg{width:100%;height:20px;stroke-width:2}
.depth-path strong{font-size:14px;line-height:1.2;font-weight:500;text-align:center}
.depth-alternative{color:var(--muted)}
.depth-alternative svg{stroke-dasharray:5 5}
[data-flow=degraded] .depth-primary,[data-flow=outage] .depth-primary{color:var(--error)}
[data-flow=outage] .depth-primary svg{stroke-dasharray:2 8}
[data-flow=degraded] .depth-alternative,[data-flow=outage] .depth-alternative{color:var(--accent)}
[data-flow=degraded] .depth-alternative svg,[data-flow=outage] .depth-alternative svg{stroke-dasharray:none}
.depth-reading{display:grid;grid-template-columns:1fr 1fr;gap:8px 28px}
.depth-reading h3{grid-column:1/-1;font-size:22px}
.depth-reading p{font-size:16px;line-height:1.5;margin:0}
.product-depth .depth-limit{font-size:15px;line-height:1.4;margin:14px 0 0;padding-top:10px;border-top:1px solid var(--line);max-width:none}
@media(min-width:861px) and (max-height:680px){
 .depth-service-diagram{display:grid;grid-template-columns:minmax(180px,1fr) 2fr;gap:2px 16px;margin:4px 0;padding:5px 10px}
 .depth-control-plane{flex-direction:column;gap:2px;border-bottom:0;border-right:1px dashed var(--line);padding:0 12px 0 0}
 .depth-control-note{grid-column:1/-1}
 .product-depth .provider-block h3{font-size:20px;margin-bottom:4px}
 .product-depth .provider-names{margin:4px 0;gap:4px 16px}
 .product-depth .provider-names li{padding:2px 0;font-size:16px}
 .product-depth .provider-block p{margin:6px 0}
 .product-depth .product-diagram img{max-height:78px}
 .product-depth .diagram-labels{max-width:234px}
 .product-depth .depth-intro{margin-bottom:8px;font-size:17px}
 .depth-controls{padding-bottom:6px}
 .depth-graph{margin:4px 0;padding:4px 8px}
 .depth-node img{height:58px;width:76px}
 .depth-reading{gap:5px 20px}
 .depth-reading h3{font-size:20px}
 .depth-reading p{font-size:16px;line-height:1.4}
 .product-depth .depth-limit{margin-top:8px;padding-top:8px}
}
@media(max-width:860px){
 .depth-reading{grid-template-columns:1fr;gap:10px}
 .depth-graph{grid-template-columns:1fr;gap:4px;padding:12px}
 .depth-node{flex-direction:row;justify-content:center;gap:12px}
 .depth-connector{justify-self:center;height:24px}
 .depth-connector svg{transform:rotate(90deg);height:24px}
 .depth-paths{display:flex;justify-content:space-around}
 .depth-path{width:45%}
 .depth-path svg{transform:rotate(90deg);width:30px;height:30px}
 .depth-node img{height:64px;width:72px}
 .depth-controls{gap:6px}.depth-controls button{flex:1;padding:8px;font-size:15px}
}