/* ChaloKaamPe R143 — main public website responsive alignment layer.
   Loaded last for signed-out/public pages so legacy page-specific CSS cannot
   reintroduce wide branding, missing mobile navigation or viewport overflow. */

body.role-public{
  overflow-x:clip!important;
}
body.role-public>.topbar{
  width:100%!important;
  max-width:none!important;
  min-width:0!important;
  align-items:center!important;
}
body.role-public>.topbar>*{min-width:0}
body.role-public>.topbar .brand{
  display:flex!important;
  align-items:center!important;
  gap:10px!important;
  min-width:0!important;
  max-width:min(480px,48vw)!important;
  overflow:visible!important;
}
body.role-public>.topbar .brand .public-brand-mark{
  display:grid!important;
  place-items:center!important;
  width:44px!important;
  min-width:44px!important;
  max-width:44px!important;
  height:44px!important;
  flex:0 0 44px!important;
  padding:0!important;
  border:0!important;
  border-radius:13px!important;
  overflow:hidden!important;
  background:#fff!important;
  box-shadow:0 7px 22px rgba(15,23,42,.09)!important;
}
body.role-public>.topbar .brand .public-brand-mark img{
  display:block!important;
  width:40px!important;
  height:40px!important;
  max-width:100%!important;
  max-height:100%!important;
  object-fit:contain!important;
  object-position:center!important;
}
body.role-public>.topbar .brand-copy{display:block!important;min-width:0!important;overflow:hidden!important}
body.role-public>.topbar .brand-copy strong{
  display:block!important;
  color:#111827!important;
  font-size:18px!important;
  line-height:1.12!important;
  letter-spacing:-.3px!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}
body.role-public>.topbar .brand-copy small{
  display:block!important;
  margin-top:2px!important;
  max-width:260px!important;
  color:#667085!important;
  font-size:10.5px!important;
  line-height:1.25!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}

body.public-home-body>.topbar .brand-copy strong{color:#fff!important}
body.public-home-body>.topbar .brand-copy small{color:#b9c9de!important}

/* Desktop/tablet navigation remains compact before switching to the menu. */
@media (max-width:1080px) and (min-width:821px){
  body.role-public>.topbar{padding-inline:16px!important;gap:10px!important}
  body.role-public>.topbar .brand{max-width:300px!important}
  body.role-public>.topbar .brand-copy small{display:none!important}
  body.role-public>.topbar .topnav{gap:5px!important}
  body.role-public>.topbar .topnav a{min-height:38px!important;padding:8px 11px!important;font-size:12px!important}
}

/* Real public mobile header. Previous code hid .topnav without rendering the
   public-mobile-nav markup, leaving the header incomplete on phones. */
.public-mobile-nav{display:none;position:relative;margin-left:auto;flex:0 0 auto;z-index:1100}
.public-mobile-nav>summary{
  list-style:none!important;
  width:40px!important;
  height:40px!important;
  display:grid!important;
  place-items:center!important;
  padding:0!important;
  border:1px solid #d9e1ea!important;
  border-radius:11px!important;
  background:#fff!important;
  color:#14213d!important;
  box-shadow:0 7px 22px rgba(15,23,42,.08)!important;
  font-size:20px!important;
  line-height:1!important;
  font-weight:900!important;
  cursor:pointer!important;
}
.public-mobile-nav>summary::-webkit-details-marker{display:none!important}
.public-mobile-nav[open]>summary{border-color:#aeb8ff!important;box-shadow:0 0 0 3px rgba(88,85,246,.10)!important}
.public-mobile-nav-panel{
  position:fixed!important;
  top:64px!important;
  left:10px!important;
  right:10px!important;
  width:auto!important;
  max-width:420px!important;
  max-height:calc(100dvh - 76px)!important;
  margin-left:auto!important;
  overflow:auto!important;
  padding:8px!important;
  border:1px solid #dce3ec!important;
  border-radius:16px!important;
  background:rgba(255,255,255,.98)!important;
  box-shadow:0 22px 65px rgba(15,23,42,.22)!important;
  backdrop-filter:blur(18px)!important;
}
.public-mobile-nav-panel a{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:100%!important;
  min-height:44px!important;
  padding:10px 12px!important;
  border-radius:11px!important;
  color:#172033!important;
  text-align:center!important;
  text-decoration:none!important;
  font-size:14px!important;
  font-weight:850!important;
}
.public-mobile-nav-panel a+a{margin-top:3px!important}
.public-mobile-nav-panel a:hover,.public-mobile-nav-panel a:focus-visible{background:#f2f5ff!important;color:#3730a3!important}
.public-mobile-nav-panel .public-mobile-primary{background:linear-gradient(135deg,#4f46e5,#2563eb 58%,#089f91)!important;color:#fff!important}

/* Global public content safety. */
body.role-public img,body.role-public svg,body.role-public video,body.role-public canvas{max-width:100%}
body.role-public main,body.role-public section,body.role-public article,body.role-public form,body.role-public .card{min-width:0}
body.role-public .container{width:min(100%,1180px)!important;margin-inline:auto!important}
body.role-public .grid,body.role-public .grid-2,body.role-public .grid-3,body.role-public .grid-4,
body.role-public .form-row{min-width:0}
body.role-public input,body.role-public select,body.role-public textarea,body.role-public button{max-width:100%}
body.role-public .table-wrap{max-width:100%!important;overflow-x:auto!important;-webkit-overflow-scrolling:touch}
body.role-public h1,body.role-public h2,body.role-public h3,body.role-public p{overflow-wrap:break-word}

@media(max-width:820px){
  body.role-public>.topbar{
    min-height:60px!important;
    padding:8px 12px!important;
    gap:8px!important;
    flex-wrap:nowrap!important;
    justify-content:space-between!important;
  }
  body.role-public>.topbar .brand{
    flex:1 1 auto!important;
    width:auto!important;
    max-width:calc(100% - 50px)!important;
    gap:9px!important;
  }
  body.role-public>.topbar .brand .public-brand-mark{
    width:40px!important;min-width:40px!important;max-width:40px!important;height:40px!important;flex-basis:40px!important;border-radius:12px!important;
  }
  body.role-public>.topbar .brand .public-brand-mark img{width:36px!important;height:36px!important}
  body.role-public>.topbar .brand-copy strong{font-size:15.5px!important;line-height:1.08!important}
  body.role-public>.topbar .brand-copy small{display:none!important}
  body.role-public>.topbar .topnav{display:none!important}
  body.role-public>.topbar .public-mobile-nav{display:block!important}

  body.role-public .container{
    width:100%!important;
    max-width:100%!important;
    padding:14px 14px 72px!important;
    margin:0 auto!important;
  }
  body.role-public .hero,
  body.role-public .grid-2,
  body.role-public .grid-3,
  body.role-public .grid-4,
  body.role-public .form-row{grid-template-columns:minmax(0,1fr)!important}
  body.role-public .section-title{
    align-items:center!important;
    text-align:center!important;
  }
  body.role-public .section-title .actions{justify-content:center!important;width:100%!important}
  body.role-public .hero>div:first-child{text-align:center!important;padding-inline:0!important}
  body.role-public .hero .actions{justify-content:center!important}
  body.role-public .hero-card,body.role-public .card{max-width:100%!important;margin-inline:auto!important}

  /* Secondary/legal/support pages should sit on the visual centre line. */
  body.public-secondary-body .public23-hero{
    grid-template-columns:minmax(0,1fr)!important;
    text-align:center!important;
    justify-items:center!important;
    gap:18px!important;
    padding:24px 18px!important;
  }
  body.public-secondary-body .public23-hero>div:first-child{max-width:680px!important;margin-inline:auto!important}
  body.public-secondary-body .public23-hero-graphic{margin-inline:auto!important}

  /* SEO and launch blocks cannot force desktop widths on mobile. */
  body.role-public .seo-registration-cta,
  body.role-public .seo-market-hero,
  body.role-public .ckp-growth-banner,
  body.role-public .ckp-zero-inventory{
    width:100%!important;
    max-width:100%!important;
    margin-left:auto!important;
    margin-right:auto!important;
  }
  body.role-public .seo-registration-cta{grid-template-columns:minmax(0,1fr)!important;text-align:center!important}
  body.role-public .seo-registration-action{width:100%!important;white-space:normal!important;text-align:center!important}
  body.role-public .seo-registration-cta ul{justify-content:center!important}
  body.role-public .ckp-growth-actions,body.role-public .ckp-zero-actions{justify-content:center!important;width:100%!important}

  body.role-public .footer{
    width:100%!important;
    max-width:100%!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;
    gap:12px!important;
    padding:24px 14px 32px!important;
    text-align:center!important;
  }
  body.role-public .footer-links{justify-content:center!important;margin-top:0!important}
}

/* Homepage: restore true mobile centering and contain decorative artwork. */
@media(max-width:650px){
  body.public-home-body>.container{width:100%!important;max-width:none!important;margin:0!important;padding:0!important}
  body.public-home-body .ckp-home-wrap{width:min(100% - 24px,560px)!important;margin-inline:auto!important}
  body.public-home-body .ckp-home-hero{min-height:0!important;padding:34px 0 48px!important;overflow:clip!important}
  body.public-home-body .ckp-home-hero-grid{grid-template-columns:minmax(0,1fr)!important;gap:22px!important;text-align:center!important}
  body.public-home-body .ckp-home-hero-copy{
    width:100%!important;
    max-width:620px!important;
    margin-inline:auto!important;
    padding:22px 16px 23px!important;
    align-items:center!important;
    text-align:center!important;
  }
  body.public-home-body .ckp-home-hero-copy .ckp-home-kicker{align-self:center!important;text-align:center!important}
  body.public-home-body .ckp-home-hero h1{
    max-width:100%!important;
    margin-inline:auto!important;
    font-size:clamp(36px,11vw,52px)!important;
    line-height:1.01!important;
    letter-spacing:-1.9px!important;
    text-align:center!important;
  }
  body.public-home-body .ckp-home-hero-lead,
  body.public-home-body .ckp-home-warning{max-width:100%!important;margin-left:auto!important;margin-right:auto!important;text-align:center!important}
  body.public-home-body .ckp-home-actions{display:grid!important;grid-template-columns:minmax(0,1fr)!important;width:100%!important;justify-content:center!important}
  body.public-home-body .ckp-home-actions .ckp-home-btn{width:100%!important;max-width:420px!important;margin-inline:auto!important}
  body.public-home-body .ckp-home-trust{width:100%!important;justify-content:center!important;text-align:center!important}
  body.public-home-body .ckp-home-trust span{justify-content:center!important}
  body.public-home-body .ckp-home-visual{
    width:100%!important;
    max-width:440px!important;
    min-height:460px!important;
    margin:10px auto 0!important;
    overflow:clip!important;
    transform:none!important;
  }
  body.public-home-body .ckp-home-phone{width:min(225px,67vw)!important;height:445px!important}
  body.public-home-body .ckp-home-float{min-width:118px!important;max-width:138px!important;padding:9px!important}
  body.public-home-body .ckp-home-float.one,body.public-home-body .ckp-home-float.three{left:0!important}
  body.public-home-body .ckp-home-float.two,body.public-home-body .ckp-home-float.four{right:0!important}
  body.public-home-body .ckp-home-heading{text-align:center!important}
  body.public-home-body .ckp-home-heading p{margin-left:auto!important;margin-right:auto!important}
  body.public-home-body .ckp-home-role-grid,
  body.public-home-body .ckp-home-step-grid,
  body.public-home-body .ckp-home-module-grid,
  body.public-home-body .ckp-home-jobs-grid,
  body.public-home-body .ckp-home-safety{grid-template-columns:minmax(0,1fr)!important}
  body.public-home-body .ckp-home-final-inner{flex-direction:column!important;align-items:center!important;text-align:center!important}
  body.public-home-body .ckp-home-final .ckp-home-actions{width:100%!important;justify-content:center!important}
}

@media(max-width:430px){
  body.role-public>.topbar{padding-inline:10px!important}
  body.role-public>.topbar .brand{max-width:calc(100% - 48px)!important}
  body.role-public>.topbar .brand .public-brand-mark{width:38px!important;min-width:38px!important;max-width:38px!important;height:38px!important;flex-basis:38px!important}
  body.role-public>.topbar .brand .public-brand-mark img{width:34px!important;height:34px!important}
  body.role-public>.topbar .brand-copy strong{font-size:15px!important}
  .public-mobile-nav>summary{width:38px!important;height:38px!important}
  .public-mobile-nav-panel{top:60px!important;left:8px!important;right:8px!important}
  body.role-public .container{padding-left:11px!important;padding-right:11px!important}
  body.public-home-body .ckp-home-wrap{width:min(100% - 20px,430px)!important}
  body.public-home-body .ckp-home-hero-copy{padding:20px 13px 21px!important;border-radius:20px!important}
  body.public-home-body .ckp-home-hero h1{font-size:clamp(34px,10.7vw,46px)!important;letter-spacing:-1.5px!important}
  body.public-home-body .ckp-home-trust{grid-template-columns:minmax(0,1fr)!important}
  body.public-home-body .ckp-home-visual{min-height:430px!important}
  body.public-home-body .ckp-home-phone{width:min(210px,65vw)!important;height:418px!important}
  body.public-home-body .ckp-home-float{min-width:106px!important;max-width:124px!important;transform:scale(.92)!important}
  body.public-home-body .ckp-home-metrics{grid-template-columns:minmax(0,1fr)!important}
  body.public-home-body .ckp-home-metric{border-left:0!important;border-top:1px solid #e6eef3!important;text-align:center!important}
  body.public-home-body .ckp-home-metric:first-child{border-top:0!important}
}

@media(min-width:821px){.public-mobile-nav{display:none!important}}
