/* the visitor is already applying, so the membership nav's "Join CICM" button is hidden on this page */
.mh-nav__join{display:none!important}

/* band: the rejoin pages' split (dark teal, lighter teal corner bottom right), full screen width */
.ap{position:relative;isolation:isolate}
.ap-hero.mh-section{padding:clamp(40px,6vw,64px) 0 128px}
.ap-hero::before{content:"";position:absolute;top:0;bottom:0;left:50%;transform:translateX(-50%);width:calc(100vw + 2px);z-index:-1;background:linear-gradient(to bottom right,#013040 72%,#04637f 72%)}
.ap-hero__inner{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:20px 40px}
.ap-hero__copy{flex:1 1 480px;display:flex;flex-direction:column;gap:12px;max-width:720px}
.ap-hero h1{margin:0;color:#fff;text-wrap:balance}
.ap-hero .mh-lead{color:#c9d6dc;max-width:58ch}

/* Call us: white pill, top right of the band (under the copy on phones) */
.ap-call{display:inline-flex;align-items:center;gap:8px;flex:0 0 auto;padding:11px 20px;border:0;border-radius:100px;background:#fff;color:#002d3c!important;font-weight:700;text-decoration:none!important;white-space:nowrap;cursor:pointer}
.ap-call:hover,.ap-call:focus-visible{background:#e8f1f4}
.ap-call svg{width:16px;height:16px;flex:none}
@media (max-width:599px){.ap-call__num{display:none}}
/* the band's contact buttons: Call us, with Email us under it (same width on desktop; side by side on phones) */
.ap-contact{display:flex;flex-direction:column;align-items:stretch;gap:10px;flex:0 0 auto}
.ap-contact .ap-call{justify-content:center}
.ap-email{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 20px;border:2px solid rgba(255,255,255,.75);border-radius:100px;background:transparent;color:#fff!important;font-weight:700;text-decoration:none!important;white-space:nowrap}
.ap-email:hover,.ap-email:focus-visible{border-color:#fff;background:rgba(255,255,255,.1)}
.ap-email svg{width:16px;height:16px;flex:none}
@media (max-width:767px){.ap-contact{flex-direction:row;flex-wrap:wrap;align-items:center}}

/* the card: white, pulled up over the band */
.ap-body.mh-section{padding:0 0 clamp(48px,7vw,80px)}
/* the form card on its own, centred, pulled up over the band; one call/email line under it */
.ap-layout{max-width:860px;margin:-88px auto 0}
.ap-layout>.ap-help{margin:32px 0 0;text-align:center;color:var(--color-neutral-60)}
.ap-card{min-width:0;margin:0;border:.5px solid rgba(255,255,255,.5);border-radius:16px;background:#fff;box-shadow:0 30px 60px -30px rgba(0,45,60,.45);overflow:hidden}
.ap-form{padding:22px}
.ap-form p{margin:0!important}
.ap-form iframe{display:block;width:100%!important;border:0}
@media (max-width:599px){.ap-form{padding:14px 6px}}

/* "You are applying for ..." strip at the top of the card: only shown when the address names a grade */
.ap-picked{display:none;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 20px;padding:16px 32px;background:var(--color-two-5,#e8f1f4);border-bottom:1px solid var(--color-neutral-20)}
.ap--graded .ap-picked{display:flex}
.ap-picked strong{color:var(--color-neutral-100)}
@media (max-width:599px){.ap-picked{padding:14px 16px}}

/* quick facts under the intro, on the band */
.ap-facts{display:flex;flex-wrap:wrap;gap:8px 24px;list-style:none;margin:6px 0 0;padding:0;color:#dbe7ec}
.ap-facts li{position:relative;margin:0;padding:0 0 0 26px}
.ap-facts li::before{content:"";position:absolute;left:3px;top:.35em;width:12px;height:7px;border-left:2px solid #7fc4d6;border-bottom:2px solid #7fc4d6;transform:rotate(-45deg)}

/* criteria rows (mh-crit, from membership.css) on the dark blue band (mh-section--blue), the same band as the grade
   comparison sections. The section heading goes light by itself; this restyles the rows: light dividers, white grade
   names (light teal when open or hovered), soft grey-blue lines, light teal ticks. "What to send" stays a white card,
   like the cards on the other dark bands, so its links and button keep their normal colours (!important because the
   band's own rule turns every link on it white). */
.mh-section--blue .mh-crit{--mh-line:rgba(255,255,255,.16)}
.mh-section--blue .mh-crit summary h3{color:#fff}
.mh-section--blue .mh-crit summary:hover h3,.mh-section--blue .mh-crit details[open] summary h3{color:#7fc4d6}
.mh-section--blue .mh-crit .mh-crit__sub{color:#c9d6dc}
.mh-section--blue .mh-crit summary::after{border-color:#c9d6dc}
.mh-section--blue .mh-crit details>.mh-crit__body{color:#fff}
.mh-section--blue .mh-crit__main h4{color:#fff}
.mh-section--blue .mh-crit__main p{color:#c9d6dc}
.mh-section--blue .mh-crit__main .mh-checks li{color:#e6eef1}
.mh-section--blue .mh-crit__main .mh-checks li::before{border-color:#7fc4d6}
.mh-section--blue .mh-crit__send{--mh-line:#d2d3d5;border-color:transparent;color:var(--color-neutral-100,#21262b);box-shadow:0 1px 2px rgba(0,0,0,.2),0 8px 24px rgba(0,0,0,.18)}
.mh-section--blue .mh-crit__send h4{color:var(--color-neutral-100,#21262b)}
.mh-section--blue .mh-crit__send .mh-link{color:var(--color-two-100,#00779a)!important}
.mh-section--blue .mh-crit__send .mh-link:hover{color:var(--color-two-110,#18506d)!important}

/* after you apply (timeline) + paying for it (panels) */
.ap-after{display:grid;grid-template-columns:minmax(0,1fr);gap:40px;align-items:start}
.ap-after__side{display:flex;flex-direction:column;gap:16px}
.ap-after__side .btn{align-self:flex-start;margin:6px 0 0}
.ap-after__side button.btn{font:inherit;font-weight:600;cursor:pointer}
@media (min-width:900px){
  .ap-after{grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:64px}
}

/* questions: title and help on the left, the questions on the right */
.ap-faq{display:grid;grid-template-columns:minmax(0,1fr);gap:28px;align-items:start}
.ap-faq>.mh-title{margin:0}
.ap-faq .ap-call{align-self:flex-start;margin-top:8px;background:var(--color-two-100,#00779a);color:#fff!important}
.ap-faq .ap-call:hover,.ap-faq .ap-call:focus-visible{background:var(--color-two-110,#18506d)}
@media (min-width:900px){
  .ap-faq{grid-template-columns:minmax(0,5fr) minmax(0,12fr);gap:64px}
  .ap-faq>.mh-title{position:sticky;top:140px}
}

/* closed dialog (Call us outside opening hours) */
dialog.ap-closed{box-sizing:border-box;width:calc(100% - 32px);max-width:420px;margin:auto;padding:28px;border:0;border-radius:16px;background:#fff;color:var(--color-neutral-100);box-shadow:0 24px 64px rgba(0,0,0,.35)}
dialog.ap-closed::backdrop{background:rgba(1,48,64,.7)}
dialog.ap-closed h2{margin:0 0 12px}
dialog.ap-closed p{margin:0 0 14px}
.ap-closed__row{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.ap-closed__row .btn{display:inline-flex;align-items:center;justify-content:center;width:auto;margin:0;text-decoration:none}
.ap-closed__row button.btn{font:inherit;font-weight:600;cursor:pointer}