/* ============================================================
   PulseWave — Creator Network Tools
   Shared styles for the tools hub and the internal tools.
   Reuses the design tokens and .blog-card language from styles.css
   so these pages read as part of the same site.
   ============================================================ */

.tools-page .site-header{background:rgba(4,7,14,.94);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.tools-page .seo-main{padding-top:calc(8rem + var(--promo-h));padding-bottom:4.5rem}
.tools-page .doc{max-width:52rem}
@media (max-width:760px){.tools-page .seo-main{padding-top:calc(7.25rem + var(--promo-h));padding-bottom:3rem}}

/* ---------- internal badge ---------- */
.tools-badge{
  display:inline-flex;align-items:center;gap:.5rem;padding:.45rem .9rem;
  border:1px solid rgba(53,199,255,.55);border-radius:999px;
  background:rgba(53,199,255,.08);color:#9fe9ff;
  font:800 .7rem/1 var(--body);letter-spacing:.18em;text-transform:uppercase;margin-bottom:1.1rem
}
.tools-badge svg{width:12px;height:12px;flex:none}

.tools-lede{text-align:left;max-width:56ch;margin:0}
.tools-section-h2{margin-top:3.4rem}
/* Break the grid out of the narrow .doc reading column, matching the technique
   the Blog page uses for .doc>.blog-grid. The .doc prefix is required for
   specificity: styles.css has `.doc ul{margin:0 0 1rem}`, which would otherwise
   beat a bare .tool-grid rule and zero the margin. */
.doc .tool-grid{width:min(72rem,calc(100vw - 2rem));margin-left:50%;transform:translateX(-50%)}
@media (max-width:760px){.doc .tool-grid{width:100%;margin-left:0;transform:none}}

/* ---------- tool grid: mirrors .blog-grid exactly ---------- */
.tool-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.25rem;margin-top:2.5rem}
@media (max-width:760px){.tool-grid{grid-template-columns:1fr;gap:1rem}}

.tool-card{
  position:relative;display:flex;flex-direction:column;overflow:hidden;padding:0;
  border:1px solid rgba(120,200,255,.26);border-radius:18px;
  background:linear-gradient(150deg,rgba(17,38,64,.95),rgba(7,14,28,.98));
  box-shadow:0 12px 30px rgba(0,0,0,.32),0 0 0 1px rgba(4,10,22,.6);
  transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease
}
.tool-card::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(135deg,rgba(53,199,255,.12),transparent 42%)
}
.tool-card:hover{transform:translateY(-5px);border-color:rgba(53,199,255,.75);box-shadow:0 20px 42px rgba(0,0,0,.45),0 0 26px rgba(53,199,255,.16)}
.tool-card:focus-within{border-color:rgba(53,199,255,.75);box-shadow:0 20px 42px rgba(0,0,0,.45),0 0 26px rgba(53,199,255,.2)}

.tool-card__icon{
  position:relative;z-index:1;display:grid;place-items:center;
  width:52px;height:52px;margin:1.5rem 1.5rem 0;
  border:1px solid rgba(53,199,255,.3);border-radius:14px;
  background:linear-gradient(160deg,rgba(53,199,255,.18),rgba(53,199,255,.04));color:#7fe3ff
}
.tool-card__icon svg{width:26px;height:26px}

.tool-card__body{position:relative;z-index:1;display:flex;flex-direction:column;flex:1;padding:1.1rem 1.5rem 1.5rem}
.tool-card__body .eyebrow{margin-bottom:.9rem;color:var(--cyan-soft)}
.tool-card h2{font:800 1.18rem/1.28 var(--head);margin:0 0 .8rem;color:#fff}
.tool-card h2 a{color:#fff;display:block}
.tool-card h2 a:hover,.tool-card h2 a:focus-visible{color:var(--cyan-soft)}
.tool-card__desc{color:var(--muted);font-size:.92rem;line-height:1.65;margin:0 0 1.1rem}
.tool-card__tags{display:flex;flex-wrap:wrap;gap:.4rem;margin:0 0 1.2rem;padding:0;list-style:none}
.tool-card__tags li{
  font-size:.72rem;font-weight:800;color:#7fe3ff;
  border:1px solid rgba(120,200,255,.18);border-radius:999px;
  padding:.28rem .65rem;background:rgba(53,199,255,.06)
}
.tool-card__cta{margin-top:auto;align-self:flex-start}
/* Whole-card click target, matching the blog card pattern.
   Scoped under .doc because styles.css sets `.doc a{color:#7fd6ff}`, which
   would otherwise win on specificity and colour the card titles cyan. */
.doc .tool-card__link::after{content:"";position:absolute;inset:0;z-index:2;border-radius:inherit}
.doc .tool-card h2 .tool-card__link{color:#fff}
.doc .tool-card h2 .tool-card__link:hover,.doc .tool-card h2 .tool-card__link:focus-visible{color:var(--cyan-soft)}
.doc .tool-card__link:focus-visible{outline:none}
.doc .tool-card__link:focus-visible::after{outline:2px solid var(--cyan);outline-offset:3px}

@media (max-width:760px){
  .tool-card__icon{width:46px;height:46px;margin:1.25rem 1.25rem 0}
  .tool-card__body{padding:1rem 1.25rem 1.25rem}
  .tool-card h2{font-size:1.08rem}
  .tool-card__cta{width:100%;justify-content:center}
}