/* WHS Apps ONE v7.13 — Work Clearance readiness final visual refinement
   Presentation-only amendment. Approved public wording and product logic are unchanged. */

/* =========================================================
   Work Clearance readiness — one system, not eleven cards
   ========================================================= */
.v75-site.v71-page-work-clearance #ready-gates{
  padding-top:72px!important;
  padding-bottom:74px!important;
}
.v75-site.v71-page-work-clearance #ready-gates .shell{
  max-width:1080px!important;
}
.v75-site.v71-page-work-clearance #ready-gates .subpage-head{
  max-width:820px!important;
  margin:0 0 28px!important;
}
.v75-site.v71-page-work-clearance #ready-gates .subpage-head .eyebrow-simple{
  margin:0 0 11px!important;
}
.v75-site.v71-page-work-clearance #ready-gates .subpage-head h2{
  max-width:790px!important;
  font-size:clamp(36px,3.25vw,46px)!important;
  line-height:1.075!important;
  letter-spacing:-.038em!important;
}

/* The grid itself is now the single readiness panel. */
.v75-site.v71-page-work-clearance #ready-gates .v58-gate-grid{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  grid-template-rows:repeat(6,minmax(56px,auto))!important;
  grid-auto-flow:column!important;
  column-gap:0!important;
  row-gap:0!important;
  max-width:960px!important;
  margin:0 auto 28px!important;
  padding:10px 22px!important;
  border:1px solid #D6E2D2!important;
  border-radius:20px!important;
  background:#FFFFFF!important;
  box-shadow:0 14px 34px rgba(15,28,19,.055)!important;
  overflow:hidden!important;
}
.v75-site.v71-page-work-clearance #ready-gates .v58-gate-grid>span{
  position:static!important;
  display:flex!important;
  align-items:center!important;
  gap:12px!important;
  min-height:56px!important;
  padding:8px 18px!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  color:#172019!important;
  box-shadow:none!important;
}
/* Left column = first six items; right column = final five. */
.v75-site.v71-page-work-clearance #ready-gates .v58-gate-grid>span:nth-child(-n+6){
  border-right:1px solid #E3EBE0!important;
}
.v75-site.v71-page-work-clearance #ready-gates .v58-gate-grid>span:nth-child(-n+5),
.v75-site.v71-page-work-clearance #ready-gates .v58-gate-grid>span:nth-child(n+7):nth-child(-n+10){
  border-bottom:1px solid #E7EEE5!important;
}
.v75-site.v71-page-work-clearance #ready-gates .v58-gate-grid>span::before{content:none!important}
.v75-site.v71-page-work-clearance #ready-gates .v712-gate-check{
  flex:0 0 24px!important;
  width:24px!important;
  height:24px!important;
  min-height:0!important;
  display:grid!important;
  place-items:center!important;
  padding:0!important;
  border:1px solid #D0E2C9!important;
  border-radius:50%!important;
  background:#EDF6E9!important;
  color:#49771F!important;
  box-shadow:none!important;
}
.v75-site.v71-page-work-clearance #ready-gates .v712-gate-check svg{
  display:block!important;
  width:14px!important;
  height:14px!important;
  transform:translateY(-.2px)!important;
  overflow:visible!important;
  fill:none!important;
  stroke:currentColor!important;
  stroke-width:2.7!important;
  stroke-linecap:round!important;
  stroke-linejoin:round!important;
}
.v75-site.v71-page-work-clearance #ready-gates .v712-gate-label{
  min-height:0!important;
  width:auto!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  color:#172019!important;
  font-size:13.5px!important;
  font-weight:710!important;
  line-height:1.32!important;
}
.v75-site.v71-page-work-clearance #ready-gates .v712-gate-check::before,
.v75-site.v71-page-work-clearance #ready-gates .v712-gate-label::before{content:none!important}

/* Compact semantic progression: blocked state -> ready outcome. */
.v75-site.v71-page-work-clearance #ready-gates .v58-ready-example{
  max-width:960px!important;
  min-height:0!important;
  margin:0 auto!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) 44px minmax(240px,280px)!important;
  gap:18px!important;
  align-items:center!important;
  padding:22px 24px!important;
  border:1px solid rgba(255,255,255,.075)!important;
  border-radius:19px!important;
  background:#0F1C13!important;
  color:#FFFFFF!important;
  box-shadow:0 16px 38px rgba(15,28,19,.105)!important;
}
.v75-site.v71-page-work-clearance #ready-gates .v712-current-state{
  display:flex!important;
  flex-direction:column!important;
  justify-content:center!important;
  min-width:0!important;
}
.v75-site.v71-page-work-clearance #ready-gates .v712-current-state>strong{
  display:block!important;
  margin:0 0 10px!important;
  color:#FFFFFF!important;
  font-size:16.5px!important;
  line-height:1.24!important;
}
.v75-site.v71-page-work-clearance #ready-gates .v712-blocking-items{
  display:flex!important;
  flex-wrap:wrap!important;
  gap:8px!important;
}
.v75-site.v71-page-work-clearance #ready-gates .v712-blocking-items>span{
  display:inline-flex!important;
  align-items:center!important;
  width:auto!important;
  min-height:32px!important;
  padding:7px 10px!important;
  border:1px solid #E3BC61!important;
  border-radius:9px!important;
  background:#F4DB9C!important;
  color:#3E2C08!important;
  font-size:11.5px!important;
  font-weight:760!important;
  line-height:1.2!important;
  box-shadow:none!important;
}
.v75-site.v71-page-work-clearance #ready-gates .v712-ready-arrow{
  align-self:center!important;
  justify-self:center!important;
  width:38px!important;
  height:38px!important;
  display:grid!important;
  place-items:center!important;
  margin:0!important;
  border:1px solid rgba(157,218,108,.26)!important;
  border-radius:50%!important;
  background:rgba(109,179,47,.12)!important;
}
.v75-site.v71-page-work-clearance #ready-gates .v712-ready-arrow>b{
  display:block!important;
  color:#A8DC7C!important;
  font-size:21px!important;
  line-height:1!important;
  transform:translateY(-1px)!important;
}
/* READY TO WORK is an outcome/status, not a button. */
.v75-site.v71-page-work-clearance #ready-gates .v712-result-state{
  justify-self:end!important;
  width:100%!important;
  max-width:280px!important;
  min-height:64px!important;
  height:auto!important;
  display:grid!important;
  place-items:center!important;
  padding:14px 18px!important;
  border:1px solid #88C956!important;
  border-radius:14px!important;
  background:#8DCC5C!important;
  text-align:center!important;
  box-shadow:none!important;
}
.v75-site.v71-page-work-clearance #ready-gates .v712-result-state>strong{
  color:#10210D!important;
  font-size:18px!important;
  font-weight:820!important;
  line-height:1.1!important;
  letter-spacing:.005em!important;
}
.v75-site.v71-page-work-clearance #ready-gates .v712-result-state>strong::before{
  content:"✓"!important;
  display:inline-block!important;
  margin-right:8px!important;
  font-size:.92em!important;
  font-weight:900!important;
  transform:translateY(-.3px)!important;
}
.v75-site.v71-page-work-clearance #ready-gates .v58-center-rule{
  max-width:760px!important;
  margin:16px auto 0!important;
  color:#536159!important;
  font-size:13px!important;
  line-height:1.62!important;
}

@media(max-width:900px){
  .v75-site.v71-page-work-clearance #ready-gates{padding-top:64px!important;padding-bottom:66px!important}
  .v75-site.v71-page-work-clearance #ready-gates .subpage-head{margin-bottom:25px!important}
  .v75-site.v71-page-work-clearance #ready-gates .subpage-head h2{font-size:39px!important;max-width:740px!important}
  .v75-site.v71-page-work-clearance #ready-gates .v58-gate-grid,
  .v75-site.v71-page-work-clearance #ready-gates .v58-ready-example{max-width:900px!important}
  .v75-site.v71-page-work-clearance #ready-gates .v58-ready-example{
    grid-template-columns:minmax(0,1fr) 42px minmax(220px,260px)!important;
    gap:15px!important;
    padding:20px!important;
  }
}

@media(max-width:760px){
  .v75-site.v71-page-work-clearance #ready-gates .subpage-head{margin-bottom:23px!important}
  .v75-site.v71-page-work-clearance #ready-gates .subpage-head h2{font-size:33px!important;line-height:1.085!important}
  .v75-site.v71-page-work-clearance #ready-gates .v58-gate-grid{
    grid-template-columns:1fr!important;
    grid-template-rows:none!important;
    grid-auto-flow:row!important;
    padding:8px 16px!important;
    margin-bottom:24px!important;
  }
  .v75-site.v71-page-work-clearance #ready-gates .v58-gate-grid>span{
    min-height:54px!important;
    padding:8px 4px!important;
    border-right:0!important;
    border-bottom:1px solid #E7EEE5!important;
  }
  .v75-site.v71-page-work-clearance #ready-gates .v58-gate-grid>span:last-child{border-bottom:0!important}
  .v75-site.v71-page-work-clearance #ready-gates .v58-ready-example{
    grid-template-columns:1fr!important;
    gap:12px!important;
    padding:19px!important;
  }
  .v75-site.v71-page-work-clearance #ready-gates .v712-ready-arrow{
    transform:rotate(90deg)!important;
    margin:1px auto!important;
  }
  .v75-site.v71-page-work-clearance #ready-gates .v712-result-state{
    justify-self:stretch!important;
    width:100%!important;
    max-width:none!important;
    min-height:58px!important;
  }
  .v75-site.v71-page-work-clearance #ready-gates .v58-center-rule{
    max-width:none!important;
    margin-top:15px!important;
    text-align:left!important;
  }
}

@media(max-width:430px){
  .v75-site.v71-page-work-clearance #ready-gates{padding-top:56px!important;padding-bottom:58px!important}
  .v75-site.v71-page-work-clearance #ready-gates .subpage-head h2{font-size:30px!important}
  .v75-site.v71-page-work-clearance #ready-gates .v58-gate-grid{padding:7px 14px!important;border-radius:17px!important}
  .v75-site.v71-page-work-clearance #ready-gates .v58-gate-grid>span{min-height:52px!important}
  .v75-site.v71-page-work-clearance #ready-gates .v712-gate-label{font-size:13px!important}
  .v75-site.v71-page-work-clearance #ready-gates .v58-ready-example{padding:17px!important;border-radius:17px!important}
  .v75-site.v71-page-work-clearance #ready-gates .v712-blocking-items{display:grid!important;grid-template-columns:1fr!important}
  .v75-site.v71-page-work-clearance #ready-gates .v712-blocking-items>span{justify-content:center!important;text-align:center!important}
}

/* =========================================================
   Equivalent short-list pattern — grouped system treatment
   Applies only to the existing ci-saving-list component used on
   Context Intelligence and Savings Proof. No wording is changed.
   ========================================================= */
.v75-site .ci-saving-list{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:0!important;
  max-width:980px!important;
  margin-left:auto!important;
  margin-right:auto!important;
  padding:8px 20px!important;
  border:1px solid #D8E4D4!important;
  border-radius:18px!important;
  background:#FFFFFF!important;
  box-shadow:0 12px 30px rgba(15,28,19,.045)!important;
  overflow:hidden!important;
}
.v75-site .ci-saving-list>span{
  display:flex!important;
  align-items:center!important;
  min-height:50px!important;
  width:auto!important;
  padding:8px 14px!important;
  margin:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  color:#35443A!important;
  font-size:13.5px!important;
  font-weight:700!important;
  line-height:1.32!important;
}
.v75-site .ci-saving-list>span:nth-child(odd){border-right:1px solid #E5ECE2!important}
.v75-site .ci-saving-list>span:not(:nth-last-child(-n+2)){border-bottom:1px solid #E8EEE6!important}
@media(max-width:760px){
  .v75-site .ci-saving-list{
    grid-template-columns:1fr!important;
    padding:7px 14px!important;
    border-radius:17px!important;
  }
  .v75-site .ci-saving-list>span{
    min-height:49px!important;
    padding:8px 4px!important;
    border-right:0!important;
    border-bottom:1px solid #E8EEE6!important;
    font-size:13px!important;
  }
  .v75-site .ci-saving-list>span:last-child{border-bottom:0!important}
}

/* Final corrective specificity for the Work Clearance check circles.
   v7.12 included a more specific child selector, so match it here to
   preserve both geometric and optical centring. */
.v75-site.v71-page-work-clearance #ready-gates .v58-gate-grid>span .v712-gate-check{
  flex:0 0 24px!important;
  width:24px!important;
  height:24px!important;
  min-height:0!important;
  display:grid!important;
  place-items:center!important;
  align-items:center!important;
  justify-items:center!important;
  justify-content:center!important;
  padding:0!important;
  border:1px solid #D0E2C9!important;
  border-radius:50%!important;
  background:#EDF6E9!important;
  color:#49771F!important;
  box-shadow:none!important;
}
.v75-site.v71-page-work-clearance #ready-gates .v58-gate-grid>span .v712-gate-check svg{
  display:block!important;
  width:14px!important;
  height:14px!important;
  margin:0!important;
  transform:translateY(-.2px)!important;
}

/* Reset legacy grid placement from earlier readiness prototypes. Without this,
   the three semantic states create empty implicit rows and unnecessary height. */
.v75-site.v71-page-work-clearance #ready-gates .v58-ready-example>.v712-current-state,
.v75-site.v71-page-work-clearance #ready-gates .v58-ready-example>.v712-ready-arrow,
.v75-site.v71-page-work-clearance #ready-gates .v58-ready-example>.v712-result-state{
  grid-row:auto!important;
  grid-column:auto!important;
}
.v75-site.v71-page-work-clearance #ready-gates .v58-ready-example{
  grid-template-rows:auto!important;
}