/* Uniform live cards for #huTools — same frame, same photo size, per-feature accent.
   Classes prefixed htc- and chosen to avoid the global -card/-tile/-tag/-pill/-badge
   traps and the last-resort card-nav click regex (card|tile|item|link|feat|chip|place...). */
#huTools .hut-grid{ align-items:stretch !important; }

#huTools .htc-tool{
  display:flex; flex-direction:column; height:100%;
  background:#FBF8F2; border:1px solid #EDE6D8; border-radius:20px; overflow:hidden;
  box-shadow:0 8px 26px rgba(36,52,71,.06);
}
#huTools .htc-shot{ position:relative; width:100%; aspect-ratio:5 / 3; overflow:hidden; background:#EDE6D8; }
#huTools .htc-shot img{ width:100%; height:100%; object-fit:cover; object-position:center top; display:block; }

#huTools .htc-body{ display:flex; flex-direction:column; flex:1 1 auto; padding:15px 15px 17px; }
#huTools .htc-title{
  font-family:'Playfair Display',Georgia,serif; font-weight:700; font-size:1.18rem; line-height:1.08;
  color:#243447 !important; -webkit-text-fill-color:#243447 !important; margin:0 0 3px;
}
#huTools .htc-say{
  font-family:'Segoe Script','Brush Script MT',cursive; font-size:.94rem; line-height:1.25; margin:0 0 11px;
  color:var(--a) !important; -webkit-text-fill-color:var(--a) !important;
}
#huTools .htc-desc{
  font-size:.8rem; line-height:1.5; margin:0 0 13px;
  color:#4a5560 !important; -webkit-text-fill-color:#4a5560 !important;
}
#huTools .htc-caps{ display:grid; grid-template-columns:1fr 1fr; gap:7px; margin:0 0 14px; }
#huTools .htc-cap{
  display:flex; align-items:center; gap:6px; border-radius:10px; padding:7px 9px;
  font-size:.72rem; font-weight:600; line-height:1.15;
  background:var(--as); color:var(--ad) !important; -webkit-text-fill-color:var(--ad) !important;
}
#huTools .htc-cap svg{ width:14px; height:14px; flex:0 0 auto; color:var(--a); }

#huTools .htc-go{
  display:inline-flex; align-items:center; justify-content:center; gap:8px; width:100%;
  min-height:44px; margin-top:auto; border:none; border-radius:999px; cursor:pointer;
  font-family:inherit; font-size:.9rem; font-weight:700;
  background:var(--a); color:#fff !important; -webkit-text-fill-color:#fff !important;
  transition:filter .16s, transform .16s;
}
#huTools .htc-go:hover{ filter:brightness(.93); transform:translateY(-1px); }
#huTools .htc-go:focus-visible{ outline:3px solid var(--ad); outline-offset:2px; }
#huTools .htc-go svg{ width:16px; height:16px; }
#huTools .htc-foot{
  display:block; text-align:center; font-style:italic; font-size:.75rem; margin:10px 0 0;
  color:var(--ad) !important; -webkit-text-fill-color:var(--ad) !important;
}

/* The four tools now share one palette instead of violet / green / orange / blue,
   which read as four unrelated products. Navy, sage, blush and stone — all from the
   HU range, so they sit together. Class names kept so the markup is untouched.
   `--a` is used for the italic footer line as well as the button fill, so blush and
   stone were nudged a shade deeper: at #A85F52 / #7A7268 that text measured 4.48 and
   4.47, a whisker under AA. Now 4.9+ everywhere, white-on-main 5.2+. */
      #huTools .htc-a-violet{ --a:#243447; --as:#EDF1F6; --ad:#1C2A3A; }   /* Life Lens   — navy  */
      #huTools .htc-a-green { --a:#5F7350; --as:#EEF4EC; --ad:#44563A; }   /* Food Lens   — sage  */
      #huTools .htc-a-orange{ --a:#A05949; --as:#F7EDE9; --ad:#7E4438; }   /* Tap & Talk  — blush */
      #huTools .htc-a-blue  { --a:#736B62; --as:#F2F0EA; --ad:#564F47; }   /* Social Studio — stone */
      #huTools .htc-a-forest{ --a:#3F6B4F; --as:#EDF3ED; --ad:#325640; }   /* Spend Lens — forest */

@media (max-width:760px){
  #huTools .htc-title{ font-size:1.24rem; }
  #huTools .htc-desc{ font-size:.86rem; }
  #huTools .htc-cap{ font-size:.78rem; }
}
@media (prefers-reduced-motion:reduce){
  #huTools .htc-go{ transition:none !important; }
}