/* pw54.css - membership page: the guarantee + review carousel, lifted from the
   location pages' pw53 with the section respaced for a white-on-white slot
   (hairline separator like the old quotes section). */
/* ---- guarantee + reviews: fills the old wash-menu slot ------------------- */
.gsec { padding: 84px 0 84px; }
.gsec .ggrid { display: grid; grid-template-columns: 1.12fr 0.88fr; gap: 64px; align-items: center; }
.gleft { display: grid; grid-template-columns: 172px 1fr; gap: 38px; align-items: center; }
.glogo { width: 172px; height: auto; display: block; }
.gchip { display: inline-flex; align-items: center; gap: 9px; margin-bottom: 16px; padding: 8px 16px 8px 13px; border-radius: 999px;
background: linear-gradient(180deg, #3fb2ec21, #3fb2ec0d); border: 1px solid #3fb2ec52;
box-shadow: 0 1px 0 #ffffffe6 inset, 0 14px 34px -20px #1878b88c;
font-family: var(--font-head); font-weight: 800; font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: #1878b8; }
/* the same spark that twinkles in the home page goal chip; keyframes are local
because pw50's copy may sit inside a media query */
.gchip .spk { width: 16px; height: 16px; flex: none; fill: #3fb2ec; animation: gtw 3.4s ease-in-out infinite; }
@keyframes gtw { 0%, 100% { opacity: .55; transform: scale(.86) rotate(0deg); } 50% { opacity: 1; transform: scale(1.08) rotate(18deg); } }
.gleft h2 { font-family: var(--font-head); font-weight: 800; letter-spacing: -0.02em; color: #17333d;
font-size: clamp(1.5rem, 2.1vw, 2.05rem); line-height: 1.14; margin-bottom: 14px; }
.gleft h2 .pc { background: linear-gradient(100deg, #1878b8 10%, #3fb2ec 55%, #7fd0f7 95%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.gleft p { font-size: 1.02rem; line-height: 1.7; color: #5a707a; max-width: 40ch; }
.gleft .lk { color: #1878b8; font-weight: 700; white-space: nowrap; border-bottom: 2px solid #3fb2ec73; padding-bottom: 1px; }
.gcar { position: relative; }
.cwin { overflow: hidden; border-radius: var(--r-big); background: #fff; border: 1px solid #12333e14; box-shadow: 0 16px 34px -22px #0d273159; }
.ctrack { display: flex; transition: transform .55s cubic-bezier(.2,.7,.3,1); }
.cslide { flex: 0 0 100%; min-width: 0; position: relative; padding: 32px 38px 30px; min-height: 300px; }
.cname { display: flex; align-items: center; gap: 8px; font-family: var(--font-head); font-weight: 800; font-size: 1.08rem; color: #17333d; }
.cname .vb { width: 18px; height: 18px; flex: none; }
.cmeta { font-size: 0.86rem; color: #7e939c; margin-top: 3px; }
.cst { color: #d99a2b; font-size: 1.42rem; letter-spacing: 4px; line-height: 1; margin: 16px 0 12px; }
.cpull { font-family: var(--font-head); font-weight: 700; font-size: 1.2rem; line-height: 1.3; color: #17333d; margin-bottom: 9px; }
.cbody { font-size: 0.95rem; line-height: 1.65; color: #5a707a; }
.cslide .gm { position: absolute; top: 30px; right: 34px; width: 21px; height: 21px; }
.cbtn { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 44px; height: 44px; border-radius: 50%;
border: 0; cursor: pointer; background: #fff; box-shadow: 0 6px 22px -6px #0d2731a6, 0 0 0 1px #12333e0f;
display: flex; align-items: center; justify-content: center; }
.cbtn svg { width: 16px; height: 16px; stroke: #17333d; stroke-width: 2.2; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.cbtn.cprev { left: -22px; } .cbtn.cnext { right: -22px; }
@media (max-width: 960px) {
.gsec { padding: 40px 0 64px; }
.gsec::before { margin-bottom: 40px; }
.gsec .ggrid { grid-template-columns: 1fr; gap: 44px; }
.gleft { grid-template-columns: 128px 1fr; gap: 26px; }
.glogo { width: 128px; }
}
@media (max-width: 640px) {
.gleft { grid-template-columns: 1fr; gap: 18px; }
.cslide { padding: 26px 24px; min-height: 0; }
.cslide .gm { top: 24px; right: 22px; }
.cbtn { width: 38px; height: 38px; }
.cbtn.cprev { left: -8px; } .cbtn.cnext { right: -8px; }
}
@media (prefers-reduced-motion: reduce) {
.ctrack { transition: none; }
.gchip .spk { animation: none; }
}

/* --- 2026-08-23 fixes (membership) ------------------------------------ */
/* Carousel arrows: pw55's hover/active transform replaced the -50% centring
   transform and made the arrow evade the cursor. Compose them instead. */
.gcar .cbtn:hover { transform: translateY(-50%) translateY(-1.5px); }
.gcar .cbtn:active { transform: translateY(-50%) translateY(1px); }
@media (prefers-reduced-motion: reduce) {
  .gcar .cbtn:hover, .gcar .cbtn:active { transform: translateY(-50%); }
}
/* Wash-benefit tooltips open to the RIGHT of the icon instead of covering
   the checklist below; last tier flips left; phones open ABOVE. */
.jt::after, .tier:last-child .jt::after { left: calc(100% + 10px); right: auto; top: 50%; bottom: auto; transform: translate(-4px, -50%); }
.jt:hover::after, .jt:focus::after, .jt:focus-visible::after { transform: translate(0, -50%); }
.tier:last-child .jt::after { left: auto; right: calc(100% + 10px); transform: translate(4px, -50%); }
.tier:last-child .jt:hover::after, .tier:last-child .jt:focus::after,
.tier:last-child .jt:focus-visible::after { transform: translate(0, -50%); }
@media (max-width: 640px) {
  .jt::after, .tier:last-child .jt::after { left: 50%; right: auto; top: auto; bottom: calc(100% + 9px); transform: translate(-50%, 4px); }
  .jt:hover::after, .jt:focus::after, .jt:focus-visible::after,
  .tier:last-child .jt:hover::after, .tier:last-child .jt:focus::after,
  .tier:last-child .jt:focus-visible::after { transform: translate(-50%, 0); }
}