/*
 * The canonical tool hero.
 *
 * This used to be an inline <style> block pasted into the body of all twelve
 * tool pages, in eight slightly different variants totalling 16 KB. It is
 * identical everywhere apart from a one line --sk-hero-max override, so it now
 * lives here once and each page keeps only its own override.
 *
 * Pages can still tune the hero with the custom properties below:
 *   --sk-hero-max   caps the hero width (default 100%)
 *   --sk-hero-gap   space beneath the hero (default 24px)
 */

.sk-hero {
    --skh-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    --skh-purple: #68438b;
    --skh-purple-dark: #452b61;
    --skh-line: #e6ddec;
    --skh-muted: #5f5269;
    max-width: var(--sk-hero-max, 100%);
    margin: 0 auto var(--sk-hero-gap, 24px);
    padding: 38px 40px;
    border: 1px solid var(--skh-line);
    border-radius: 28px;
    background: linear-gradient(135deg, #fbf8fd 0%, #f1eafa 100%);
    box-shadow: 0 16px 40px rgba(69, 43, 97, .08);
    font-family: var(--skh-font);
    text-align: left;
}

.sk-hero-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--skh-purple);
    font-family: var(--skh-font);
    font-size: .78rem;
    font-weight: 800;
    line-height: 1.4;
    letter-spacing: .11em;
    text-transform: uppercase;
}

.sk-hero-kicker:before {
    content: "";
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #b36b9b;
}

.sk-hero h1 {
    margin: 12px 0 10px;
    color: var(--skh-purple-dark);
    font-family: var(--skh-font);
    font-size: clamp(2rem, 4vw, 3.2rem);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -.03em;
}

.sk-hero p {
    max-width: 720px;
    margin: 0;
    color: var(--skh-muted);
    font-family: var(--skh-font);
    font-size: 1.08rem;
    line-height: 1.65;
}

@media (max-width: 820px) {
    .sk-hero {
        padding: 30px 26px;
    }
}