/* ============================================================
   SAVOZI — topic hubs (Watermark, AI Prompts, PDF, Writing)
   Loads after tools.css, whose grid, card, chip and FAQ styles
   the hub template reuses.
   ============================================================ */

.hub-page{padding-bottom:4rem}
.hub-hero{padding:1rem 0 .5rem}
.hub-title{font-size:clamp(2rem,4.6vw,3rem);font-weight:800;letter-spacing:-.025em;margin:.4rem 0 .9rem}
.hub-intro{color:var(--ink-soft);font-size:1.08rem;line-height:1.65;margin-bottom:1rem;max-width:44rem}

/* Flagship tool card */
.hub-flagship{
	display:flex;align-items:center;gap:1.3rem;
	background:#fff;border:1.5px solid #c9bdf5;border-radius:var(--radius);
	padding:1.5rem 1.7rem;margin:1.6rem 0 2.8rem;color:var(--ink);
	box-shadow:var(--shadow-md);transition:transform .3s,box-shadow .3s;
}
.hub-flagship:hover{transform:translateY(-4px);color:var(--ink)}
.hub-flagship .tool-card-icon{width:64px;height:64px;border-radius:18px;flex-shrink:0}
.hub-flagship .tool-card-icon svg{width:32px;height:32px}
.hub-flagship-body{display:flex;flex-direction:column;gap:.15rem;flex:1;min-width:0}
.hub-flagship-label{font-size:.75rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--brand-2)}
.hub-flagship-name{font-size:1.45rem;font-weight:800;letter-spacing:-.01em}
.hub-flagship-tag{color:var(--ink-soft);font-size:.98rem}
.hub-flagship .tool-card-cta{font-size:1rem;white-space:nowrap}

/* Hub grids sit closer to their section heads than the /tools/ grid */
.hub-tools-grid{margin:.4rem 0 3rem}
.hub-post-grid{margin:.4rem 0 3rem}

@media (max-width:640px){
	.hub-flagship{flex-direction:column;align-items:flex-start;gap:.9rem;padding:1.3rem 1.2rem}
}