/* DreamCodeV responsive landscape: purposeful desktop-like composition, not an
   enlarged single-column phone layout. Kept separate from the hero/orbit art. */
@media (orientation:landscape) and (min-width:640px) and (max-height:650px) {
 html{scroll-padding-top:76px!important}
 body{overflow-x:clip!important}
 #main-content{width:100%!important;overflow-x:clip!important}
 .site-header{height:61px!important;padding:8px clamp(18px,4vw,44px)!important}
 .site-header .brand img{width:40px!important;height:40px!important}
 /* Full desktop navigation and orbit badges previously inflated the iPhone
    landscape layout viewport. Keep the same astronaut animation in a clip. */
 .site-header{width:100%!important;max-width:100vw!important;position:sticky!important;top:0;z-index:90!important}
 .site-header .menu-toggle{display:block!important;z-index:100!important}
 .site-header nav{
   display:none!important;position:absolute!important;top:60px!important;right:14px!important;left:auto!important;
   width:min(370px,calc(100vw - 28px))!important;min-width:0!important;
   max-height:calc(100dvh - 72px)!important;overflow-y:auto!important;
   padding:8px 11px!important;flex-direction:column!important;align-items:stretch!important;gap:1px!important;
   background:rgba(10,5,22,.98)!important;backdrop-filter:blur(18px)!important;
   border:1px solid rgba(168,105,225,.48)!important;border-radius:15px!important;
   box-shadow:0 16px 45px rgba(0,0,0,.7)!important;
 }
 .site-header nav.open{display:flex!important}
 .site-header nav a{padding:8px 11px!important;font-size:11px!important}
 .hero{overflow:clip!important;max-width:100%!important}
 .hero .orbit-stage{overflow:hidden!important;max-width:100%!important}

 .section{
  width:min(100% - 44px,1100px)!important;
  max-width:1100px!important;
  margin-inline:auto!important;
  padding:34px clamp(18px,3.4vw,40px)!important;
 }
 #ecosystem.classic-ecosystem{display:block!important}
 #ecosystem .section-intro{max-width:850px!important;margin-bottom:23px!important}
 #ecosystem .section-intro h2{font-size:clamp(32px,4.1vw,45px)!important;line-height:1.07!important}
 #ecosystem .section-intro>p:last-of-type{max-width:650px!important}
 #ecosystem .classic-hub-grid{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:15px!important;
  max-width:970px!important;
  margin-inline:auto!important;
 }
 #ecosystem .classic-hub-grid .hub-card{
  max-width:100%!important;
  min-height:0!important;
  padding:17px 19px 19px!important;
  border-radius:17px!important;
 }
 #ecosystem .classic-hub-grid .hub-card h3{font-size:clamp(19px,2.4vw,25px)!important;margin:10px 0 6px!important}
 #ecosystem .classic-hub-grid .hub-card p{font-size:12px!important;line-height:1.5!important}
 #ecosystem .classic-hub-grid .product-interface-visual{
  width:100%!important;max-width:100%!important;
  height:auto!important;aspect-ratio:16/9!important;
  margin:11px auto 10px!important
 }
 #ecosystem .classic-hub-grid .classic-public>img:not(.product-source){
  width:67px!important;height:67px!important;margin:14px 0 8px!important;
 }
 #services .section-head{max-width:970px!important;margin-inline:auto!important}
 #services .service-grid{
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  max-width:970px!important;margin-inline:auto!important;
  gap:13px!important;
 }
 #services .service-card{
  min-height:205px!important;max-height:none!important;
  padding:16px 10px 18px!important;border-radius:17px!important
 }
 #services .service-card .service-icon{
  width:67px!important;min-width:67px!important;height:67px!important;margin:0 auto 13px!important
 }
 #services .service-card h3{font-size:16px!important;line-height:1.22!important;margin-bottom:7px!important}
 #services .service-card p{font-size:11px!important;max-width:210px!important;line-height:1.45!important}
 #services .service-detail-shell{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr)!important;gap:14px!important}
 #services .service-detail-copy,#services .service-detail-visual{min-width:0!important}
 #insights .studio-notes-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:13px!important}
 .product-interface-overlay{
  padding:8px max(12px,3vw)!important;
  align-items:center!important;
  overflow:auto!important
 }
 .product-interface-dialog{
  width:min(1040px,100%)!important;
  max-height:calc(100dvh - 16px)!important;
  border-radius:15px!important;
  overflow:auto!important
 }
 .product-interface-dialog .product-interface-intro{padding:6px 17px!important;min-height:43px!important}
 .product-interface-dialog .interface-close{width:31px!important;height:31px!important}
 .product-interface-dialog .interface-content{
  display:grid!important;
  grid-template-columns:minmax(0,1.65fr) minmax(240px,1fr)!important;
  gap:8px!important;
  align-items:start!important
 }
 .product-interface-dialog .interface-showcase{width:auto!important;padding:8px!important}
 .product-interface-dialog .product-interface-visual{
  height:auto!important;aspect-ratio:16/9!important;
  max-height:214px!important;min-height:0!important
 }
 .product-interface-dialog .interface-story{
  width:auto!important;min-width:0!important;
  padding:11px 14px!important;
  border-top:0!important;border-left:1px solid rgba(169,116,209,.23)!important
 }
 .product-interface-dialog .interface-story h2{font-size:clamp(19px,2.1vw,25px)!important;margin:8px 0!important}
 .product-interface-dialog .interface-story p{font-size:12px!important;line-height:1.45!important;margin-bottom:9px!important}
 .product-interface-dialog .interface-story ul{font-size:11px!important;line-height:1.4!important;margin:8px 0!important}
 .product-interface-dialog .interface-story li{margin:3px 0!important}
 .product-interface-dialog .interface-notice{font-size:10px!important;line-height:1.35!important;padding:7px!important;margin:7px 0!important}
 .product-interface-dialog .interface-contact{padding:8px 12px!important;font-size:11px!important}
 .product-interface-dialog .interface-zoom{font-size:11px!important;margin:7px 4px!important}
}
@media (orientation:landscape) and (min-width:820px) and (max-height:650px) {
 #services .service-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important}
 #services .service-card{min-height:213px!important}
}
@media (orientation:landscape) and (min-width:1024px) and (min-height:651px) {
 #ecosystem .classic-hub-grid{max-width:1080px!important;margin-inline:auto!important}
 #services .service-grid{max-width:1100px!important;margin-inline:auto!important;grid-template-columns:repeat(4,minmax(0,1fr))!important}
 .product-interface-dialog{max-width:1160px!important}
}


/* Actual public screenshot dimensions must not be forced into a fake dashboard
   ratio. Preserve the real captured image and permit internal screenshot
   scrolling in short landscape dialogs. */
.product-interface-dialog.real-public-home .product-interface-visual{
 aspect-ratio:auto!important;
 height:auto!important;
 min-height:0!important;
 max-height:none!important;
 overflow:visible!important;
}
.product-interface-dialog.real-public-home .product-interface-visual img{
 display:block!important;width:100%!important;
 height:auto!important;max-height:none!important;
 object-fit:contain!important;object-position:top center!important;
}
@media (orientation:landscape) and (min-width:640px) and (max-height:650px){
 .product-interface-dialog.real-public-home .product-interface-visual{
  max-height:224px!important;height:auto!important;
  overflow-y:auto!important;overflow-x:hidden!important;overscroll-behavior:contain!important;
  scrollbar-width:thin;scrollbar-color:#8b52bd #100c1c;
 }
 .product-interface-dialog.real-public-home .interface-showcase{
  min-width:0!important;max-width:100%!important
 }
}


/* The original PNG itself is also the frame's image background, ensuring real
   home-screen imagery paints in iPhone landscape even while the <img> layout
   is being decoded or its scrollable content has not become visible. */
.product-interface-dialog.real-public-home[data-app="blacktable"] .product-interface-visual{
 background:#050506 url("/assets/blacktable-actual-home.png") top center / 100% auto no-repeat!important
}
.product-interface-dialog.real-public-home[data-app="portal"] .product-interface-visual{
 background:#080413 url("/assets/portal-actual-home.png") top center / 100% auto no-repeat!important
}
.product-interface-dialog.real-public-home .product-interface-visual img{
 opacity:1!important;visibility:visible!important;position:relative!important;z-index:1!important;
}