/* WHS Apps ONE v7.8 Final Professional Design Polish
   Final controlled professional-polish layer, carried forward from v7.7.
   No approved copy, information architecture or product logic is changed.
   This layer corrects verified visual defects and equivalent component drift. */

/* =========================================================
   1. GLOBAL BUTTON SYSTEM — comparable actions are one family
   ========================================================= */
.v75-site .btn,
.v75-site button[type="submit"],
.v75-site input[type="submit"],
.v75-site .v71-footer-cta,
.v75-site .share-one-button,
.v75-site .tour-screen-button{
  min-height:48px!important;
  height:auto!important;
  padding:0 19px!important;
  border-radius:12px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:8px!important;
  font-size:13px!important;
  font-weight:820!important;
  line-height:1.2!important;
  text-align:center!important;
}
.v75-site .btn > span,
.v75-site .v71-footer-cta > span,
.v75-site .share-one-button > span{
  display:inline-flex!important;
  align-items:center!important;
  line-height:1!important;
}
.v75-site .v71-main-nav .nav-cta,
.v75-site.v68-premium-site .v71-main-nav .nav-cta{
  min-height:48px!important;
  height:48px!important;
  padding:0 19px!important;
  border-radius:12px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  line-height:1!important;
}
/* Repeated dark-surface CTAs use the approved Deep Green so white text remains strong. */
.v75-site .v71-footer-cta,
.v75-site .share-one-button,
.v75-site .tour-screen-button{
  background:var(--v75-deep)!important;
  color:#fff!important;
}

/* The homepage role CTA is a button, never a content card. */
.v75-site .organisation-outcomes-rule .btn{
  width:auto!important;
  min-width:248px!important;
  align-self:center!important;
  justify-self:end!important;
  padding-inline:20px!important;
}

/* =========================================================
   2. WORK CLEARANCE PHONE — restore integrated device treatment
   ========================================================= */
/* The approved transparent phone asset already contains the correct WHS Apps ONE lock-up.
   Remove the later decorative card so the device belongs to the section itself. */
.v75-site .wc-section .v73-phone-showcase,
.v75-site.v71-page-work-clearance .v73-phone-showcase{
  width:min(430px,100%)!important;
  max-width:430px!important;
  margin:0 auto!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
}
.v75-site .wc-section .v73-phone-showcase img,
.v75-site.v71-page-work-clearance .v73-phone-showcase img{
  display:block!important;
  width:100%!important;
  height:auto!important;
  margin:0 auto!important;
  filter:drop-shadow(0 30px 42px rgba(4,13,7,.26))!important;
}

/* =========================================================
   3. ICON CONTAINERS — geometric + optical centring
   ========================================================= */
.v75-site :is(.v73-icon,.v73-section-icon,.output-v12-icon,.share-one-mark){
  display:grid!important;
  place-items:center!important;
  align-content:center!important;
  justify-content:center!important;
}
.v75-site :is(.v73-icon,.v73-section-icon,.output-v12-icon,.share-one-mark) > svg{
  display:block!important;
  margin:auto!important;
  flex:none!important;
  transform-box:fill-box;
  transform-origin:center;
}
/* Optical corrections for asymmetric line-icons found in the site-wide rendered icon audit. */
.v75-site :is(.v73-icon,.v73-section-icon,.output-v12-icon) > svg.v77-optical-sparkle{transform:none!important}
.v75-site :is(.v73-icon,.v73-section-icon,.output-v12-icon) > svg.v77-optical-flag{transform:none!important}
.v75-site :is(.v73-icon,.v73-section-icon,.output-v12-icon) > svg.v77-optical-wrench{transform:none!important}
.v75-site :is(.v73-icon,.v73-section-icon,.output-v12-icon) > svg.v77-optical-chart{transform:none!important}
.v75-site :is(.v73-icon,.v73-section-icon,.output-v12-icon) > svg.v77-optical-question{transform:translateY(-.7px)!important}

/* =========================================================
   4. FAQ / ACCORDION SYSTEM — resolved component treatment
   ========================================================= */
/* Homepage expansion accordion: remove browser marker and use the established WHS Apps ONE control language. */
.v75-site .v58-coming-next{
  overflow:hidden!important;
  border:1px solid var(--v75-border)!important;
  border-radius:14px!important;
  background:#fff!important;
  box-shadow:none!important;
}
.v75-site .v58-coming-next summary{
  position:relative!important;
  list-style:none!important;
  padding:18px 58px 18px 20px!important;
  min-height:58px!important;
  display:flex!important;
  align-items:center!important;
  color:var(--v75-ink)!important;
  font-size:14px!important;
  font-weight:760!important;
  line-height:1.4!important;
  cursor:pointer!important;
}
.v75-site .v58-coming-next summary::-webkit-details-marker{display:none!important}
.v75-site .v58-coming-next summary::after{
  content:'+';
  position:absolute;
  right:18px;
  top:50%;
  transform:translateY(-50%);
  width:28px;
  height:28px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:var(--v75-mist);
  color:var(--v75-deep);
  font-size:20px;
  font-weight:700;
  line-height:1;
}
.v75-site .v58-coming-next[open] summary::after{content:'–'}
.v75-site .v58-coming-next summary:focus-visible{
  outline:2px solid var(--v75-green)!important;
  outline-offset:-3px!important;
  border-radius:12px!important;
}
.v75-site .v58-coming-next p{
  margin:0!important;
  padding:0 20px 20px!important;
  color:var(--v75-muted)!important;
  font-size:13px!important;
  line-height:1.62!important;
}

/* Role FAQs previously retained a bare row treatment. Use the same restrained rounded-card language as the strongest FAQ components. */
.v75-site .faq-accordion{
  border-top:0!important;
  display:grid!important;
  gap:9px!important;
}
.v75-site .faq-accordion details{
  overflow:hidden!important;
  border:1px solid var(--v75-border)!important;
  border-radius:13px!important;
  background:#fff!important;
  padding:0!important;
  margin:0!important;
}
.v75-site .faq-accordion summary{
  min-height:50px!important;
  display:flex!important;
  align-items:center!important;
  padding:14px 48px 14px 15px!important;
  font-size:13px!important;
  line-height:1.42!important;
}
.v75-site .faq-accordion summary::after{
  right:13px!important;
  top:50%!important;
  transform:translateY(-50%)!important;
  width:26px!important;
  height:26px!important;
}
.v75-site .faq-accordion summary:focus-visible{
  outline:2px solid var(--v75-green)!important;
  outline-offset:-3px!important;
  border-radius:11px!important;
}
.v75-site .faq-accordion details p{
  margin:0!important;
  padding:0 15px 15px!important;
  color:var(--v75-muted)!important;
  line-height:1.62!important;
}
.v75-site .faq-accordion details ul{
  margin:0!important;
  padding:0 30px 15px 34px!important;
  color:var(--v75-muted)!important;
}

/* =========================================================
   5. SHARE ONE — dark-section contrast restored
   ========================================================= */
.v75-site .share-one-wrap .share-one-copy :is(h2,h3,strong){color:#fff!important}
.v75-site .share-one-wrap .share-one-copy p{color:#C8D5CB!important}
.v75-site .share-one-wrap .share-one-copy :is(small,.eyebrow-simple){color:#B7DD99!important}
.v75-site .share-one-wrap .share-one-hint{color:#B8C6BB!important}

/* =========================================================
   6. CONTEXT INTELLIGENCE — compact process, not giant one-word boxes
   ========================================================= */
.v75-site .ci-mini-flow{
  display:flex!important;
  flex-wrap:nowrap!important;
  align-items:center!important;
  justify-content:center!important;
  gap:10px!important;
  width:100%!important;
  margin:26px auto 0!important;
}
.v75-site .ci-mini-flow > span{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:auto!important;
  min-width:0!important;
  max-width:none!important;
  min-height:46px!important;
  height:auto!important;
  flex:0 1 auto!important;
  margin:0!important;
  padding:0 17px!important;
  border:1px solid var(--v75-border)!important;
  border-radius:999px!important;
  background:#fff!important;
  box-shadow:0 6px 18px rgba(15,28,19,.035)!important;
  color:var(--v75-ink)!important;
  font-size:13px!important;
  font-weight:780!important;
  line-height:1.25!important;
  text-align:center!important;
  white-space:nowrap!important;
}
.v75-site .ci-mini-flow > b{
  display:grid!important;
  place-items:center!important;
  width:28px!important;
  min-width:28px!important;
  height:28px!important;
  margin:0!important;
  padding:0!important;
  flex:0 0 28px!important;
  border:0!important;
  border-radius:50%!important;
  background:var(--v75-mist)!important;
  color:var(--v75-deep)!important;
  font-size:15px!important;
  font-weight:800!important;
  line-height:1!important;
}

/* =========================================================
   7. RESPONSIVE ACCEPTANCE
   ========================================================= */
@media (max-width:980px){
  .v75-site .organisation-outcomes-rule .btn{
    justify-self:start!important;
  }
  .v75-site .ci-mini-flow{
    flex-wrap:wrap!important;
    row-gap:10px!important;
  }
}

@media (max-width:820px){
  .v75-site .v71-main-nav .nav-cta,
  .v75-site.v68-premium-site .v71-main-nav .nav-cta{
    min-height:48px!important;
    height:48px!important;
    padding:0 16px!important;
  }
  .v75-site .organisation-outcomes-rule .btn{
    width:100%!important;
    min-width:0!important;
    justify-self:stretch!important;
  }
  .v75-site .wc-section .v73-phone-showcase,
  .v75-site.v71-page-work-clearance .v73-phone-showcase{
    max-width:370px!important;
  }
  .v75-site .ci-mini-flow{
    display:grid!important;
    grid-template-columns:minmax(0,320px)!important;
    justify-content:center!important;
    gap:7px!important;
    max-width:360px!important;
  }
  .v75-site .ci-mini-flow > span{
    width:100%!important;
    min-height:44px!important;
    white-space:normal!important;
    padding:0 16px!important;
  }
  .v75-site .ci-mini-flow > b{
    justify-self:center!important;
    transform:rotate(90deg)!important;
  }
}

@media (max-width:560px){
  .v75-site .btn,
  .v75-site button[type="submit"],
  .v75-site input[type="submit"],
  .v75-site .v71-footer-cta,
  .v75-site .share-one-button,
  .v75-site .tour-screen-button{
    min-height:48px!important;
    padding-inline:16px!important;
  }
  .v75-site .wc-section .v73-phone-showcase,
  .v75-site.v71-page-work-clearance .v73-phone-showcase{
    max-width:330px!important;
  }
  .v75-site .v58-coming-next summary{
    padding:16px 54px 16px 16px!important;
  }
  .v75-site .v58-coming-next summary::after{right:14px!important}
  .v75-site .v58-coming-next p{padding:0 16px 17px!important}
  .v75-site .faq-accordion summary{padding-left:13px!important}
  .v75-site .faq-accordion details p{padding-inline:13px!important}
}

/* Final component-specific button normalization found in the cross-page metric pass. */
body.v75-site.v68-premium-site .btn,
body.v75-site.v68-premium-site .v68-button{
  min-height:48px!important;
}
body.v75-site.v68-premium-site.v71-page-pricing .btn,
body.v75-site.v68-premium-site.v71-page-pricing .v68-button{
  min-height:48px!important;
}
.v75-site .ask-one-page-input-row .btn{
  min-height:48px!important;
  height:48px!important;
  align-self:center!important;
}


/* =========================================================
   8. V7.8 BRAND CONSISTENCY — exact approved logo in phone UI
   ========================================================= */
.v75-site .wc-section .v73-phone-showcase,
.v75-site.v71-page-work-clearance .v73-phone-showcase{
  position:relative!important;
}
/* Reuse the exact approved header logo asset. The approved logo image itself
   overlays the outdated baked-in mark without changing the device composition. */
/* White repair field removes the older baked-in logo before the approved asset is placed. */
.v75-site .wc-section .v73-phone-showcase::before,
.v75-site.v71-page-work-clearance .v73-phone-showcase::before{
  content:"";
  position:absolute;
  z-index:1;
  left:16.6%;
  top:11.9%;
  width:46%;
  height:9.4%;
  background:#fff;
  pointer-events:none;
}
.v75-site .wc-section .v73-phone-showcase .v78-phone-brand,
.v75-site.v71-page-work-clearance .v73-phone-showcase .v78-phone-brand{
  position:absolute!important;
  z-index:2!important;
  left:17.75%!important;
  top:12.55%!important;
  width:42.5%!important;
  height:auto!important;
  margin:0!important;
  padding:0!important;
  background:#fff!important;
  filter:none!important;
  box-shadow:none!important;
  pointer-events:none!important;
}

/* =========================================================
   9. MULTI-CARD INTERNAL GRID — align comparable title starts
   ========================================================= */
/* Three-card topic rows: reserve the visual/icon row even where one card
   intentionally has no icon. Approved copy and icon count remain unchanged. */
.v75-site .topic-three > article{
  display:grid!important;
  grid-template-rows:54px auto auto 1fr!important;
  align-content:start!important;
}
.v75-site .topic-three > article > .v73-icon{grid-row:1!important;align-self:start!important}
.v75-site .topic-three > article > small{grid-row:2!important;align-self:start!important}
.v75-site .topic-three > article > h3{grid-row:3!important;align-self:start!important}
.v75-site .topic-three > article > p{grid-row:4!important;align-self:start!important}

/* Numbered multi-card sequences: preserve a dedicated icon row so cards
   without an icon do not pull their title upward. */
.v75-site .evidence-sequence > article,
.v75-site .ci-join-steps > article{
  display:grid!important;
  grid-template-rows:auto 54px auto auto 1fr!important;
  align-content:start!important;
}
.v75-site .evidence-sequence > article > span:first-child:not(.v73-icon),
.v75-site .ci-join-steps > article > span:first-child:not(.v73-icon){grid-row:1!important;align-self:start!important}
.v75-site .evidence-sequence > article > .v73-icon,
.v75-site .ci-join-steps > article > .v73-icon{grid-row:2!important;align-self:start!important}
.v75-site .evidence-sequence > article > small,
.v75-site .ci-join-steps > article > small{grid-row:3!important;align-self:start!important}
.v75-site .evidence-sequence > article > h3,
.v75-site .ci-join-steps > article > h3{grid-row:4!important;align-self:start!important}
.v75-site .evidence-sequence > article > p,
.v75-site .ci-join-steps > article > p{grid-row:5!important;align-self:start!important}

/* Where eyebrow length varies, reserve the same two-line label zone so the
   heading row begins at a consistent visual height across the composition. */
.v75-site .people-guide-grid > article > small,
.v75-site .authority-control-grid > article > small{
  min-height:2.7em!important;
  display:flex!important;
  align-items:flex-start!important;
}

/* =========================================================
   10. OPTICAL ICON FINISH — visible drawing, not only SVG box, is centred
   ========================================================= */
.v75-site .pricing-v65-utility-grid > article:first-child .pricing-v65-utility-icon > svg{
  transform:translateY(-1.35px)!important;
  transform-origin:center!important;
}

/* =========================================================
   11. PROCESS-SEQUENCE MICRO-ALIGNMENT
   ========================================================= */
.v75-site .ci-mini-flow{
  margin-top:28px!important;
  margin-bottom:4px!important;
  gap:9px!important;
}
.v75-site .ci-mini-flow > span{
  min-height:46px!important;
  line-height:1.15!important;
}
.v75-site .ci-mini-flow > b{
  width:30px!important;
  height:30px!important;
  display:grid!important;
  place-items:center!important;
  line-height:1!important;
  padding:0!important;
}

/* =========================================================
   12. HEADER BRAND GOVERNANCE
   ========================================================= */
.v75-site .v71-brand img{
  width:112px!important;
  height:auto!important;
  max-height:none!important;
  display:block!important;
}

/* =========================================================
   13. RESPONSIVE INTERNAL-GRID RESET
   ========================================================= */
@media(max-width:820px){
  .v75-site .topic-three > article,
  .v75-site .evidence-sequence > article,
  .v75-site .ci-join-steps > article{
    display:flex!important;
    flex-direction:column!important;
  }
  .v75-site .people-guide-grid > article > small,
  .v75-site .authority-control-grid > article > small{
    min-height:0!important;
  }
  .v75-site .ci-mini-flow{margin-top:24px!important;margin-bottom:2px!important}
}

/* V7.8 final contrast correction: summary supporting text must follow its surface. */
.summary-line:not(.dark) .summary-reason{
  color:#657269;
}
.summary-line.dark .summary-reason{
  color:#c5d0c8;
}

/* V7.8 final multi-card process alignment: preserve the larger central ONE visual
   while reserving a common visual row so all three headings begin together. */
@media (min-width:821px){
  .readiness-v15-step{
    display:grid!important;
    grid-template-rows:auto 110px auto 1fr auto;
    align-content:start;
  }
  .readiness-v15-step .readiness-v15-icon,
  .readiness-v15-step .readiness-v15-one{
    margin:0!important;
    align-self:center;
    justify-self:start;
  }
  .readiness-v15-step h3{align-self:start}
  .readiness-v15-step p{align-self:start}
  .readiness-v15-step .readiness-v15-mini{margin-top:0!important;align-self:end}
}
@media (min-width:821px){
  .v75-site .readiness-v15-step{
    display:grid!important;
    grid-template-rows:auto 110px auto 1fr auto!important;
    align-content:start!important;
  }
  .v75-site .readiness-v15-step .readiness-v15-icon,
  .v75-site .readiness-v15-step .readiness-v15-one{
    margin:0!important;
    align-self:center!important;
    justify-self:start!important;
  }
  .v75-site .readiness-v15-step h3{margin-top:0!important;align-self:start!important}
  .v75-site .readiness-v15-step p{margin-top:0!important;align-self:start!important}
  .v75-site .readiness-v15-step .readiness-v15-mini{margin-top:0!important;align-self:end!important}
}
@media (min-width:821px){
  body.v75-site .readiness-v15-step.v68-card{
    display:grid!important;
    grid-template-rows:auto 110px auto 1fr auto!important;
    align-content:start!important;
  }
}