/* ReplyJolt responsive finishing layer — phones and small tablets.
 * Loads AFTER individual page designs so typography/layout are coherent.
 * Desktop >= 901px is intentionally unchanged.
 */
@media (max-width:900px){
 html,body{max-width:100%;overflow-x:clip}
 .site-shell{max-width:100%;overflow-x:clip}
 .wrap{width:min(1180px,calc(100% - 32px));max-width:100%}
 .navigation,.navigation>*{min-width:0}
 .navigation{gap:10px}
 .navigation .brand{flex-shrink:1}
 .navigation .brand-wordmark{font-size:clamp(16px,2.7vw,20px)}
 .navigation .nav-cta{
  min-height:40px;max-width:175px;flex-shrink:0;padding:10px 12px;
  white-space:normal;text-align:center;line-height:1.3;
  font-size:10px;letter-spacing:.3px;overflow-wrap:normal
 }
 main,section,article,aside,.hero-copy,.demo-content,.brand-spotlight-copy,
 .mv-hero-copy,.mv-heading,.mv-tv-section .wrap,.mv-art-section .wrap,
 .signup-inner,.signup-copy,.jolt-banter-content{min-width:0}
 h1,h2,h3,p{max-width:100%}
 .hero h1,.mv-hero h1,.mv-heading h2,.mv-endgame h2,
 .brand-spotlight h2,.demo-heading h2,.ck-hero h1,
 .fk-hero h1,.gc-hero h1,.rc-hero h1{
  white-space:normal!important;overflow-wrap:normal;text-wrap:balance
 }
 /* Home: hero remains theatrical while copy retains breathable spacing. */
 .hero{gap:18px}
 .hero-copy,.hero-art{min-width:0}
 .hero .eyebrow{white-space:normal;flex-wrap:wrap;line-height:1.5}
 .jolt-hero-banter{max-width:100%;box-sizing:border-box}
 .jolt-banter-label,.jolt-banter-text{overflow-wrap:break-word}
 .brand-spotlight{min-width:0}
 .brand-spotlight-poster{max-width:100%;min-width:0}
 .brand-poster-message{overflow-wrap:normal}
 /* Prevent pill rows or mock social panels from demanding desktop widths. */
 .brand-token-row,.hero-actions,.conversation-options,.tone-options{max-width:100%}
 .mock-post,.demo-surface,.sample-column,.suggestion-column,.reply-list,.reply-card{min-width:0;max-width:100%}
 .mock-post-body,.reply-card p{overflow-wrap:break-word}
 .future-card,.feature-card,.fk-deliverables article,.ck-items>div{min-width:0}
 /* JoltBot mission control: full-width controls, no sideways scrolling. */
 .hq-mission-select{min-width:0;max-width:100%}
 .hq-mission-grid{grid-template-columns:1fr 1fr;gap:10px}
 .hq-mission-option{grid-template-columns:31px minmax(0,1fr);min-width:0;
  padding:14px 27px 14px 12px;column-gap:9px;height:auto}
 .hq-mission-option>span{min-width:0;overflow-wrap:break-word;word-break:normal}
 .hq-mission-option>span small{white-space:normal;overflow-wrap:break-word}
 /* Media wing: never let the game-style TV screen force a wide viewport. */
 .mv-hero-grid,.mv-console,.mv-console-theater,.mv-console-guide,
 .mv-console-screen,.mv-console-now,.mv-console-channel-list,.mv-art-grid,.mv-home-grid{min-width:0;max-width:100%}
 .mv-hero h1{font-size:clamp(36px,6.1vw,54px)}
 .mv-console{grid-template-columns:minmax(0,1fr)}
 .mv-console-guide{width:100%}
 .mv-console-channel-list{grid-template-columns:repeat(2,minmax(0,1fr))}
 .mv-console-screen video{display:block;width:100%;max-width:100%;object-fit:contain}
 .mv-console-now{align-items:flex-start}
 .mv-endgame .btn{white-space:normal;text-align:center}
}
@media(max-width:700px){
 .navigation{gap:8px}
 .navigation .brand{gap:6px}
 .navigation .brand-icon{width:34px;height:34px;flex:none}
 .navigation .brand-wordmark{font-size:17px;letter-spacing:-.7px}
 .navigation .nav-cta{max-width:137px;font-size:9px;line-height:1.3;padding:8px 9px;min-height:42px}
 .hero h1{font-size:clamp(34px,9vw,49px)!important;line-height:1.05;letter-spacing:-1.7px;white-space:normal!important}
 .hero-lead{font-size:14px;line-height:1.62}
 .hero .eyebrow{font-size:9px;letter-spacing:.9px}
 .hero-art{height:clamp(218px,59vw,365px)!important;max-width:500px;margin:16px auto 0}
 .robot-image-wrap{inset:7px 8px 8px!important}
 .signal-card{padding:9px 11px!important;max-width:67%;border-radius:11px!important}
 .signal-card-top{top:9px;right:6px}
 .signal-card-bottom{bottom:9px;left:8px;font-size:8px;letter-spacing:.45px;line-height:1.35}
 .signal-head{font-size:8px;letter-spacing:.7px}
 .signal-main{font-size:11px;line-height:1.3}
 .signal-mini{font-size:8px;letter-spacing:.4px}
 .hq-hero-coordinate{display:none}
 .hero-art .hq-hero-stamp{font-size:8px;right:10px;bottom:8px;max-width:43%;padding:7px;line-height:1.25}
 .hero-side-text{display:none}
 .jolt-hero-banter{display:flex;align-items:flex-start;gap:9px;padding:13px}
 .jolt-banter-content{min-width:0}
 .jolt-banter-label{font-size:8px;letter-spacing:.7px}
 .jolt-banter-text{font-size:12px;line-height:1.5;min-height:0}
 .jolt-banter-next{min-width:44px;min-height:44px;flex:none}
 .hq-mission-grid{grid-template-columns:minmax(0,1fr)}
 .hq-mission-option{min-height:72px;grid-template-columns:34px minmax(0,1fr);padding:12px 30px 12px 14px}
 .hq-mission-option>b{font-size:20px}
 .hq-mission-option>span{font-size:13px}
 .hq-mission-option>span small{font-size:11px;line-height:1.45}
 .hq-mission-heading{line-height:1.6;font-size:9px;letter-spacing:1.15px}
 .brand-poster-message{font-size:clamp(32px,9.5vw,45px)!important;letter-spacing:-1.5px;line-height:1}
 .brand-spotlight-poster{padding:20px;min-height:265px}
 .brand-poster-eyebrow,.brand-poster-signoff{letter-spacing:.5px;line-height:1.5}
 .demo-toolbar{gap:7px;min-width:0}
 .demo-title{min-width:0;overflow-wrap:break-word;white-space:normal}
 .demo-tag{font-size:8px;letter-spacing:0;white-space:normal;text-align:right}
 .mock-post-header{min-width:0}
 .reply-card{flex-direction:column;align-items:stretch;gap:9px}
 .reply-card p{flex:auto;width:100%}
 .reply-card .copy-button{align-self:stretch}
 /* Larger, clearer film display with channel guide below. */
 .mv-hero-grid{padding-top:42px;padding-bottom:60px}
 .mv-hero h1{font-size:clamp(31px,8.4vw,46px)!important;letter-spacing:-1.25px;line-height:1.07}
 .mv-hero-actions{display:grid;grid-template-columns:1fr;gap:9px}
 .mv-hero-actions .btn{width:100%;max-width:100%;white-space:normal;line-height:1.3}
 .mv-hero-visual{max-width:100%;min-width:0;transform:none}
 .mv-hero-visual img{max-height:300px;min-height:0;aspect-ratio:16/10;object-fit:cover}
 .mv-visual-stamp{font-size:8px;letter-spacing:.6px}
 .mv-signal-ticker{gap:7px 12px}
 .mv-signal-ticker span{font-size:8px;letter-spacing:.5px}
 .mv-heading{gap:15px}
 .mv-heading h2{font-size:clamp(31px,8.15vw,43px)!important;letter-spacing:-1.25px;line-height:1.07}
 .mv-heading>p{font-size:13px;line-height:1.65}
 .mv-console{display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
 .mv-console-leds{display:flex;flex-wrap:wrap;gap:6px 7px}
 .mv-console-leds b{font-size:9px;line-height:1.45}
 .mv-console-channel-name{margin-left:0;white-space:normal}
 .mv-console-screen{min-height:0}
 .mv-console-screen video{height:clamp(280px,96vw,460px);max-height:none;object-fit:contain}
 .mv-console-screen-label{top:8px;bottom:auto;left:8px;font-size:7px;max-width:65%;line-height:1.3}
 .mv-console-now{display:block;padding:16px}
 .mv-console-now h3{font-size:clamp(21px,6vw,27px);line-height:1.15;overflow-wrap:break-word}
 .mv-console-now>a{margin-top:14px;min-height:44px}
 .mv-console-guide{padding:14px}
 .mv-console-guide-heading{gap:8px;flex-wrap:wrap}
 .mv-guide-badge{margin-left:auto}
 .mv-console-channel-list{display:grid;grid-template-columns:minmax(0,1fr)}
 .mv-console-channel{grid-template-columns:64px minmax(0,1fr) 12px;gap:9px;padding:9px;min-width:0}
 .mv-console-channel span,.mv-console-channel strong,.mv-console-channel em{min-width:0;max-width:100%;overflow-wrap:break-word}
 .mv-home-panel{height:clamp(235px,68vw,310px)}
 .mv-home-content strong{font-size:clamp(25px,7vw,35px)}
 .mv-home-bottom{display:block}
 .mv-home-bottom a{display:inline-block;margin-top:12px}
 /* Mobile boot fits without overlaying logs, even at larger text settings. */
 .hq-boot{padding:14px;align-items:center;overflow:auto}
 .hq-boot-stage{min-width:0;width:min(100%,500px)}
 .hq-boot-copy{min-width:0}
 .hq-boot h2{font-size:clamp(36px,10.1vw,52px)!important;letter-spacing:-1.7px;line-height:.99}
 .hq-boot-logs{min-height:0;max-width:100%;font-size:9px;line-height:1.6;gap:8px;overflow-wrap:break-word}
 .hq-boot-logs span{white-space:normal}
 .hq-boot-actions{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
 .hq-boot-enter,.hq-boot-skip{min-width:0;white-space:normal;line-height:1.35}
 .hq-boot-visual{opacity:.12;max-width:240px}
}
@media(max-width:380px){
 .wrap{width:calc(100% - 26px)}
 .navigation .brand-wordmark{font-size:15px}
 .navigation .brand-icon{width:30px;height:30px}
 .navigation .nav-cta{max-width:123px;font-size:8px;padding:8px 7px}
 .hero h1{font-size:clamp(31px,9vw,37px)!important}
 .hero-art .hq-hero-stamp{display:none}
 .signal-card-top{max-width:63%}
 .brand-poster-message{font-size:clamp(30px,9vw,40px)!important}
 .mv-console-guide-heading small{letter-spacing:0}
 .mv-art-grid{grid-template-columns:minmax(0,1fr)}
 .mv-art-tile,.mv-art-tile-wide,.mv-art-tile-portrait{grid-column:auto;aspect-ratio:4/3;min-height:190px}
 .mv-art-tile-sheet img{object-fit:contain}
 .hq-boot h2{font-size:clamp(32px,10vw,40px)!important}
}
@media(prefers-reduced-motion:reduce){
 .robot-image,.robot-image-wrap,.hq-boot-visual,.mv-home-panel img{animation:none!important;transition:none!important}
}


/* Banner repair must win against earlier small-screen gallery simplification. */
@media(max-width:700px){
 .mv-hero-visual img{height:auto!important;min-height:0!important;max-height:none!important;aspect-ratio:auto!important;object-fit:contain!important}
 .mv-art-grid .mv-art-tile-banner,
 .mv-art-grid .mv-art-tile-campaign{
  grid-column:1 / -1!important;
  aspect-ratio:auto!important;
  min-height:0!important;
 }
 .mv-art-grid .mv-art-tile-banner img,
 .mv-art-grid .mv-art-tile-campaign img{
  height:auto!important;aspect-ratio:auto!important;
  width:100%;object-fit:contain!important;
 }
}
@media(max-width:380px){
 .mv-art-grid .mv-art-tile-banner,
 .mv-art-grid .mv-art-tile-campaign{
  grid-column:1 / -1!important;aspect-ratio:auto!important;min-height:0!important;
 }
}