/* Harpoon free tools: styles shared by every tool page (sections around the
   tool, the /tools hub grid, the hero figure). Engine styles live in
   time-calculator.css and invoice-builder.css. */
.hp-tool-section { padding: 0 0 10px; }
.hp-copy-section { padding: 30px 0 10px; }
.hp-copy { max-width: 760px; margin: 0 auto; font-size: 1.7rem; line-height: 1.7; }
.hp-copy h2 { font-size: 2.4rem; margin: 32px 0 12px; }
.hp-copy h2:first-child { margin-top: 0; }
.hp-copy ul { padding-left: 22px; }
.hp-copy li { margin-bottom: 8px; }
/* Hub grid */
.hp-tools-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; max-width: 960px; margin: 0 auto; }
.hp-tools-card { display: block; padding: 24px; background: #fff; border: 1px solid #e4e4e4; border-radius: 8px; color: #222; text-decoration: none; transition: box-shadow .15s, border-color .15s; }
.hp-tools-card:hover { border-color: #1bbdf6; box-shadow: 0 6px 20px rgba(27,189,246,.15); }
.hp-tools-card h2 { font-size: 2rem; margin: 0 0 8px; color: #1bbdf6; }
.hp-tools-card p { margin: 0; font-size: 1.5rem; line-height: 1.6; color: #555; }

/* Hero figure: the site's small line-art illustrations set in a pale circle */
.hp-hero-figure { display: flex; align-items: center; justify-content: center; width: 300px; max-width: 100%; aspect-ratio: 1; margin: 0 0 0 auto; border-radius: 50%; background: #e3f6fd; }
.hp-hero-figure img { width: 62%; height: auto; }
.hp-hero-figure--small { width: 180px; margin: 20px 0 24px; }
.hp-hero-figure--small img { width: 60%; }
.hero.features-hero .hp-hero-note { margin: 0; color: #8e8e8e; font-size: 1.5rem; }
@media (max-width: 767px) { .hp-hero-figure { margin: 0 auto; } .hp-hero-figure--small { margin: 20px auto 24px; } }