/* /tools — the free tools, on one page. Loaded after base.css. Four items fill a 2x2
   grid from 760px and a single column below it, so nothing sits alone in a row. */
.thero{padding:clamp(48px,6vw,84px) 0 clamp(24px,3vw,36px);border-top:0}
.thero h1{font-size:var(--t-h1);max-width:15em;margin-top:16px}
.thero .deck{max-width:38em;margin-top:20px}
.tlist{padding-top:clamp(24px,3vw,40px)}
.tools{list-style:none;display:grid;grid-template-columns:minmax(0,1fr);gap:16px}
@media(min-width:760px){.tools{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}}
.tool{display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:clamp(20px,2.6vw,30px);border:1px solid var(--rule);border-radius:14px;background:rgba(5,24,29,.35)}
.tool:first-child{border-color:var(--edge);background:linear-gradient(180deg,rgba(232,181,71,.07),rgba(5,24,29,.4))}
.tool .kind{font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);font-weight:500}
.tool h2{font-size:clamp(28px,2.6vw,36px);margin-top:0;max-width:none}
.tool h2 a{border-bottom:1px solid transparent}
@media(hover:hover){.tool h2 a:hover{border-color:var(--accent)}}
.tool .what{flex:1 1 auto;font-size:16.5px;line-height:1.65;color:var(--cream);opacity:.93;max-width:36em}
.tool .meta{font-family:var(--mono);font-size:12px;letter-spacing:.04em;color:var(--muted)}
.tool .meta + .btn{margin-top:8px}
@media(max-width:560px){.tool .btn{width:100%}}
.tfoot{margin-top:28px;font-size:16px;color:var(--muted);max-width:40em}
.tfoot a{color:var(--cream);border-bottom:1px solid var(--rule)}