/* Home hero (web_home.html). It runs up behind the transparent header and shares its grid:
   logo, headline and button start on one edge, and the product window runs off the right side.
   Pill, tray and toast use the header's frosted material, so bar and hero read as one surface. */

.hh {
    --hh-ink: #1d1d1f; --hh-body: #424245; --hh-muted: #6e6e73;
    --hh-blue: #0f69ff; --hh-blue-deep: #0b5be0;
    --hh-ease: cubic-bezier(0.22, 1, 0.36, 1);
    position: relative; overflow: clip;
    margin-top: calc(-1 * var(--nav-h, 64px));
    padding-top: calc(var(--nav-h, 64px) + 56px);
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", "Segoe UI", Lato, sans-serif;
    color: var(--hh-ink); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
    /* Washes start at the very top, so they glow through the header's glass */
    background:
        radial-gradient(48% 55% at 8% 0%, rgba(15, 105, 255, 0.16) 0%, rgba(15, 105, 255, 0) 70%),
        radial-gradient(40% 50% at 70% 8%, rgba(11, 165, 236, 0.13) 0%, rgba(11, 165, 236, 0) 70%),
        radial-gradient(45% 45% at 98% 60%, rgba(164, 87, 255, 0.12) 0%, rgba(164, 87, 255, 0) 70%),
        radial-gradient(50% 40% at 40% 100%, rgba(61, 214, 201, 0.14) 0%, rgba(61, 214, 201, 0) 70%),
        #fbfbfd;
}
/* The fold: the hero hands over to the white page below without a hard line */
.hh::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 120px; z-index: 2; pointer-events: none;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #ffffff);
}
.hh * { box-sizing: border-box; }

/* Same box as .site-nav__bar: 1120px, 24px gutters */
.hh-grid {
    display: grid; grid-template-columns: minmax(0, 560px) minmax(0, 1fr); gap: 64px; align-items: start;
    max-width: 1120px; margin: 0 auto; padding: 0 24px;
}
.hh-copy { padding: 8px 0 120px; }

/* Announcement pill in the header's glass */
.hh-news {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 5px 12px 5px 5px; margin-bottom: 28px; border-radius: 980px;
    font-size: 14px; font-weight: 500; color: var(--hh-body); text-decoration: none;
    background: rgba(255, 255, 255, 0.6);
    -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.8), 0 0 0 1px rgba(29, 29, 31, 0.08), 0 4px 12px -6px rgba(15, 23, 42, 0.18);
    transition: color 0.2s ease, box-shadow 0.25s ease;
}
.hh-news:hover { color: var(--hh-ink); text-decoration: none; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.8), 0 0 0 1px rgba(15, 105, 255, 0.35), 0 6px 16px -6px rgba(15, 105, 255, 0.35); }
.hh-news-tag { padding: 3px 9px; border-radius: 980px; font-size: 12px; font-weight: 700; letter-spacing: 0.01em; color: #ffffff; background: var(--hh-blue); }
.hh-news svg { color: var(--hh-muted); transition: transform 0.3s var(--hh-ease), color 0.2s ease; }
.hh-news:hover svg { color: var(--hh-blue); transform: translateX(2px); }

.hh-title {
    margin: 0; font-size: 62px; line-height: 1.02; letter-spacing: -0.03em; font-weight: 700; color: var(--hh-ink); text-wrap: balance;
}
.hh-title .hero-title-grad {
    display: block; padding-bottom: 0.06em;
    -webkit-background-clip: text; background-clip: text; color: transparent;
    background-image: linear-gradient(90deg, #0f69ff 0%, #0ba5ec 50%, #3dd6c9 100%);
}
.hh-lead { margin: 24px 0 0; max-width: 520px; font-size: 19px; line-height: 1.5; letter-spacing: -0.006em; color: var(--hh-body); text-wrap: pretty; }

.hh-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 32px; }
.hh a.add-to-slack-button {
    margin: 0; padding: 13px 26px 14px; border-radius: 980px;
    font-size: 17px; font-weight: 600; line-height: 1.2; letter-spacing: -0.01em; color: #ffffff;
    background: var(--hh-blue); border: 0;
    box-shadow: 0 10px 24px -10px rgba(15, 105, 255, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.18);
    transition: background-color 0.2s ease, box-shadow 0.25s ease, transform 0.2s var(--hh-ease);
}
.hh a.add-to-slack-button:hover { color: #ffffff; background: var(--hh-blue-deep); box-shadow: 0 14px 28px -12px rgba(15, 105, 255, 0.85), inset 0 1px 0 rgba(255, 255, 255, 0.18); }
.hh a.add-to-slack-button:active { transform: scale(0.98); }
.hh a.add-to-slack-button:focus-visible, .hh a:focus-visible { outline: 2px solid var(--hh-blue); outline-offset: 3px; }
.hh .hero-pricing-link {
    display: inline-flex; align-items: center; gap: 4px; padding: 0;
    font-size: 17px; font-weight: 500; color: var(--hh-blue); text-decoration: none;
}
.hh .hero-pricing-link:hover { color: var(--hh-blue-deep); text-decoration: none; }
.hh .hero-pricing-link svg { width: 0.8em; height: 0.8em; margin-top: 1px; transition: transform 0.25s var(--hh-ease); }
.hh .hero-pricing-link:hover svg { transform: translateX(3px); }

.hh .hero-proof { margin: 28px 0 0; font-size: 14px; line-height: 1.5; color: var(--hh-muted); }
.hh .hero-proof-sep { margin: 0 8px; color: #a1a1a6; }
.hh-alt { margin: 6px 0 0; font-size: 14px; color: var(--hh-muted); }
.hh-alt a { color: var(--hh-body); text-decoration: underline; text-decoration-color: rgba(29, 29, 31, 0.25); text-underline-offset: 3px; }
.hh-alt a:hover { color: var(--hh-ink); text-decoration-color: currentColor; }

/* Product stage: a frosted tray holding the Slack window, cut by the fold */
/* Starts level with the headline and runs past the grid to the viewport edge */
.hh-stage { position: relative; width: 780px; margin-top: 58px; }
.hh-tray {
    padding: 10px; border-radius: 26px;
    background: rgba(255, 255, 255, 0.5);
    -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.85), 0 0 0 1px rgba(29, 29, 31, 0.07),
                0 40px 80px -30px rgba(15, 23, 42, 0.35), 0 16px 32px -16px rgba(15, 23, 42, 0.18);
}
.hh-shot { display: block; width: 100%; height: auto; border-radius: 17px; }

/* The approval that lands on the window */
.hh-toast {
    position: absolute; left: -44px; top: 452px; z-index: 3;
    display: flex; align-items: center; gap: 10px;
    padding: 10px 16px 10px 10px; border-radius: 16px;
    background: rgba(255, 255, 255, 0.86);
    -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.9), 0 0 0 1px rgba(29, 29, 31, 0.08), 0 18px 36px -14px rgba(15, 23, 42, 0.35);
    font-family: Lato, -apple-system, "Segoe UI", sans-serif;
}
.hh-toast img { flex: none; width: 32px; height: 32px; border-radius: 8px; }
.hh-toast p { margin: 0; line-height: 1.3; }
.hh-toast-meta { font-size: 12px; color: var(--hh-muted); }
.hh-toast-meta strong { color: var(--hh-ink); font-weight: 900; }
.hh-toast-meta span { margin-left: 3px; padding: 0 3px; border-radius: 3px; font-size: 9px; font-weight: 700; background: rgba(29, 29, 31, 0.07); vertical-align: 1px; }
.hh-toast-text { font-size: 14px; color: var(--hh-body); white-space: nowrap; }
.hh-toast-text strong { color: var(--hh-ink); }
.hh-toast-check {
    display: inline-grid; place-items: center; width: 16px; height: 16px; margin-right: 4px; border-radius: 50%;
    font-size: 10px; font-weight: 900; color: #ffffff; background: #16a34a; vertical-align: -2px;
}

/* Until the page scrolls the header is clear glass: no blur or saturation over the washes */
.site-nav:not(.is-scrolled):not(.is-open)::before { -webkit-backdrop-filter: none; backdrop-filter: none; }

/* One entrance: header settles, copy rises line by line, the window lifts in, the approval lands */
@keyframes hh-rise  { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes hh-lift  { from { opacity: 0; transform: translateY(48px) scale(0.97); } to { opacity: 1; transform: none; } }
@keyframes hh-land  { 0% { opacity: 0; transform: translateY(14px) scale(0.92); } 70% { opacity: 1; transform: translateY(-2px) scale(1.01); } 100% { opacity: 1; transform: none; } }
@keyframes hh-drop  { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }

.site-nav__bar { animation: hh-drop 0.6s var(--hh-ease, ease) both; }
.hh-in    { animation: hh-rise 0.8s cubic-bezier(0.22, 1, 0.36, 1) both; animation-delay: calc(0.12s + var(--d, 0) * 0.07s); }
.hh .hero-proof { animation: hh-rise 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.4s both; }
.hh-tray  { animation: hh-lift 1.1s cubic-bezier(0.22, 1, 0.36, 1) 0.3s both; }
.hh-toast { animation: hh-land 0.7s cubic-bezier(0.22, 1, 0.36, 1) 1.25s both; }

@media (max-width: 1100px) {
    .hh-grid { grid-template-columns: minmax(0, 480px) minmax(0, 1fr); gap: 48px; }
    .hh-title { font-size: 54px; }
    .hh-stage { width: 680px; }
    .hh-toast { left: -24px; top: 396px; }
}
@media (max-width: 991.98px) {
    .hh { padding-top: calc(var(--nav-h, 64px) + 40px); }
    .hh-grid { grid-template-columns: minmax(0, 1fr); gap: 48px; max-width: 680px; }
    .hh-copy { padding-bottom: 0; }
    .hh-title { font-size: 52px; }
    .hh-stage { width: auto; margin: 0 -48px -40px 0; }
    .hh-toast { left: 16px; top: auto; bottom: 90px; }
}
@media (max-width: 480px) {
    .hh-grid { padding: 0 16px; gap: 40px; }
    .hh-title { font-size: 42px; }
    .hh-lead { font-size: 17px; }
    .hh .hero-proof-sep { margin: 0 5px; }
    .hh-tray { padding: 6px; border-radius: 18px; }
    .hh-shot { border-radius: 13px; }
    .hh-stage { margin: 0 -40px -24px 0; }
    .hh-toast { left: 8px; bottom: 44px; padding: 8px 12px 8px 8px; }
    .hh-toast-text { font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) {
    .site-nav__bar, .hh-in, .hh .hero-proof, .hh-tray, .hh-toast { animation: none !important; }
}