/* ============================================================================
   THE TOOLS BEHIND THE FLOW — signature feature showcase.
   Sits directly beneath the Capture / Understand / Organise / Share diagram.
   Built in the same idiom as the existing .ss-tile Social Studio card
   (wash, icon panel, access badge, serif name, promise strip, copy panel,
   capability chips, navy pill CTA) and reuses its --ss-* tokens.
   Prefix "hut-" — clear of the global -card / -tile / -tag wildcards.
   ============================================================================ */
#huTools{
  --hut-navy:#243447; --hut-muted:#6B7A88; --hut-line:#ECE1CE;
  --hut-surface:#FFFDF8; --hut-cream:#FBF6EC;
  --hut-sage:#7D9E77;  --hut-sage-d:#5E7E57;  --hut-sage-s:#EAF2E6;
  --hut-gold:#E0A13A;  --hut-gold-d:#8E631A;  --hut-gold-s:#FBEFD6;
  --hut-coral:#C9765A; --hut-coral-s:#F7EEE9;
  --hut-lav:#8A7C9A;   --hut-lav-s:#F1EFF5;
  --hut-euc:#7F9793;   --hut-euc-s:#EBF1F0;
  max-width:1180px; margin:66px auto 0; padding-top:54px;
  border-top:1px solid #eceae3;
}
#huTools *{ box-sizing:border-box; }

/* ── header ─────────────────────────────────────────────────────────────── */
#huTools .hut-head{ text-align:center; max-width:720px; margin:0 auto 36px; }
#huTools .hut-eyebrow{
  font-size:.7rem; font-weight:800; letter-spacing:.19em; text-transform:uppercase; margin:0 0 12px;
  color:var(--hut-sage) !important; -webkit-text-fill-color:var(--hut-sage) !important;
}
#huTools .hut-h{
  font-family:'Playfair Display',Georgia,serif; font-weight:700; line-height:1.1;
  font-size:clamp(1.6rem,3vw,2.3rem); margin:0 0 14px; letter-spacing:-.01em;
  color:var(--hut-navy) !important; -webkit-text-fill-color:var(--hut-navy) !important;
}
#huTools .hut-lede{
  font-size:1rem; line-height:1.72; margin:0 auto 14px; max-width:620px;
  color:#5a6374 !important; -webkit-text-fill-color:#5a6374 !important;
}
#huTools .hut-brandline{
  font-family:'Caveat','Segoe Script',cursive; font-size:1.5rem; font-weight:700; margin:0;
  color:var(--hut-gold-d) !important; -webkit-text-fill-color:var(--hut-gold-d) !important;
}

/* ── grid ───────────────────────────────────────────────────────────────── */
/* align-items:start so a tall art card doesn't stretch its row partner into a
   field of white space. The row-span trick that helped when there was only one
   art card is gone — with three of them it stretched the odd one out. */
#huTools .hut-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px;
  align-items:start; }
#huTools .hut-item{
  position:relative; overflow:hidden; display:flex; flex-direction:column;
  background:var(--hut-surface) !important; border:1px solid var(--hut-line); border-radius:26px;
  padding:26px; box-shadow:0 6px 30px rgba(36,52,71,.05);
  transition:box-shadow .24s, transform .24s cubic-bezier(.22,1,.36,1), border-color .24s;
}
#huTools .hut-item:hover{
  transform:translateY(-3px); box-shadow:0 16px 42px rgba(36,52,71,.10);
  border-color:color-mix(in srgb, var(--acc) 38%, var(--hut-line));
}
#huTools .hut-item.is-wide{ grid-column:1/-1; }

/* decorative wash */
#huTools .hut-wash{
  position:absolute; right:-40px; top:-40px; width:150px; height:150px; border-radius:50%;
  background:var(--acc-s); opacity:.75; pointer-events:none;
}
#huTools .hut-wash2{
  position:absolute; left:-56px; bottom:-56px; width:170px; height:170px; border-radius:50%;
  background:var(--acc-s); opacity:.4; pointer-events:none;
}

/* ── header panel ───────────────────────────────────────────────────────── */
#huTools .hut-top{
  position:relative; display:flex; align-items:flex-start; justify-content:space-between; gap:12px;
  background:#fff !important; border:1px solid #F2EDE3; border-radius:18px; padding:14px 16px;
}
#huTools .hut-ico{
  display:flex; width:50px; height:50px; align-items:center; justify-content:center;
  border-radius:16px; background:var(--acc-s); color:var(--acc); flex:0 0 auto;
}
#huTools .hut-ico svg{ width:24px; height:24px; }
#huTools .hut-badge{
  display:inline-flex; align-items:center; gap:6px; border-radius:999px; padding:5px 11px;
  font-size:.64rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; white-space:nowrap;
}
#huTools .hut-badge svg{ width:11px; height:11px; }
#huTools .hut-badge.is-core{
  border:1px solid #d8e4d4; background:var(--hut-sage-s) !important;
  color:#4a6f46 !important; -webkit-text-fill-color:#4a6f46 !important;
}
#huTools .hut-badge.is-premium{
  border:1px solid #f0dcae; background:var(--hut-gold-s) !important;
  color:var(--hut-gold-d) !important; -webkit-text-fill-color:var(--hut-gold-d) !important;
}

/* ── body ───────────────────────────────────────────────────────────────── */
#huTools .hut-name{
  position:relative; font-family:'Playfair Display',Georgia,serif; font-weight:700;
  font-size:1.5rem; line-height:1.1; margin:18px 0 0;
  color:var(--hut-navy) !important; -webkit-text-fill-color:var(--hut-navy) !important;
}
#huTools .hut-promise{
  position:relative; display:flex; align-items:center; gap:8px; margin:10px 0 0;
  background:var(--acc-s) !important; border-left:3px solid var(--acc); border-radius:0 10px 10px 0;
  padding:9px 13px; font-size:.86rem; font-weight:700; line-height:1.35;
  color:var(--acc-d) !important; -webkit-text-fill-color:var(--acc-d) !important;
}
#huTools .hut-promise svg{ width:15px; height:15px; flex:0 0 auto; }
#huTools .hut-copy{
  position:relative; margin:14px 0 0; background:#fff !important; border:1px solid #F2EDE3;
  border-radius:16px; padding:15px 17px; font-size:.9rem; line-height:1.62;
  color:#5a6a78 !important; -webkit-text-fill-color:#5a6a78 !important;
}
#huTools .hut-chips{ position:relative; margin:15px 0 0; display:flex; flex-wrap:wrap; gap:7px; }
#huTools .hut-chip{
  display:inline-flex; align-items:center; gap:6px; border-radius:10px; padding:6px 11px;
  background:#F6F1E7 !important; font-size:.76rem; font-weight:700;
  color:#4a5560 !important; -webkit-text-fill-color:#4a5560 !important;
}
#huTools .hut-chip svg{ width:13px; height:13px; color:var(--acc); }
#huTools .hut-dest{
  position:relative; margin:14px 0 0; padding-top:13px; border-top:1px solid #F2EDE3;
  font-size:.76rem; line-height:1.55;
  color:#6B7580 !important; -webkit-text-fill-color:#6B7580 !important;
}
#huTools .hut-dest b{ font-weight:800; color:#6B7A88 !important; -webkit-text-fill-color:#6B7A88 !important; }
#huTools .hut-cta{
  position:relative; margin:18px 0 0; align-self:flex-start; display:inline-flex; align-items:center; gap:9px;
  min-height:46px; background:var(--hut-navy); color:#fff !important; -webkit-text-fill-color:#fff !important;
  border:none; border-radius:999px; padding:0 22px; font-family:inherit; font-size:.88rem; font-weight:700;
  cursor:pointer; transition:background .16s;
}
#huTools .hut-cta:hover{ background:#31465F; }
#huTools .hut-cta:focus-visible{ outline:3px solid #CF9E3F; outline-offset:3px; }
#huTools .hut-cta svg{ width:15px; height:15px; transition:transform .2s; }
#huTools .hut-item:hover .hut-cta svg{ transform:translateX(3px); }
#huTools .hut-cta.is-soon{
  background:#fff; color:#6B7A88 !important; -webkit-text-fill-color:#6B7A88 !important;
  border:1.5px solid var(--hut-line); cursor:default;
}
#huTools .hut-cta.is-soon:hover{ background:#fff; }
#huTools .hut-item:hover .hut-cta.is-soon svg{ transform:none; }

/* wide card (Hero Pulse) puts copy and chips side by side */
#huTools .hut-item.is-wide .hut-split{ display:grid; grid-template-columns:1.15fr 1fr; gap:20px; align-items:start; }
#huTools .hut-item.is-wide .hut-copy,#huTools .hut-item.is-wide .hut-chips{ margin-top:14px; }

/* An image-led tool card: the artwork already carries the name, tagline and
   copy, so the card is the picture plus its CTA. The tile grows to the
   artwork's own aspect so nothing is cropped. */
/* The artwork IS the card, so it runs edge to edge with no padding. */
#huTools .hut-item.has-art{ padding:0; overflow:hidden; }
/* the card clips to its own radius, so the image needs none of its own */
#huTools .hut-art{ display:block; width:100%; height:auto; border-radius:0; position:relative; }

/* A fine inset frame on desktop so these artworks sit inside the card rather
   than running flush to its edge. Life Lens is excluded — its artwork already
   carries a heavier drawn frame of its own. */
@media (min-width:761px){
  #huTools .hut-item.has-art:not([data-feature="life-lens"]){ padding:12px; }
  #huTools .hut-item.has-art:not([data-feature="life-lens"]) .hut-art{
    border:1px solid #EBE3D6; border-radius:16px;
  }
}

/* On desktop every art card is the same size, pinned to the Life Lens artwork's
   1134:1387 aspect. The images are contained rather than cropped, so a slightly
   wider artwork just leaves a little card background above and below — and the
   card background is the same cream the artworks sit on, so it does not read as
   a gap. */
@media (min-width:761px){
  #huTools .hut-item.has-art{ aspect-ratio:1134 / 1387; }
  #huTools .hut-item.has-art .hut-art{
    width:100%; height:100%; object-fit:contain; object-position:center;
  }
}
/* Tap & Talk artwork is landscape, so show it at its own ratio instead of the
   shared portrait pin — it then fills the framed card with no cream bands. */
@media (min-width:761px){
}
#huTools .hut-item.has-art .hut-cta{ margin:16px 0 0 4px; }

/* ── responsive ─────────────────────────────────────────────────────────── */
@media (max-width:1024px){
  #huTools .hut-grid{ grid-template-columns:1fr 1fr; gap:20px; }
  #huTools .hut-item.is-wide .hut-split{ grid-template-columns:1fr; gap:0; }
}
@media (max-width:760px){
  #huTools{ margin-top:48px; padding-top:38px; }
  #huTools .hut-grid{ grid-template-columns:1fr; gap:16px; }
  #huTools .hut-item{ padding:20px; border-radius:20px; }
  #huTools .hut-wash{ width:110px; height:110px; right:-34px; top:-34px; }
  #huTools .hut-wash2{ display:none; }
  #huTools .hut-name{ font-size:1.34rem; }
  #huTools .hut-cta{ align-self:stretch; justify-content:center; width:100%; }
}
@media (prefers-reduced-motion:reduce){
  #huTools .hut-item,#huTools .hut-cta svg{ transition:none !important; }
  #huTools .hut-item:hover{ transform:none; }
  #huTools .hut-item:hover .hut-cta svg{ transform:none; }
}