/* The free tools page's own pieces (site/tools.html), on top of hub.css and the story kit (story.css): a short hero, the
   live tool with its store field, and the tools on the way with their icons. */

.tools-hero{min-height:0;gap:0;padding-block:clamp(48px,7vw,96px) clamp(32px,4vw,48px)}
.tools-hero .hero__title{font-size:clamp(42px,6.4vw,88px)}
.tools-sub{max-width:40rem;font-size:clamp(18px,1.7vw,22px);line-height:1.5;color:var(--ink2)}

/* the live tool: the grader on the dark stage, its store field beside the text */
.tools-live__card{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:28px clamp(32px,5vw,64px);align-items:center;padding:clamp(26px,4vw,48px)}
.tools-live__text{display:flex;flex-direction:column;gap:16px}
.tools-live__text h2{font-size:clamp(30px,3.6vw,46px);line-height:1.06;color:#fff}
.tools-live__text p{font-size:17px;line-height:1.55;color:var(--stage-soft)}
.tools-live__go{display:flex;flex-direction:column;gap:18px}
.tools-live__links{display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.tools-live__more{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;min-height:44px;color:#fff;font-weight:600;text-decoration:none;border-bottom:2px solid var(--stamp-on-dark)}
.tools-live__more i{font-style:normal;transition:transform .25s} .tools-live__more:hover{color:#fff} .tools-live__more:hover i{transform:translateX(4px)}

/* the tools on the way */
.tools-next-sec{padding-bottom:clamp(48px,7vw,96px)}
.tools-next{list-style:none;margin:clamp(36px,5vw,56px) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px 28px}
.tools-next li{display:flex;flex-direction:column;gap:10px;padding-top:18px;border-top:1px solid var(--ink)}
.tools-next .ico{margin:6px 0 6px}
.tools-next .cap{color:var(--stamp)}
.tools-next b{font:600 clamp(20px,1.8vw,24px)/1.15 var(--display)}
.tools-next li > span:last-child{font-size:15px;line-height:1.55;color:var(--ink2)}

@media (max-width:860px){
  .tools-live__card{grid-template-columns:minmax(0,1fr)}
  .tools-next{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:520px){
  .tools-next{grid-template-columns:minmax(0,1fr);gap:28px}
}