/* Phone and tablet refinements. Desktop rules remain in the original stylesheets. */
@media(max-width:900px){
 /* Animated and replaced illustration nodes must never move the page's scroll anchor. */
 .hero-scene,#usecase-carousel,.coordinator-visual,.comparison-proof,.channel-visual{overflow-anchor:none}
 .product-section{padding-block:48px}
 #usecase-content{display:block;position:relative}
 .usecase-grid{grid-template-rows:max-content max-content;gap:28px;align-content:start}
 .usecase-grid[hidden]{position:absolute;inset:0 0 auto;width:100%}
 .usecase-copy{min-height:0!important;padding:0}
 .case-visual{min-height:0;padding:0;margin:0 auto;align-self:start}
 .case-eyebrow{margin-bottom:18px}
 .carousel-controls{margin-top:28px}
 .split-section,.faq-section{padding-block:48px;gap:28px}
 .performance-section{padding-block:48px}
 .faq-section>div:first-child{margin-bottom:22px}
 .hero-controls{margin-top:12px}
}
@media(max-width:620px){
 html{scroll-padding-top:92px}
 .github-link{min-width:44px;min-height:44px;padding:8px}
 .hero-section{padding-top:100px;padding-bottom:28px;min-height:0}
 .hero-copy h1{font-size:clamp(34px,9.3vw,46px)}
 .hero-intro{margin-top:17px;line-height:1.65}
 .hero-actions{margin-top:20px}
 .hero-note{margin-top:14px}
 .hero-inner{margin-top:16px}
 .hero-diagram{height:550px}
 .hero-hub-node{top:39%}
 .hero-agent-group{top:86%!important}
 .hero-bubble,.bubble-light{font-size:14px;padding:12px 14px;width:calc(100% - 16px);max-width:350px;line-height:1.5}
 .hero-approval-question{padding:0;--approval-padding-y:10px;--approval-padding-x:12px}
 .hero-approved{width:max-content;padding:12px 16px;font-size:16px}
 .hero-controls{margin-top:8px}
 .hero-steps{gap:12px;justify-content:space-evenly}
 .hero-step{font-size:12px;min-height:44px}
 .hero-scene:empty{min-height:603px}
 #usecase-content:empty{min-height:1000px}
 .section-copy h2,.faq-section h2{margin-bottom:20px}
 .usecase-copy h3{margin-bottom:20px}
 .case-benefits{margin-top:22px;gap:14px}
 .case-benefits li{gap:11px}
 .case-description{font-size:16px;line-height:1.65}
 .case-benefits{font-size:14px;line-height:1.55}
 .quiet-features{gap:22px;margin-top:26px}
 .quiet-features li{gap:12px}
 .quiet-features strong{margin-bottom:4px}
 .coordinator-stage{height:600px}
 .coordinator-human,.coordinator-node{top:190px}
 .role-group{width:calc(50% - 24px);height:136px;padding:11px 9px}
 .role-group[data-group="1"],.role-group[data-group="2"]{top:295px}
 .role-group[data-group="3"],.role-group[data-group="4"]{top:455px}
 .role-group[data-group="2"],.role-group[data-group="4"]{left:calc(50% + 24px)}
 .role-heading{font-size:12px;margin-bottom:11px;align-items:baseline;flex-wrap:wrap;gap:2px 6px}
 .role-heading>span{font-size:10px}
 .role-agents{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
 .role-agents .agent-node{--badge-size:32px;justify-self:center}
 .coordinator-bubble{font-size:15px;line-height:1.5;padding:14px 16px}
 .coordinator-response{font-size:14px}
 .performance-engineering{margin-top:24px;gap:16px}
 .comparison-tabs button{min-height:44px;white-space:normal}
 .comparison-heading{align-items:baseline}
 .comparison-panel{min-height:0}
 /* Reserve the asynchronously loaded charts so lower sections do not jump. */
 .comparison-proof{min-height:668px}
 .comparison-row{min-height:21px}
 .channel-visual{height:370px;margin-top:0}
 .channel-agent{left:12%;top:36px}
 .channel-agent>.badge{--badge-size:52px}
 .channel-hub{left:50%;top:36px;width:60px;height:60px}
 .channel-hub svg{width:48px;height:48px}
 .channel-agent .diagram-label,.channel-hub .diagram-label{font-size:12px;top:calc(100% + 9px)}
 .channel-reel{left:50%;top:198px;width:100%;height:86px;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:1fr;gap:10px;padding:8px;border-radius:14px}
 .reel-window{border-radius:9px}
 .reel-face svg{width:35px;height:35px}
 .channel-person{top:330px}
 .channel-person>.person-badge{--badge-size:54px}
 .channel-person .group-badge{width:100px;min-width:100px;height:36px;min-height:36px;gap:2px}
 .channel-person .group-member{width:32px;height:32px;flex-basis:32px}
 .channel-person .group-member .person-badge{--badge-size:32px}
 .ecosystem-note{margin-top:18px}
 .access-matrix thead th{font-size:11px}
 .access-entity strong{font-size:13px}
 .access-entity small{font-size:10px}
 .access-check{min-height:42px}
 .communication-monitor .feature-window-head{gap:8px}
 .monitor-filters{display:grid;grid-template-columns:auto 1fr auto;gap:10px}
 .monitor-filters button{justify-content:center;font-size:11px;min-height:44px}
 .monitor-rows{min-height:456px}
 .monitor-row{min-height:76px}
 .monitor-row strong{font-size:12px}
 .monitor-row strong>span{font-size:11px}
 .monitor-row p{font-size:11px;line-height:1.45}
 .monitor-state{font-size:10px;max-width:70px}
 .faq-section{padding-block:40px}.faq-section>div:first-child{margin-bottom:20px}.faq-section h2{margin-bottom:0}.faq-list summary{min-height:48px;padding-block:12px;line-height:1.5;gap:16px}
 .faq-list summary>span{flex:none;width:20px;text-align:center}
 .closing{padding-block:48px 56px}
 .closing h2{margin:22px auto 26px}
 footer{padding-block:28px 24px;gap:20px}
 footer nav{flex-wrap:wrap;gap:8px 24px}
 footer nav a{display:inline-flex;align-items:center;min-height:44px}
 .brand-disclaimer{margin-top:-4px}
}
@media(min-width:480px) and (max-width:620px){
 .coordinator-stage{height:550px}
 .role-group{height:108px}
 .role-group[data-group="3"],.role-group[data-group="4"]{top:431px}
 .role-agents{grid-template-columns:repeat(4,minmax(0,1fr))}
 .role-agents .agent-node{--badge-size:clamp(32px,7vw,40px)}
}
@media(max-width:360px){
 .section-shell{width:calc(100% - 32px)}
 .hero-section{padding-inline:16px}
 .hero-diagram{height:550px}
 .hero-group-label{font-size:10px}
 .hero-agent-row .agent-node{--badge-size:30px}
 .hero-mini-actions{gap:5px}
 .hero-mini-actions b{font-size:10px}
 .hero-step{font-size:11px;gap:5px}
 .hero-steps{gap:6px}
 .role-heading{font-size:11px}
 .role-heading>span{font-size:9px}
 .role-group{padding-inline:7px}
 .role-agents{gap:8px 5px}
 .role-agents .agent-node{--badge-size:29px}
 .coordinator-node .diagram-label{font-size:12px;left:calc(100% + 9px)}
 .channel-person .group-badge{width:82px;min-width:82px;gap:2px}
 .channel-person .group-member{width:26px;height:26px;flex-basis:26px}
 .channel-person .group-member .person-badge{--badge-size:26px}
 .channel-person>.person-badge{--badge-size:48px}
 .access-matrix thead th{font-size:10px}
 .access-matrix thead th:first-child{width:34%}
 .access-entity strong{font-size:12px}
 .comparison-proof{min-height:690px}
 .monitor-filters button{font-size:10px}
 .monitor-row strong{font-size:11px}
 .monitor-row strong>span,.monitor-row p{font-size:10px}
 .monitor-state{font-size:9px;max-width:62px}
}