/* "The heart of your Habitually U ecosystem" — ported from the React component.
   Prefix "hep-": deliberately avoids every global wildcard trap on this site
   (hero, -card, -tile, tag, badge, pill, metric, stat-, -fill, -section, progress-). */
#page-home .hep-wrap{
  background:#fff; padding:78px 20px 84px;
}
#page-home .hep-in{ max-width:1200px; margin:0 auto; }
#page-home .hep-intro{ max-width:760px; margin:0 auto; text-align:center; }
#page-home .hep-eb{
  font-size:.875rem; font-weight:800; letter-spacing:.16em; text-transform:uppercase; margin:0 0 16px;
  color:#5A6374 !important; -webkit-text-fill-color:#5A6374 !important;
}
#page-home .hep-h2{
  font-family:'Playfair Display',serif; font-size:clamp(2rem,4.4vw,3.1rem); line-height:1.12;
  margin:0 0 22px; font-weight:600;
  color:#172238 !important; -webkit-text-fill-color:#172238 !important;
}
#page-home .hep-lede{
  max-width:640px; margin:0 auto; font-size:1.0625rem; line-height:1.75;
  color:#5A6374 !important; -webkit-text-fill-color:#5A6374 !important;
}
#page-home .hep-p{ font-size:1.0625rem; line-height:1.75; margin:0; }
#page-home .hep-lb{
  font-size:.875rem; font-weight:800; letter-spacing:.16em; text-transform:uppercase; margin:0 0 14px;
}
#page-home .hep-t{
  font-family:'Playfair Display',serif; font-size:2rem; line-height:1.15; margin:0 0 10px; font-weight:600;
}
#page-home .hep-lead2{ font-size:1.15rem; line-height:1.4; margin:0 0 18px; }

/* --- Hero Pulse: full-width navy --- */
#page-home .hep-pulse{
  background:#172238; border-radius:36px; padding:48px; margin-top:60px;
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:40px; align-items:center;
  transition:transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s cubic-bezier(.22,1,.36,1);
}
#page-home .hep-pulse:hover{ transform:translateY(-4px); box-shadow:0 22px 60px rgba(23,34,56,.12); }
#page-home .hep-pulse .hep-lb{ color:#F2DDE2 !important; -webkit-text-fill-color:#F2DDE2 !important; }
#page-home .hep-pulse .hep-t{ color:#fff !important; -webkit-text-fill-color:#fff !important; }
#page-home .hep-pulse .hep-lead2{ color:#F2DDE2 !important; -webkit-text-fill-color:#F2DDE2 !important; }
#page-home .hep-pulse .hep-p{ color:#CFD1D7 !important; -webkit-text-fill-color:#CFD1D7 !important; }
#page-home .hep-priv{
  font-size:.9375rem; line-height:1.6; margin:28px 0 0;
  color:#BDC0C5 !important; -webkit-text-fill-color:#BDC0C5 !important;
}
#page-home .hep-line{ width:100%; max-width:320px; height:40px; margin-top:28px; display:block; }
#page-home .hep-draw{
  stroke-dasharray:420; stroke-dashoffset:420;
  animation:hep-draw 2.4s cubic-bezier(.65,0,.35,1) .4s forwards;
}
@keyframes hep-draw{ to{ stroke-dashoffset:0; } }
#page-home .hep-ins{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px; }
#page-home .hep-ins li{
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.10);
  border-radius:22px; padding:16px 20px; font-size:1rem; line-height:1.55;
  color:#F2F2F2 !important; -webkit-text-fill-color:#F2F2F2 !important;
  animation:hep-float .8s cubic-bezier(.22,1,.36,1) both;
}
@keyframes hep-float{ from{ opacity:0; transform:translateY(10px);} to{ opacity:1; transform:none; } }
#page-home .hep-eg{
  font-size:.9375rem; line-height:1.6; margin:16px 0 0;
  color:#BDC0C5 !important; -webkit-text-fill-color:#BDC0C5 !important;
}

/* --- Food Lens + Memory Lens --- */
#page-home .hep-two{ display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:24px; }
#page-home .hep-box{
  border-radius:32px; padding:40px; border:1px solid rgba(0,0,0,.04);
  display:flex; flex-direction:column;
  transition:transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s cubic-bezier(.22,1,.36,1);
}
#page-home .hep-box:hover{ transform:translateY(-4px); box-shadow:0 22px 60px rgba(23,34,56,.09); }
#page-home .hep-food{ background:#F7F2EA; }
#page-home .hep-mem{ background:#DCE7DF; }
#page-home .hep-box .hep-lb{ color:#5A6374 !important; -webkit-text-fill-color:#5A6374 !important; }
#page-home .hep-box .hep-t,
#page-home .hep-box .hep-lead2{ color:#172238 !important; -webkit-text-fill-color:#172238 !important; }
#page-home .hep-box .hep-p{
  max-width:52ch; color:#5A6374 !important; -webkit-text-fill-color:#5A6374 !important;
}
#page-home .hep-caps{ list-style:none; margin:24px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:8px; }
#page-home .hep-caps li{
  background:#fff; border:1px solid rgba(0,0,0,.06); border-radius:999px; padding:8px 16px; font-size:.95rem;
  color:#172238 !important; -webkit-text-fill-color:#172238 !important;
}
/* phone preview */
#page-home .hep-phone{
  width:220px; margin:32px auto 0; background:#fff; border:1px solid rgba(0,0,0,.06);
  border-radius:28px; padding:12px; box-shadow:0 14px 40px rgba(23,34,56,.08);
}
#page-home .hep-notch{ width:48px; height:6px; border-radius:999px; background:rgba(0,0,0,.1); margin:0 auto 12px; }
#page-home .hep-shot{
  height:110px; border-radius:20px; background:#F2DDE2; display:grid; place-items:center;
}
#page-home .hep-cap{
  font-size:.875rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; margin:12px 0 0;
  color:#5A6374 !important; -webkit-text-fill-color:#5A6374 !important;
}
#page-home .hep-dish{
  font-size:1.05rem; font-weight:700; margin:2px 0 0;
  color:#172238 !important; -webkit-text-fill-color:#172238 !important;
}
#page-home .hep-saved{
  font-size:.95rem; margin:4px 0 0;
  color:#5A6374 !important; -webkit-text-fill-color:#5A6374 !important;
}
/* scrapbook */
#page-home .hep-scrap{ list-style:none; margin:32px 0 0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:12px; }
#page-home .hep-scrap li{
  background:#fff; border:1px solid rgba(0,0,0,.05); border-radius:20px; padding:16px 20px;
  font-size:1rem; font-weight:600; box-shadow:0 8px 24px rgba(23,34,56,.06);
  color:#172238 !important; -webkit-text-fill-color:#172238 !important;
  transform:rotate(var(--r,0deg)); transition:transform .3s cubic-bezier(.22,1,.36,1);
}
#page-home .hep-scrap li:hover{ transform:rotate(0) translateY(-2px); }

/* --- connector --- */
#page-home .hep-conn{
  background:#F7F2EA; border:1px solid rgba(0,0,0,.04); border-radius:36px;
  padding:48px; margin-top:24px; text-align:center;
}
#page-home .hep-flow{
  list-style:none; margin:40px auto 0; padding:0; max-width:980px;
  display:flex; align-items:center; gap:12px;
}
#page-home .hep-flow li{
  flex:1; background:#fff; border:1px solid rgba(0,0,0,.05); border-radius:24px;
  padding:16px 20px; font-size:1rem; font-weight:700;
  color:#172238 !important; -webkit-text-fill-color:#172238 !important;
}
#page-home .hep-arw{
  flex:none !important; background:none !important; border:none !important; padding:0 !important;
  font-size:1.2rem; color:#5A6374 !important; -webkit-text-fill-color:#5A6374 !important;
}
#page-home .hep-hubs{
  list-style:none; margin:40px auto 0; padding:0; max-width:820px;
  display:flex; flex-wrap:wrap; justify-content:center; gap:10px;
}
#page-home .hep-hubs li{
  background:#fff; border:1px solid rgba(0,0,0,.06); border-radius:999px; padding:10px 18px; font-size:.95rem;
  color:#172238 !important; -webkit-text-fill-color:#172238 !important;
}
#page-home .hep-final{
  max-width:520px; margin:40px auto 0; font-size:1.15rem; line-height:1.65;
  color:#172238 !important; -webkit-text-fill-color:#172238 !important;
}
#page-home .hep-acts{ display:flex; gap:16px; justify-content:center; align-items:center; margin-top:32px; flex-wrap:wrap; }

/* --- buttons --- */
#page-home .hep-btn{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:54px; border-radius:999px; padding:0 30px; font:inherit; font-weight:700; font-size:1.05rem;
  cursor:pointer; border:2px solid #172238; background:#172238;
  color:#fff !important; -webkit-text-fill-color:#fff !important;
  transition:opacity .2s, background .2s;
}
#page-home .hep-btn:hover{ opacity:.9; }
#page-home .hep-btn--light{
  background:#fff; border-color:#fff;
  color:#172238 !important; -webkit-text-fill-color:#172238 !important;
}
#page-home .hep-btn--light:hover{ background:#F2DDE2; border-color:#F2DDE2; }
#page-home .hep-link{
  background:none; border:none; font:inherit; font-weight:700; font-size:1.05rem; cursor:pointer;
  text-decoration:underline; text-underline-offset:4px; min-height:54px; padding:0 8px;
  color:#172238 !important; -webkit-text-fill-color:#172238 !important;
}
#page-home .hep-btn:focus-visible,
#page-home .hep-link:focus-visible{ outline:3px solid #CF9E3F; outline-offset:3px; }
#page-home .hep-cta{ margin-top:32px; align-self:flex-start; }

@media (max-width:980px){
  #page-home .hep-pulse{ grid-template-columns:1fr; padding:34px; }
  #page-home .hep-two{ grid-template-columns:1fr; }
  #page-home .hep-flow{ flex-direction:column; align-items:stretch; }
  #page-home .hep-arw{ transform:rotate(90deg); text-align:center; }
  #page-home .hep-conn{ padding:34px 22px; }
  #page-home .hep-box{ padding:30px; }
  #page-home .hep-wrap{ padding:56px 16px 60px; }
  #page-home .hep-scrap{ grid-template-columns:1fr; }
  #page-home .hep-acts{ flex-direction:column; }
  #page-home .hep-acts .hep-btn{ width:100%; }
}
@media (prefers-reduced-motion:reduce){
  #page-home .hep-pulse,#page-home .hep-box,#page-home .hep-scrap li{ transition:none !important; }
  #page-home .hep-pulse:hover,#page-home .hep-box:hover{ transform:none; }
  #page-home .hep-scrap li,#page-home .hep-scrap li:hover{ transform:none; }
  #page-home .hep-ins li{ animation:none !important; }
  #page-home .hep-draw{ animation:none !important; stroke-dashoffset:0; }
}