/* ============================================================
   iCHARLES V6.0.4 — VISUAL-QA HARDENING
   Second automated screenshot pass:
   - true mobile width containment
   - stronger light-theme outlined text
   - 1024 Try Apps / Work composition
   Locked Iko identity unchanged.
   ============================================================ */

/* LIGHT THEME: secondary outline typography must remain intentionally visible. */
html[data-ui-theme="light"] body.v60-ghostops .hero h1 span,
html[data-ui-theme="light"] body.v60-ghostops .section-title span,
html[data-ui-theme="light"] body.v60-ghostops .v45-services-hero h1 span,
html[data-ui-theme="light"] body.v60-ghostops .try-hero h1 em,
html[data-ui-theme="light"] body.v60-ghostops .studio-intro h1 em,
html[data-ui-theme="light"] body.v60-ghostops .after-wizard h2 em{
  color:transparent!important;
  -webkit-text-stroke:1.15px rgba(18,67,101,.42)!important;
  opacity:1!important;
}

/* Light UI surfaces: preserve the Ghost Ops engineering-console definition. */
html[data-ui-theme="light"] body.v60-ghostops .v45-hero-proof,
html[data-ui-theme="light"] body.v60-ghostops .live-app-note,
html[data-ui-theme="light"] body.v60-ghostops .studio-intro-map,
html[data-ui-theme="light"] body.v60-ghostops .identity-panel,
html[data-ui-theme="light"] body.v60-ghostops .terminal,
html[data-ui-theme="light"] body.v60-ghostops .privacy-grid,
html[data-ui-theme="light"] body.v60-ghostops .sent-box,
html[data-ui-theme="light"] body.v60-ghostops .v48-sent-box{
  background:rgba(255,255,255,.92)!important;
  border-color:rgba(24,127,188,.27)!important;
}
html[data-ui-theme="light"] body.v60-ghostops .v45-proof-line,
html[data-ui-theme="light"] body.v60-ghostops .story section,
html[data-ui-theme="light"] body.v60-ghostops .identity-top,
html[data-ui-theme="light"] body.v60-ghostops .identity-bottom{
  border-color:rgba(24,127,188,.18)!important;
}

/* 1024-class layouts: keep visual identity beside the primary copy.
   The QA screenshots showed both Try Apps and Work pushing Iko below the fold. */
@media(min-width:900px) and (max-width:1050px){
  body.v60-ghostops .live-app-hero{
    grid-template-columns:minmax(0,1fr) minmax(340px,.78fr)!important;
    gap:28px!important;
    align-items:center!important;
    padding:54px 0 66px!important;
  }
  body.v60-ghostops .try-hero h1{
    font-size:clamp(54px,6vw,66px)!important;
    line-height:.86!important;
  }
  body.v60-ghostops .try-hero p{
    font-size:15px!important;
  }
  body.v60-ghostops .live-orbit{
    height:470px!important;
  }
  body.v60-ghostops .live-orbit-ring.ring-c{
    width:410px!important;height:410px!important;
  }
  body.v60-ghostops .live-orbit-ring.ring-b{
    width:330px!important;height:330px!important;
  }
  body.v60-ghostops .live-orbit-ring.ring-a{
    width:250px!important;height:250px!important;
  }

  body.v60-ghostops .site-header + main .hero{
    grid-template-columns:minmax(0,.86fr) minmax(400px,1.14fr)!important;
    grid-template-rows:1fr!important;
    gap:28px!important;
    align-items:center!important;
    min-height:calc(100vh - 82px)!important;
    padding:42px 0 64px!important;
  }
  body.v60-ghostops .site-header + main .hero .hero-copy{
    grid-column:1!important;
    grid-row:1!important;
    align-self:center!important;
    margin:0!important;
    transform:none!important;
  }
  body.v60-ghostops .site-header + main .hero .hero-visual{
    grid-column:2!important;
    grid-row:1!important;
    align-self:center!important;
    min-height:520px!important;
    margin:0!important;
    transform:none!important;
  }
  body.v60-ghostops .site-header + main .hero .hero-copy h1{
    font-size:clamp(54px,6.5vw,68px)!important;
  }
  body.v60-ghostops .site-header + main .hero .hero-logo{
    width:min(47vw,480px)!important;
  }
}

/* MOBILE CONTAINMENT
   The second QA pack showed clipping was not only typography: several nested
   page shells were wider than the 390px viewport. Make every major public
   content system explicitly viewport-safe. */
@media(max-width:820px){
  body.v60-ghostops .shell,
  body.v60-ghostops .try-shell,
  body.v60-ghostops .studio-shell{
    width:calc(100vw - 24px)!important;
    max-width:calc(100vw - 24px)!important;
    margin-left:auto!important;
    margin-right:auto!important;
  }

  body.v60-ghostops .v45-services-main,
  body.v60-ghostops .v45-value-section,
  body.v60-ghostops .v45-project-strip{
    width:100%!important;
    max-width:100%!important;
    margin-left:auto!important;
    margin-right:auto!important;
  }

  body.v60-ghostops main,
  body.v60-ghostops main>*,
  body.v60-ghostops .hero,
  body.v60-ghostops .live-app-hero,
  body.v60-ghostops .studio-intro,
  body.v60-ghostops .studio-intro-copy,
  body.v60-ghostops .studio-intro-map,
  body.v60-ghostops .wizard-shell,
  body.v60-ghostops .wizard-topbar,
  body.v60-ghostops .wizard-main,
  body.v60-ghostops .wizard-steps,
  body.v60-ghostops .website-wizard,
  body.v60-ghostops .v45-services-hero,
  body.v60-ghostops .v45-services-hero>div,
  body.v60-ghostops .v45-hero-proof,
  body.v60-ghostops .v45-services-section,
  body.v60-ghostops .v45-section-head,
  body.v60-ghostops .v45-service-stack,
  body.v60-ghostops .v45-service,
  body.v60-ghostops .v45-process,
  body.v60-ghostops .v45-evidence,
  body.v60-ghostops .about-layout,
  body.v60-ghostops .identity-panel,
  body.v60-ghostops .story,
  body.v60-ghostops .contact-layout,
  body.v60-ghostops .contact-copy,
  body.v60-ghostops .terminal,
  body.v60-ghostops .v48-project-form,
  body.v60-ghostops .try-hero,
  body.v60-ghostops .live-orbit{
    min-width:0!important;
    width:100%!important;
    max-width:100%!important;
    box-sizing:border-box!important;
  }

  body.v60-ghostops .v45-services-hero,
  body.v60-ghostops .studio-intro,
  body.v60-ghostops .about-layout,
  body.v60-ghostops .contact-layout,
  body.v60-ghostops .live-app-hero{
    grid-template-columns:minmax(0,1fr)!important;
  }

  body.v60-ghostops .v45-section-head,
  body.v60-ghostops .v45-service,
  body.v60-ghostops .v45-process,
  body.v60-ghostops .v45-evidence,
  body.v60-ghostops .v45-start-grid,
  body.v60-ghostops .v45-contact-paths{
    grid-template-columns:minmax(0,1fr)!important;
  }

  body.v60-ghostops .intro-actions,
  body.v60-ghostops .v45-hero-actions,
  body.v60-ghostops .try-hero-actions{
    width:100%!important;
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    gap:10px!important;
  }
  body.v60-ghostops .intro-actions>*,
  body.v60-ghostops .v45-hero-actions>*,
  body.v60-ghostops .try-hero-actions>*{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    justify-content:space-between!important;
    box-sizing:border-box!important;
  }

  /* Long display headlines: readable and fully visible, never cropped. */
  body.v60-ghostops main h1,
  body.v60-ghostops .try-hero h1,
  body.v60-ghostops .studio-intro h1,
  body.v60-ghostops .v45-services-hero h1{
    font-size:clamp(38px,10.6vw,42px)!important;
    line-height:.91!important;
    letter-spacing:-.052em!important;
    width:100%!important;
    max-width:100%!important;
  }
  body.v60-ghostops-home .hero-copy h1{
    font-size:clamp(44px,12.2vw,50px)!important;
  }

  body.v60-ghostops main p,
  body.v60-ghostops main li,
  body.v60-ghostops main strong,
  body.v60-ghostops main span{
    max-width:100%;
  }

  body.v60-ghostops .v45-services-hero{
    padding:48px 0 52px!important;
  }
  body.v60-ghostops .studio-intro{
    min-height:auto!important;
    padding:48px 0 54px!important;
    gap:30px!important;
  }
  body.v60-ghostops .live-app-hero{
    padding:44px 0 54px!important;
    gap:28px!important;
  }

  /* Compact cards/forms should fit the real phone viewport. */
  body.v60-ghostops .studio-intro-map,
  body.v60-ghostops .v45-hero-proof,
  body.v60-ghostops .terminal,
  body.v60-ghostops .identity-panel,
  body.v60-ghostops .v48-project-form{
    padding-left:min(20px,5vw)!important;
    padding-right:min(20px,5vw)!important;
  }

  body.v60-ghostops .studio-intro-map article{
    grid-template-columns:42px minmax(0,1fr)!important;
    gap:12px!important;
  }
  body.v60-ghostops .studio-intro-map article>b{
    width:38px!important;height:38px!important;
  }

  /* Hide purely decorative page marks sooner on phones. */
  body.v60-ghostops .iko-v5-page-mark{
    display:none!important;
  }
}

/* Very narrow phones: one more safety reduction without changing desktop. */
@media(max-width:420px){
  body.v60-ghostops main h1,
  body.v60-ghostops .try-hero h1,
  body.v60-ghostops .studio-intro h1,
  body.v60-ghostops .v45-services-hero h1{
    font-size:40px!important;
  }
  body.v60-ghostops-home .hero-copy h1{
    font-size:46px!important;
  }
}