/* Interface polish: keeps the cinematic scene and its responsive geometry intact. */
.header,.hero-copy,.section,.apps-drawer,.footer,.app-page{font-family:var(--font);letter-spacing:.005em}
h1,h2,h3,h4{letter-spacing:-.025em;text-wrap:balance}
button,.button,select{font-family:inherit;font-weight:600;letter-spacing:.01em}
.cinematic-home.preview-home .header .apps-trigger{font-size:inherit;line-height:1.3}
.header nav a{font-weight:550;transition:color .18s ease}
.header nav a:hover{color:var(--cyan)}
.apps-trigger,.cinematic-cta,.button,.brief-actions button,.theme-chooser select{border-radius:8px}
.apps-trigger,.cinematic-cta,.button,.brief-actions button,.icon-button,.drawer-back,.store-card,.game-selector button,.theme-chooser select{transition:background-color .18s ease,border-color .18s ease,color .18s ease,box-shadow .18s ease,transform .18s ease}
.apps-trigger:hover,.brief-actions button:hover,.icon-button:hover{border-color:var(--cyan);box-shadow:0 0 0 3px color-mix(in srgb,var(--cyan) 12%,transparent)}
button:focus-visible,a:focus-visible,summary:focus-visible,select:focus-visible{outline:2px solid var(--cyan);outline-offset:4px}
.service-choices i{display:flex;align-items:center;justify-content:center;width:1.3em;height:1.3em;border:1px solid var(--scene-edge);border-radius:.3em;background:var(--scene-deep)}
.service-choices i svg{display:block;width:.85em;height:.85em}
.service-choices strong,.game-selector button{font-weight:650;letter-spacing:.005em}
.service-choices small{line-height:1.5}
.service-choices input:checked+span,.audience-options input:checked+span{box-shadow:inset 0 0 24px var(--scene-glow),0 0 0 1px var(--scene-accent)}
.game-selector button[aria-pressed="true"]{font-weight:700}
.project-brief textarea{font-family:inherit;line-height:1.6}
.icon-button svg{width:19px;height:19px}
.drawer-back{font-weight:600}
.drawer-back,.icon-button{min-width:44px;min-height:44px}
.store-card:hover,.store-card:focus-visible{border-color:var(--cyan)}
.store-card-info h4,.detail-heading h3,.detail-heading h1{font-weight:650}
.store-card-info p,.detail-description,.detail-features p,.offline-detail p{line-height:1.65}
.store-card-info div>span,.download-note,.app-facts>span,.detail-features p,.offline-detail p{font-size:12px}
.store-card-arrow{transition:transform .18s ease,background-color .18s ease}
.store-card:hover .store-card-arrow{transform:translate(2px,-2px)}
.theme-chooser select{cursor:pointer}
.header nav a{position:relative;padding-block:8px}
.header nav a:after{content:"";position:absolute;left:0;bottom:2px;width:100%;height:1px;background:var(--cyan);transform:scaleX(0);transform-origin:left;transition:transform .18s ease}
.header nav a:hover:after,.header nav a:focus-visible:after{transform:scaleX(1)}
.header .apps-grid{width:1em;height:1em;gap:.18em}
.header .apps-grid i{width:auto;height:auto;border-radius:1px}
.brief-actions button{display:inline-flex;align-items:center;justify-content:center;gap:.55em}
.brief-actions button svg{width:1.15em;height:1.15em;flex:none}
.standalone-details p{line-height:1.7}
@media(max-width:480px){
 .cinematic-home.preview-home .header nav{gap:6px;font-size:12px}
 .cinematic-home.preview-home .header nav a{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px}
 .cinematic-home.preview-home .header .apps-trigger{min-height:44px}
 .service-choices small{font-size:11px}
 .store-card-info p,.detail-heading p:last-child,.availability-list>div{font-size:12px}
 .app-facts>span,.download-note,.detail-features p,.offline-detail p{font-size:12px}
 .brief-actions button{min-height:44px}
}
@media(max-width:359px){
 .cinematic-home.preview-home .header{gap:8px}
 .cinematic-home.preview-home .header .brand{width:64px}
 .cinematic-home.preview-home .header nav{font-size:11px;gap:4px}
}
@media(prefers-reduced-motion:reduce){
 .header nav a,.header nav a:after,.apps-trigger,.cinematic-cta,.button,.brief-actions button,.icon-button,.drawer-back,.store-card,.game-selector button,.theme-chooser select,.store-card-arrow{transition:none}
 .store-card:hover .store-card-arrow{transform:none}
}


/* Specificity matches the existing cinematic and depth layers. */
.cinematic-home .cinematic-cta,
.depth-surface .button-primary{min-height:44px;border-radius:10px;box-shadow:inset 0 1px #ffffff70,0 5px 16px #0004;transition:transform .18s ease,box-shadow .18s ease,filter .18s ease,background-color .18s ease}
.cinematic-home .cinematic-cta:hover,
.depth-surface .button-primary:hover{transform:translateY(-2px);box-shadow:inset 0 1px #ffffff90,0 9px 20px #0006;filter:brightness(1.08)}
.cinematic-home .cinematic-cta:active,
.depth-surface .button-primary:active{transform:translateY(1px);box-shadow:inset 0 2px 5px #0003,0 2px 6px #0003}
.cinematic-home .cinematic-cta>span,
.depth-surface .button-primary>span{display:inline-flex;align-items:center;justify-content:center;flex:none;width:1.8em;height:1.8em;border:1px solid currentColor;border-radius:.45em;line-height:1}
.cinematic-home .cinematic-cta>span svg,
.depth-surface .button-primary>span svg{display:block;width:1em;height:1em}
.depth-surface .service-choices input:checked+span{box-shadow:inset 0 1px #ffffff3a,inset 0 0 24px var(--scene-glow),0 0 0 1px var(--scene-accent),0 5px 16px #0005}
.depth-surface .service-choices label:hover>span{border-color:var(--scene-accent)}
.depth-surface .drawer-back span{display:inline-flex;align-items:center;justify-content:center;width:1.8em;height:1.8em;border:1px solid currentColor;border-radius:.45em}
.depth-surface .drawer-back svg,.depth-surface .store-card-arrow svg{display:block;width:1em;height:1em}
.depth-surface .store-card:hover .store-card-arrow{transform:translate(2px,-2px)}
@media(prefers-reduced-motion:reduce){
 .cinematic-home .cinematic-cta,.depth-surface .button-primary,.depth-surface .store-card-arrow{transition:none}
 .cinematic-home .cinematic-cta:hover,.depth-surface .button-primary:hover,.depth-surface .store-card:hover .store-card-arrow{transform:none}
}

/* Keep copy on the empty wall, ending before the first server cabinet.
   Container-relative type follows the safe column, not the entire screen. */
@media(min-width:901px){
 .cinematic-home.experience-home .hero-copy{width:min(26vw,calc(40vw - 150px));max-width:none;container-type:inline-size}
 .cinematic-home.experience-home .hero h1{font-size:19cqw;line-height:1.06;letter-spacing:-.065em;text-wrap:initial}
 .cinematic-home.experience-home .hero-description{max-width:100%}
 .cinematic-home.experience-home .hero .eyebrow{max-width:100%;line-height:1.6}
 .cinematic-home .hero .eyebrow span{flex-shrink:0}
}
/* Narrow portrait views have no clear left wall: copy sits below the room.
   Reuse the existing phone composition; imagery and scene animation stay intact. */
@media(min-width:481px) and (max-width:900px) and (min-height:521px),
       (min-width:901px) and (max-aspect-ratio:4/3){
 .cinematic-home.experience-home .hero{display:block;padding:450px 24px 100px;min-height:820px}
 .cinematic-home.experience-home .hero-copy{width:min(100%,660px);max-width:660px;container-type:normal}
 .cinematic-home .hero .workspace-pan{inset:0 0 auto;width:100%;height:420px}
 .cinematic-home .light-breath{height:420px;bottom:auto}
 .cinematic-home .workspace-shade{background:linear-gradient(180deg,transparent 0,transparent 300px,#05090c 425px)}
 .cinematic-home.experience-home .hero h1{font-size:clamp(46px,6.5vw,72px)}
 .cinematic-home.experience-home .hero-description{font-size:18px;max-width:520px}
}
/* The existing short landscape composition already ends before its racks. */
@media(orientation:landscape) and (min-width:901px) and (max-width:1100px) and (max-height:520px){
 .cinematic-home.experience-home .hero-copy{width:44vw;max-width:44vw;container-type:normal}
 .cinematic-home.experience-home .hero h1{font-size:clamp(36px,5.4vw,48px)}
}