/* Public-site refinement layer: shared control geometry and small-screen safety. */

html,
body {
    max-width: 100%;
    overflow-x: clip;
}

.hhq-navInner,
.hhq-loginInner,
.hhq-loginLeft,
.hhq-loginCard,
.hhq-footerInner,
.hhq-footerBrand,
.hhq-footerLinks,
.hhq-footerCol,
.hhq-footerBottomInner {
    min-width: 0;
}

.hhq-btnPrimary,
.hhq-btnSecondary,
.hhq-btnGhost {
    min-height: 44px;
    border-radius: 9999px;
}

.hhq-btnPrimary {
    box-shadow: 0 8px 20px rgba(251, 191, 36, 0.16);
}

.hhq-btnPrimary:hover {
    box-shadow: 0 10px 24px rgba(251, 191, 36, 0.22);
}

.hhq-loginCard {
    border-radius: 18px;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.42);
}

.hhq-input {
    min-height: 46px;
    border-radius: 10px;
}

.hhq-input:focus-visible,
.hhq-nav a:focus-visible,
.hhq-footer a:focus-visible {
    outline: 3px solid rgba(251, 191, 36, 0.42);
    outline-offset: 3px;
}

@media (max-width: 900px) {
    .hhq-loginHero {
        padding: 104px 0 72px;
    }

    .hhq-loginInner {
        gap: 36px;
    }

    .hhq-loginLeft,
    .hhq-loginCard {
        width: 100%;
        max-width: 620px;
    }
}

@media (max-width: 640px) {
    .hhq-container {
        width: 100%;
        padding-inline: 18px;
    }

    .hhq-navInner {
        gap: 12px;
    }

    .hhq-logo,
    .hhq-logo img {
        max-width: 132px;
        height: auto;
    }

    .hhq-navCta {
        flex: 0 0 auto;
        min-height: 42px;
        padding-inline: 15px;
        font-size: 14px;
        white-space: nowrap;
    }

    .hhq-loginHero {
        padding: 88px 0 56px;
    }

    .hhq-loginInner {
        gap: 28px;
    }

    .hhq-loginTitle {
        font-size: clamp(38px, 12vw, 48px);
        line-height: 1.02;
        overflow-wrap: anywhere;
    }

    .hhq-loginCard {
        padding: 22px 18px;
        border-radius: 16px;
    }

    .hhq-loginOptions,
    .hhq-formLabelRow {
        flex-wrap: wrap;
        gap: 10px;
    }

    .hhq-footerInner {
        gap: 36px;
        padding-top: 48px;
        padding-bottom: 48px;
    }

    .hhq-footerLinks {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 28px 20px;
    }

    .hhq-footerBrandLogo {
        max-width: 150px;
    }
}

@media (max-width: 420px) {
    .hhq-container {
        padding-inline: 16px;
    }

    .hhq-logo,
    .hhq-logo img {
        max-width: 112px;
    }

    .hhq-navCta {
        padding-inline: 12px;
        font-size: 13px;
    }

    .hhq-footerLinks {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hhq-animate,
    .hhq-featureCard,
    .hhq-btnPrimary,
    .hhq-btnSecondary,
    .hhq-btnGhost {
        animation: none !important;
        transition-duration: 0.01ms !important;
    }
}


/* =========================================================
   HiveHQ Public Website — 2026 Final Polish
   Authoritative customer-facing overrides.
   ========================================================= */

:root {
    --hhq-public-yellow: #fbbf24;
    --hhq-public-yellow-strong: #f59e0b;
    --hhq-public-surface: rgba(255, 255, 255, 0.045);
    --hhq-public-surface-hover: rgba(255, 255, 255, 0.07);
    --hhq-public-border: rgba(255, 255, 255, 0.11);
    --hhq-public-border-strong: rgba(255, 255, 255, 0.18);
    --hhq-public-muted: #a8a8ad;
    --hhq-public-radius: 20px;
    --hhq-public-pill: 9999px;
}

.hhq-home,
.hhq-products-page,
.hhq-features-page,
.hhq-compliance-page,
.hhq-auth-page,
.hhq-login-page,
.legalPage,
.supportPage {
    background: #050505;
}

/* Every customer-facing button is a pill. */
.hhq-home button,
.hhq-products-page button,
.hhq-features-page button,
.hhq-compliance-page button,
.hhq-auth-page button,
.hhq-login-page button,
.supportPage button,
.legalPage button,
.hhq-btn,
.hhq-btnPrimary,
.hhq-btnSecondary,
.hhq-btnGhost,
.hhq-linkBtn,
.hhq-featuresTab,
.hhq-navToggle,
.supportSubmitBtn {
    border-radius: var(--hhq-public-pill) !important;
}

.hhq-btn {
    min-height: 48px;
    padding-inline: 22px;
    gap: 10px;
    font-weight: 750;
    letter-spacing: -0.01em;
}

.hhq-btnLarge { min-height: 54px; padding-inline: 28px; }
.hhq-btn i { font-size: 0.95em; }
.hhq-btnIcon { width: auto; height: auto; font-size: 0.95em; }
.hhq-btn:hover .hhq-btnIcon { transform: translateX(2px); }

.hhq-btnPrimary {
    border: 1px solid rgba(251, 191, 36, 0.55);
    background: linear-gradient(180deg, #ffd05a 0%, var(--hhq-public-yellow) 50%, var(--hhq-public-yellow-strong) 100%);
    color: #090909;
    box-shadow: 0 8px 24px rgba(251, 191, 36, 0.18), inset 0 1px rgba(255, 255, 255, 0.42);
}

.hhq-btnPrimary:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 28px rgba(251, 191, 36, 0.24), inset 0 1px rgba(255, 255, 255, 0.48);
}

.hhq-btnSecondary,
.hhq-btnGhost {
    border: 1px solid var(--hhq-public-border);
    background: rgba(255, 255, 255, 0.045);
    color: #f5f5f5;
    box-shadow: inset 0 1px rgba(255, 255, 255, 0.035);
}

.hhq-btnSecondary:hover,
.hhq-btnGhost:hover {
    border-color: var(--hhq-public-border-strong);
    background: rgba(255, 255, 255, 0.085);
    transform: translateY(-1px);
}

.hhq-btn:disabled,
.supportSubmitBtn:disabled { transform: none !important; box-shadow: none !important; opacity: 0.55; }

/* Font Awesome replaces bespoke inline SVG iconography. */
.hhq-featureIcon i,
.hhq-complianceIcon i { font-size: 22px; line-height: 1; }
.hhq-trustIcon,
.hhq-socialIcon { width: 18px; text-align: center; line-height: 1; }
.hhq-trustIcon { color: #d3d3d7; opacity: 0.8; }
.hhq-socialIcon { color: var(--hhq-public-yellow); opacity: 0.9; }
.hhq-productCheck { width: 18px; margin-top: 4px; color: #34d399; text-align: center; }

/* Global public typography and section rhythm. */
.hhq-hero,
.hhq-productsHero,
.hhq-featuresHero,
.hhq-complianceHero,
.hhq-auth-hero,
.hhq-loginHero { isolation: isolate; }

.hhq-hero { padding-top: 176px; padding-bottom: 112px; }
.hhq-productsHero,
.hhq-featuresHero,
.hhq-complianceHero { padding-top: 150px; padding-bottom: 90px; }
.hhq-auth-hero,
.hhq-loginHero { padding-top: 140px; padding-bottom: 90px; }

.hhq-heroContent { max-width: 790px; }
.hhq-heroTitle,
.hhq-productsTitle,
.hhq-featuresTitle,
.hhq-complianceTitle,
.hhq-auth-title,
.hhq-loginTitle {
    text-wrap: balance;
    letter-spacing: -0.045em;
}

.hhq-heroSubtitle,
.hhq-productsSubtitle,
.hhq-featuresSubtitle,
.hhq-complianceSubtitle,
.hhq-auth-subtitle,
.hhq-loginSubtitle { color: #aaaab0; text-wrap: pretty; }

.hhq-badge,
.hhq-auth-badge {
    border-color: rgba(251, 191, 36, 0.18);
    background: rgba(251, 191, 36, 0.065);
    color: #d4d4d8;
    box-shadow: inset 0 1px rgba(255, 255, 255, 0.035);
}

.hhq-badgeDot { background: #34d399; box-shadow: 0 0 12px rgba(52, 211, 153, 0.65); }

.hhq-heroTrust { gap: 30px; }
.hhq-trustItem { color: #96969d; font-weight: 550; }

/* Cards: quieter borders, stronger hierarchy, less visual noise. */
.hhq-featureCard,
.hhq-productCard,
.hhq-productsPanel,
.hhq-complianceCard,
.hhq-compliancePolicyCard,
.hhq-compliancePanel,
.hhq-auth-miniCard,
.hhq-auth-card,
.hhq-loginCard,
.hhq-matrixCard,
.hhq-howStep,
.hhq-faqItem,
.hhq-pricingNoteCard {
    border-color: var(--hhq-public-border);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.048), rgba(255, 255, 255, 0.025));
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.18), inset 0 1px rgba(255, 255, 255, 0.025);
}

.hhq-featureCard,
.hhq-productCard,
.hhq-complianceCard,
.hhq-compliancePolicyCard,
.hhq-auth-miniCard,
.hhq-howStep,
.hhq-faqItem { border-radius: var(--hhq-public-radius); }

.hhq-featureCard,
.hhq-productCard,
.hhq-complianceCard,
.hhq-auth-miniCard {
    transition: transform 180ms ease, border-color 180ms ease, background 180ms ease, box-shadow 180ms ease;
}

.hhq-featureCard:hover,
.hhq-productCard:hover,
.hhq-complianceCard:hover,
.hhq-auth-miniCard:hover {
    transform: translateY(-3px);
    border-color: rgba(251, 191, 36, 0.20);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.064), rgba(255, 255, 255, 0.03));
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.25);
}

.hhq-featureIcon,
.hhq-complianceIcon {
    width: 50px;
    height: 50px;
    border: 1px solid currentColor;
    border-radius: 16px;
}

.hhq-featureIconYellow { border-color: rgba(251, 191, 36, 0.18); }
.hhq-featureIconBlue { border-color: rgba(59, 130, 246, 0.18); }
.hhq-featureIconGreen { border-color: rgba(16, 185, 129, 0.18); }

.hhq-featureTitle,
.hhq-productName,
.hhq-complianceCardTitle { letter-spacing: -0.02em; }
.hhq-featureDesc,
.hhq-productSubtitle,
.hhq-complianceCardDesc { color: #a9a9af; }

.hhq-chip,
.hhq-productBadge,
.hhq-complianceSplitBadge,
.hhq-pill,
.hhq-planBadge {
    border-radius: var(--hhq-public-pill);
}

/* Features tabs are independent pill controls rather than a segmented rectangle. */
.hhq-featuresTabs {
    gap: 6px;
    padding: 5px;
    overflow: visible;
    border-radius: var(--hhq-public-pill);
    background: rgba(255, 255, 255, 0.025);
}

.hhq-featuresTab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding: 0 16px;
    border: 1px solid transparent;
}

.hhq-featuresTab:hover { color: #fff; background: rgba(255, 255, 255, 0.045); }
.hhq-featuresTab.is-active {
    border-color: rgba(251, 191, 36, 0.20);
    background: rgba(251, 191, 36, 0.11);
    color: #fff;
}

/* Product and compliance visual hierarchy. */
.hhq-productCard { position: relative; overflow: hidden; }
.hhq-productCard::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(251, 191, 36, 0.65), transparent);
    opacity: 0.55;
}
.hhq-productList { flex: 1; }
.hhq-productCtaRow { margin-top: auto; padding-top: 24px; }
.hhq-productsMetric { border-radius: 14px; }
.hhq-productsMetricValue { color: #f9c84a; }
.hhq-complianceRow { border-radius: 14px; }

/* Auth/contact surfaces. */
.hhq-auth-shell,
.hhq-loginInner { align-items: center; }
.hhq-auth-card,
.hhq-loginCard {
    border-radius: 24px;
    background: linear-gradient(180deg, rgba(20, 20, 20, 0.94), rgba(10, 10, 10, 0.96));
    box-shadow: 0 28px 90px rgba(0, 0, 0, 0.48), inset 0 1px rgba(255, 255, 255, 0.035);
}
.hhq-auth-cardHeader { padding-bottom: 20px; }
.hhq-auth-cardTitle,
.hhq-loginCardHeader h2 { font-size: 22px; letter-spacing: -0.025em; }
.hhq-auth-miniGrid { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 650px; }
.hhq-auth-miniCard { padding: 18px; }

.hhq-input,
.hhq-auth-page .e-input-group,
.hhq-login-page .e-input-group,
.hhq-auth-page .e-control-wrapper,
.hhq-login-page .e-control-wrapper,
.hhq-sf-input.e-input-group,
.hhq-sf-input.e-control-wrapper {
    min-height: 48px;
    border: 1px solid rgba(255, 255, 255, 0.13) !important;
    border-radius: 14px !important;
    background: rgba(255, 255, 255, 0.035) !important;
    color: #fff !important;
    box-shadow: none !important;
}

.hhq-auth-page .e-input-group.e-input-focus,
.hhq-login-page .e-input-group.e-input-focus,
.hhq-sf-input.e-input-focus,
.hhq-input:focus {
    border-color: rgba(251, 191, 36, 0.65) !important;
    box-shadow: 0 0 0 4px rgba(251, 191, 36, 0.10) !important;
}

.hhq-linkBtn {
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 0 11px;
    border: 1px solid rgba(255, 255, 255, 0.10);
    background: rgba(255, 255, 255, 0.035);
}
.hhq-linkBtn:hover { border-color: rgba(255, 255, 255, 0.18); background: rgba(255, 255, 255, 0.065); }

.hhq-contactTextarea { min-height: 150px; padding-block: 12px; resize: vertical; }
.hhq-contactSuccess { padding: 12px 14px; border: 1px solid rgba(52, 211, 153, 0.28); border-radius: 14px; background: rgba(52, 211, 153, 0.08); color: #86efac; }

/* Use Font Awesome for login checklist checkmarks. */
.hhq-loginChecklist li::before {
    content: "\f00c";
    width: 22px;
    height: 22px;
    display: inline-grid;
    place-items: center;
    border: 1px solid rgba(52, 211, 153, 0.22);
    border-radius: 50%;
    background: rgba(52, 211, 153, 0.08);
    color: #34d399;
    font-family: "Font Awesome 6 Free";
    font-size: 11px;
    font-weight: 900;
}

/* Legal pages should look intentional, not like raw document text. */
.legalPage { padding: 128px 20px 80px; }
.legalContainer {
    max-width: 920px;
    padding: clamp(26px, 5vw, 56px);
    border: 1px solid var(--hhq-public-border);
    border-radius: 24px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.022));
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.24);
}
.legalContainer h1 { margin: 0; font-size: clamp(38px, 6vw, 52px); letter-spacing: -0.04em; }
.legalContainer h2 { margin-top: 34px; color: #fff; font-size: 21px; letter-spacing: -0.02em; }
.legalContainer p,
.legalContainer li { color: #b1b1b7; }
.legalContainer strong { color: #f3f3f4; }
.legalUpdated { color: #7f7f86; }

/* Footer and navigation finishing touches. */
.hhq-nav { border-bottom-color: rgba(255, 255, 255, 0.075); background: rgba(5, 5, 5, 0.82); }
.hhq-footer { background: #050505; }
.hhq-footerCol a { transition: color 150ms ease; }
.hhq-footerCol a:hover { color: #f7c948; text-decoration: none; }

/* Accessibility and motion. */
.hhq-btn:focus-visible,
.hhq-featuresTab:focus-visible,
.hhq-linkBtn:focus-visible,
.hhq-navToggle:focus-visible,
.supportSubmitBtn:focus-visible {
    outline: 3px solid rgba(251, 191, 36, 0.5);
    outline-offset: 3px;
}

@media (max-width: 1024px) {
    .hhq-auth-miniGrid { grid-template-columns: 1fr; max-width: 620px; }
}

@media (max-width: 768px) {
    .hhq-hero { padding-top: 132px; padding-bottom: 76px; }
    .hhq-productsHero,
    .hhq-featuresHero,
    .hhq-complianceHero,
    .hhq-auth-hero,
    .hhq-loginHero { padding-top: 112px; padding-bottom: 64px; }
    .hhq-productsTitle,
    .hhq-featuresTitle,
    .hhq-complianceTitle,
    .hhq-auth-title,
    .hhq-loginTitle { font-size: clamp(38px, 10vw, 48px); }
    .hhq-featuresTabs { width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .hhq-featuresTab { justify-content: center; padding-inline: 10px; }
}

@media (max-width: 520px) {
    .hhq-btn,
    .hhq-btnLarge { min-height: 48px; padding-inline: 18px; }
    .hhq-productsHeroButtons .hhq-btn,
    .hhq-featuresHeroButtons .hhq-btn,
    .hhq-complianceCtaButtons .hhq-btn,
    .hhq-productsSplitActions .hhq-btn { width: 100%; }
    .hhq-featuresTabs { grid-template-columns: 1fr; border-radius: 22px; }
    .hhq-featuresTab { width: 100%; }
    .legalPage { padding: 96px 14px 48px; }
    .legalContainer { padding: 24px 20px; border-radius: 20px; }
}