/* Shared opening geometry for the benefits guide and Stack Builder. */
.tool-hero{
  --tool-visual-height:510px;
  position:relative;display:grid;align-items:center;isolation:isolate;
  min-height:calc(100svh - var(--header-h) - 1px);
  padding-block:clamp(44px,5.5vw,74px) clamp(62px,7vw,92px);
  overflow:hidden;background:none;
}
.tool-hero .hero__inner{
  position:relative;display:grid;
  grid-template-columns:minmax(0,.94fr) minmax(0,1.06fr);
  align-items:center;gap:clamp(34px,5vw,70px);
}
.tool-hero .hero__copy{position:relative;z-index:2;min-width:0;width:100%;align-self:start}
.tool-hero .eyebrow{width:min(100%,20em);min-height:calc(2.44em + 2px);line-height:1.6;text-align:start}
.tool-hero .hero__copy h1{max-width:17ch;font-size:var(--text-h1);line-height:1.22}
.tool-hero .hero__lead{max-width:47ch;margin-block-start:22px;font-size:1.08em;color:var(--muted)}
.tool-hero .hero__visual{width:100%;max-width:660px;height:var(--tool-visual-height);margin-inline:auto;min-width:0}
.tool-hero .product-map,.tool-hero .stack-blueprint{height:100%;min-height:0;border-radius:32px}
.tool-hero .scroll-cue{display:grid}

.stack-blueprint{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(3,minmax(0,1fr));
  gap:16px;padding:28px;border:1px solid rgba(180,223,229,.9);
  background:radial-gradient(circle at center,rgba(58,162,173,.10),transparent 65%),#fafdfe;
  box-shadow:0 28px 65px -34px rgba(18,56,64,.42);
}
.stack-blueprint>div{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;
  min-width:0;padding:14px;border:1px solid var(--line);border-radius:18px;
  background:#fff;box-shadow:var(--shadow-xs);
  /* Keep painted details fixed; move each layer without resizing the artwork. */
  transform:translate3d(0,0,0);will-change:transform;
  animation:blueprintFloat 6s cubic-bezier(.45,0,.55,1) infinite;
}
.stack-blueprint>div:nth-child(3n+2){animation-delay:-2s}
.stack-blueprint>div:nth-child(3n){animation-delay:-4s}
.stack-hero.is-motion-paused .stack-blueprint>div{animation-play-state:paused;will-change:auto}
.stack-page:not(.is-stack-builder-visible) .mobile-total{visibility:hidden;pointer-events:none}
.stack-blueprint img{display:block;width:48px;height:48px;object-fit:contain;image-rendering:auto;flex:none}
.stack-blueprint span{font-size:.8rem;font-weight:800;text-align:center;line-height:1.4}
@keyframes blueprintFloat{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(0,-4px,0)}}

@media(max-width:960px){
  .tool-hero{--tool-visual-height:500px}
  .tool-hero .hero__inner{grid-template-columns:1fr;grid-template-rows:minmax(26rem,auto) var(--tool-visual-height);text-align:center}
  .tool-hero .hero__copy h1{max-width:none}
  .tool-hero .hero__visual{width:min(100%,620px)}
}
@media(max-width:760px){
  .tool-hero{padding-block:42px 58px}
}
@media(max-width:560px){
  .tool-hero{--tool-visual-height:32rem}
  .tool-hero .hero__inner{grid-template-rows:minmax(32rem,auto) var(--tool-visual-height)}
  .tool-hero .hero__actions{margin-block-start:24px}
  .stack-hero__actions{align-items:stretch;flex-direction:column}
  .stack-hero__actions .btn{width:100%}
  .tool-hero .stack-blueprint,.tool-hero .product-map{border-radius:24px}
  .stack-blueprint{gap:10px;padding:17px}
  .stack-blueprint>div{gap:10px;padding:9px;border-radius:14px}
  .stack-blueprint img{width:40px;height:40px}
  .stack-blueprint span{font-size:.76rem}
}
@media(max-width:360px){
  .tool-hero{--tool-visual-height:40rem}
  .tool-hero .eyebrow{min-height:calc(4.04em + 2px)}
  .tool-hero .hero__inner{grid-template-rows:minmax(38rem,auto) var(--tool-visual-height)}
  .stack-blueprint{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(5,minmax(0,1fr))}
  .stack-blueprint>div:last-child{grid-column:1/-1;justify-self:center;width:calc((100% - 10px)/2)}
}
@media(prefers-reduced-motion:reduce){
  .stack-blueprint>div{animation:none;transform:none;will-change:auto}
  .tool-hero .scroll-cue span{animation:none;opacity:1}
}
@media print{
  .tool-hero{display:block;min-height:0;padding:0}
  .tool-hero .hero__inner{display:block}
}