/* HERO PULSE — prefix "hpx-": clear of the global wildcard traps
   (hero, -card, -tile, -tag, badge, pill, metric, stat-, -fill, -section, progress-). */
#page-hero-pulse{ background:#fff; font-family:'Nunito',system-ui,sans-serif; padding-bottom:100px; }
#page-hero-pulse h1,#page-hero-pulse h2,#page-hero-pulse h3{
  font-family:'Playfair Display',serif;
  color:#172238 !important; -webkit-text-fill-color:#172238 !important;
}
.hpx-wrap{ max-width:1160px; margin:0 auto; padding:0 20px; }
.hpx-eb{
  font-size:.875rem; font-weight:800; letter-spacing:.16em; text-transform:uppercase; margin:0 0 14px;
  color:#5A6374 !important; -webkit-text-fill-color:#5A6374 !important;
}
.hpx-h1{ font-size:clamp(2.1rem,4.6vw,3.2rem); line-height:1.12; margin:0 0 16px; font-weight:600; }
.hpx-h2{ font-size:clamp(1.6rem,3vw,2.2rem); line-height:1.2; margin:0 0 10px; font-weight:600; }
.hpx-h3{ font-size:1.2rem; line-height:1.3; margin:0 0 6px; font-weight:600; }
.hpx-p{
  font-size:1.0625rem; line-height:1.75; margin:0;
  color:#5A6374 !important; -webkit-text-fill-color:#5A6374 !important;
}
.hpx-back{
  background:#172238; border:none; border-radius:999px; padding:10px 18px; min-height:44px;
  font:inherit; font-weight:700; font-size:1rem; cursor:pointer; margin:20px 0;
  color:#fff !important; -webkit-text-fill-color:#fff !important;
}
.hpx-btn{
  display:inline-flex; align-items:center; justify-content:center; min-height:52px;
  border-radius:999px; padding:0 26px; font:inherit; font-weight:700; font-size:1.0125rem;
  cursor:pointer; border:2px solid #172238; background:#172238;
  color:#fff !important; -webkit-text-fill-color:#fff !important; transition:opacity .2s;
}
.hpx-btn:hover{ opacity:.9; }
.hpx-btn--soft{
  background:#fff; border-color:#E5DED2;
  color:#172238 !important; -webkit-text-fill-color:#172238 !important;
}
.hpx-btn--soft:hover{ border-color:#172238; }
.hpx-btn--sm{ min-height:44px; padding:0 16px; font-size:1rem; }
.hpx-btn:focus-visible,.hpx-back:focus-visible,.hpx-fp:focus-visible,
.hpx-sw:focus-visible,.hpx-more:focus-visible{ outline:3px solid #CF9E3F; outline-offset:3px; }
.hpx-ctas{ display:flex; gap:12px; flex-wrap:wrap; margin-top:26px; }

/* ---- hero ---- */
.hpx-header{ margin:0 0 28px; }
.hpx-header-img{ width:100%; height:auto; display:block; border-radius:22px; box-shadow:0 18px 50px rgba(58,45,30,.12); }
.hpx-top--noart{ grid-template-columns:1fr !important; }
.hpx-top{ display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); gap:44px; align-items:center; padding:20px 0 64px; }
/* pulse network */
.hpx-net{ width:100%; max-width:460px; margin:0 auto; display:block; }
.hpx-ring{ transform-origin:center; animation:hpx-ring 3.6s ease-out infinite; }
@keyframes hpx-ring{ 0%{ transform:scale(.55); opacity:.55; } 70%{ transform:scale(1.28); opacity:0; } 100%{ opacity:0; } }
.hpx-node{ animation:hpx-glow 3.2s ease-in-out infinite; }
@keyframes hpx-glow{ 0%,100%{ opacity:.55; } 50%{ opacity:1; } }
.hpx-heart{ animation:hpx-beat 2.6s ease-in-out infinite; transform-origin:center; }
@keyframes hpx-beat{ 0%,100%{ transform:scale(1); } 14%{ transform:scale(1.06); } 28%{ transform:scale(1); } 42%{ transform:scale(1.04); } }

/* ---- generic panel ---- */
.hpx-sec{ padding:56px 0; }
.hpx-grid3{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:20px; }
.hpx-box{
  background:#fff; border:1px solid #EDE7DC; border-radius:28px; padding:28px;
  box-shadow:0 6px 22px rgba(23,34,56,.04);
}
.hpx-box--cream{ background:#F7F2EA; }
.hpx-box--sage{ background:#DCE7DF; }
.hpx-box--pink{ background:#F2DDE2; }

/* ---- findings ---- */
.hpx-fps{ display:flex; gap:8px; flex-wrap:wrap; margin:20px 0 26px; }
.hpx-fp{
  background:#fff; border:1.5px solid #E5DED2; border-radius:999px; padding:10px 18px; min-height:44px;
  font:inherit; font-weight:700; font-size:1rem; cursor:pointer;
  color:#5A6374 !important; -webkit-text-fill-color:#5A6374 !important;
}
.hpx-fp.on{ background:#172238; border-color:#172238; color:#fff !important; -webkit-text-fill-color:#fff !important; }
.hpx-finds{ display:grid; grid-template-columns:repeat(auto-fill,minmax(340px,1fr)); gap:20px; }
.hpx-find{
  background:#fff; border:1px solid #EDE7DC; border-radius:28px; padding:26px;
  display:flex; flex-direction:column; gap:12px; position:relative;
  box-shadow:0 6px 22px rgba(23,34,56,.04);
  transition:opacity .35s ease, transform .35s ease;
}
.hpx-find.gone{ opacity:0; transform:translateY(8px); pointer-events:none; }
.hpx-head{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.hpx-kind{
  font-size:.875rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
  border-radius:999px; padding:6px 12px;
}
.hpx-kind.k-win{ background:#DCE7DF; color:#33502D !important; -webkit-text-fill-color:#33502D !important; }
.hpx-kind.k-pattern{ background:#F2DDE2; color:#7A3B4C !important; -webkit-text-fill-color:#7A3B4C !important; }
.hpx-kind.k-connection{ background:#E4E9F2; color:#2C405F !important; -webkit-text-fill-color:#2C405F !important; }
.hpx-kind.k-reminder{ background:#FBF1DC; color:#75591F !important; -webkit-text-fill-color:#75591F !important; }
.hpx-kind.k-revisit{ background:#F4EDE3; color:#6B5535 !important; -webkit-text-fill-color:#6B5535 !important; }
.hpx-eg{
  font-size:.875rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  border:1px dashed #C9C2B4; border-radius:999px; padding:5px 11px;
  color:#5A6374 !important; -webkit-text-fill-color:#5A6374 !important;
}
.hpx-live{
  font-size:.875rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  background:#172238; border-radius:999px; padding:5px 11px;
  color:#fff !important; -webkit-text-fill-color:#fff !important;
}
.hpx-find svg.ic{ width:24px; height:24px; stroke:#5E7E57; fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.hpx-src{
  font-size:1rem; color:#5A6374 !important; -webkit-text-fill-color:#5A6374 !important;
}
.hpx-det{
  font-size:1rem; line-height:1.65; background:#F7F2EA; border-radius:16px; padding:12px 14px; margin:0;
  color:#5A6374 !important; -webkit-text-fill-color:#5A6374 !important;
}
.hpx-acts{ display:flex; gap:8px; flex-wrap:wrap; margin-top:auto; padding-top:6px; }
.hpx-more{
  background:#fff; border:1.5px solid #E5DED2; border-radius:999px; width:44px; height:44px;
  font:inherit; font-size:1.15rem; cursor:pointer; line-height:1;
  color:#5A6374 !important; -webkit-text-fill-color:#5A6374 !important;
}

/* ---- types of findings: five compact tiles on one line, navy-soft icon on pale sage ---- */
.hpx-types{ display:grid; grid-template-columns:repeat(5,1fr); gap:12px; margin-top:24px; }
.hpx-type{
  background:#EFF4EE;                       /* soft pale sage */
  border:1px solid #DDE7DC; border-radius:22px; padding:18px 14px; text-align:center;
}
.hpx-type .tic{
  width:22px; height:22px; margin:0 auto 8px; display:block;
  stroke:#3C4A63;                            /* softened navy, not the full #172238 */
  fill:none; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round;
}
.hpx-th{
  font-family:'Playfair Display',serif; font-size:1rem !important; line-height:1.25; margin:0 0 4px;
  color:#172238 !important; -webkit-text-fill-color:#172238 !important;
}
.hpx-tp{
  font-size:.9375rem; line-height:1.45; margin:0;
  color:#5A6374 !important; -webkit-text-fill-color:#5A6374 !important;
}
@media (max-width:900px){
  .hpx-types{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:560px){
  .hpx-types{ grid-template-columns:1fr 1fr; gap:10px; }
  .hpx-type{ padding:14px 10px; }
}

/* ---- flow ---- */
.hpx-flow{ display:flex; gap:14px; align-items:stretch; margin-top:26px; }
.hpx-step{ flex:1; background:#F7F2EA; border:1px solid #EDE7DC; border-radius:28px; padding:26px; }
.hpx-num{
  display:grid; place-items:center; width:40px; height:40px; border-radius:50%;
  background:#172238; font-weight:800; font-size:1rem; margin-bottom:12px;
  color:#fff !important; -webkit-text-fill-color:#fff !important;
}
.hpx-arw{ align-self:center; font-size:1.3rem; color:#5A6374 !important; -webkit-text-fill-color:#5A6374 !important; }

/* ---- connected features ---- */
.hpx-feat{
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  background:#fff; border:1px solid #EDE7DC; border-radius:24px; padding:20px 24px; margin-bottom:12px;
}
.hpx-feat svg{ width:26px; height:26px; flex:none; stroke:#5E7E57; fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.hpx-feat .txt{ flex:1; min-width:220px; }
.hpx-status{
  font-size:1rem; font-weight:700; border-radius:999px; padding:6px 14px; white-space:nowrap;
}
.hpx-status.on{ background:#DCE7DF; color:#33502D !important; -webkit-text-fill-color:#33502D !important; }
.hpx-status.off{ background:#F4F1E8; color:#5A6374 !important; -webkit-text-fill-color:#5A6374 !important; }
.hpx-sensitive{
  font-size:.9375rem; margin-top:4px;
  color:#75591F !important; -webkit-text-fill-color:#75591F !important;
}

/* ---- switches ---- */
.hpx-sw{ position:relative; width:56px; height:44px; border:none; background:none; cursor:pointer; flex:none; }
.hpx-sw::before{ content:''; position:absolute; top:11px; left:0; width:52px; height:22px; border-radius:999px; background:#DDD7C8; transition:background .18s; }
.hpx-sw::after{ content:''; position:absolute; top:13px; left:3px; width:18px; height:18px; border-radius:50%; background:#fff; transition:transform .18s; box-shadow:0 1px 4px rgba(0,0,0,.2); }
.hpx-sw[aria-checked="true"]::before{ background:#7d9e77; }
.hpx-sw[aria-checked="true"]::after{ transform:translateX(30px); }
.hpx-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 0; border-bottom:1px solid #F4F1E8; }
.hpx-row:last-child{ border-bottom:none; }
.hpx-row span{
  font-size:1rem; font-weight:700; line-height:1.5;
  color:#172238 !important; -webkit-text-fill-color:#172238 !important;
}

/* ---- empty + skeleton ---- */
.hpx-empty{ background:#F7F2EA; border:1px dashed #E5DED2; border-radius:28px; padding:44px; text-align:center; }
.hpx-sk{ background:#fff; border:1px solid #EDE7DC; border-radius:28px; padding:26px; }
.hpx-sk i{ display:block; height:14px; border-radius:999px; background:#F0EBE1; margin-bottom:12px; animation:hpx-sh 1.3s ease-in-out infinite; }
@keyframes hpx-sh{ 0%,100%{ opacity:1; } 50%{ opacity:.5; } }

@media (max-width:900px){
  .hpx-top{ grid-template-columns:1fr; gap:30px; padding-bottom:40px; }
  .hpx-flow{ flex-direction:column; }
  .hpx-arw{ transform:rotate(90deg); }
  .hpx-finds{ grid-template-columns:1fr; }
  .hpx-sec{ padding:40px 0; }
  .hpx-ctas{ flex-direction:column; }
  .hpx-ctas .hpx-btn{ width:100%; }
}
@media (prefers-reduced-motion:reduce){
  .hpx-ring,.hpx-node,.hpx-heart,.hpx-sk i{ animation:none !important; }
  .hpx-ring{ opacity:.18; }
  .hpx-find{ transition:none !important; }
}