/* Waypoint engagement components. Mapped to the theme's existing CSS variables
   (single source of truth) with the handoff hexes as fallbacks. */
:root {
  --wp-navy: var(--color-atlantic-deep, #0E4A5A);
  --wp-red: var(--color-lighthouse-red, #A63A2B);
  --wp-sand: var(--color-sunlit-sand, #F6EFE2);
  --wp-leaf: var(--color-leaf-renewal, #3F7D5C);
  --wp-ink: var(--color-inlet-ink, #1c2a2f);
  --wp-line: #dcd7cb;
  --wp-muted: #5f6b6e;
  --wp-radius: var(--card-radius, 10px);
}
.wp-comp *{box-sizing:border-box}

/* Scroll reveal (opt-in via .wp-reveal) */
.wp-reveal{opacity:0;transform:translateY(14px);transition:opacity .6s ease,transform .6s ease}
.wp-reveal.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .wp-reveal{opacity:1;transform:none;transition:none}
}

/* Service explorer */
.wp-exp{max-width:960px;margin:0 auto}
.wp-exp__tabs{display:flex;flex-wrap:wrap;gap:8px}
.wp-exp__tab{border:1px solid var(--wp-line);background:#fff;color:var(--wp-ink);
  border-radius:var(--wp-radius);padding:10px 14px;font-size:15px;cursor:pointer;
  display:inline-flex;align-items:center;gap:8px;line-height:1.2}
.wp-exp__tab[aria-selected="true"]{background:var(--wp-navy);color:#fff;border-color:var(--wp-navy)}
.wp-exp__tab:focus-visible{outline:2px solid var(--wp-red);outline-offset:2px}
.wp-exp__panel{margin-top:18px}
.wp-exp__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;margin-top:16px}
.wp-exp__cell{background:var(--wp-sand);border-radius:var(--wp-radius);padding:14px 16px}
.wp-exp__k{font-size:13px;color:var(--wp-muted);margin:0 0 6px;text-transform:none}
.wp-exp__v{font-size:16px;color:var(--wp-ink);margin:0;line-height:1.6}
.wp-exp__limit{border-left:4px solid var(--wp-red);background:var(--wp-sand);
  border-radius:0;padding:14px 16px;margin-top:14px}
.wp-exp__cta{margin-top:18px;display:inline-flex;align-items:center;gap:8px;
  background:var(--wp-red);color:#fff;border:none;border-radius:var(--wp-radius);
  padding:12px 18px;font-size:15px;cursor:pointer;text-decoration:none}

/* Plan stepper */
.wp-step{max-width:960px;margin:0 auto}
.wp-step__track{display:flex;gap:0;position:relative}
.wp-step__btn{flex:1;background:none;border:none;cursor:pointer;padding:0 0 14px;text-align:center;
  position:relative;color:var(--wp-muted);font-size:14px}
.wp-step__btn::before{content:"";position:absolute;top:9px;left:0;right:0;height:2px;background:var(--wp-line)}
.wp-step__dot{width:20px;height:20px;border-radius:50%;background:#fff;border:2px solid var(--wp-line);
  margin:0 auto 10px;position:relative;z-index:1}
.wp-step__btn[aria-selected="true"]{color:var(--wp-navy);font-weight:500}
.wp-step__btn[aria-selected="true"] .wp-step__dot{background:var(--wp-navy);border-color:var(--wp-navy)}
.wp-step__body{background:var(--wp-sand);border-radius:var(--wp-radius);padding:20px 22px;margin-top:6px}
.wp-step__body h3{margin:0 0 6px;color:var(--wp-navy)}
.wp-step__body p{margin:0;color:var(--wp-ink);line-height:1.6}

/* Comparison */
.wp-comp{max-width:820px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:0;
  border:1px solid var(--wp-line);border-radius:var(--wp-radius);overflow:hidden}
.wp-comp__head{padding:14px 16px;font-weight:500}
.wp-comp__head--a{background:#fff;color:var(--wp-ink)}
.wp-comp__head--b{background:var(--wp-navy);color:#fff}
.wp-comp__row{padding:12px 16px;border-top:1px solid var(--wp-line);font-size:15px;line-height:1.5}
.wp-comp__row--a{background:#fff;color:var(--wp-muted)}
.wp-comp__row--b{background:var(--wp-sand);color:var(--wp-ink)}
@media (max-width:640px){.wp-comp{grid-template-columns:1fr}.wp-comp__head--a,.wp-comp__row--a{display:none}}

/* FAQ */
.wp-faq{max-width:760px;margin:0 auto}
.wp-faq__item{border-bottom:1px solid var(--wp-line)}
.wp-faq__q{width:100%;background:none;border:none;text-align:left;cursor:pointer;
  padding:18px 0;font-size:17px;color:var(--wp-navy);display:flex;justify-content:space-between;gap:12px;align-items:center}
.wp-faq__q:focus-visible{outline:2px solid var(--wp-red);outline-offset:2px}
.wp-faq__a{padding:0 0 18px;color:var(--wp-ink);line-height:1.7;font-size:16px;max-width:64ch}
.wp-faq__icon{transition:transform .2s ease;flex:none}
.wp-faq__q[aria-expanded="true"] .wp-faq__icon{transform:rotate(45deg)}
@media (prefers-reduced-motion:reduce){.wp-faq__icon{transition:none}}