@font-face {
    font-family: "BloggerSL Inter";
    src: url("/assets/fonts/InterVariable.woff2?v=4.1") format("woff2-variations");
    font-style: normal;
    font-weight: 100 900;
    font-display: block;
}

:root {
    --public-font: "BloggerSL Inter", Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --public-header-height: 64px;
    --public-container: 1400px;
    --public-gutter: 24px;
    --public-wordmark-size: 24px;
    --public-wordmark-weight: 900;
    --public-nav-size: 13px;
    --public-nav-weight: 650;
    --public-nav-line: 20px;
    --public-control-height: 44px;
    --public-radius: 12px;
    --public-focus: #c084fc;
    --public-page-bg: #030014;
    --public-page-header-bg: rgba(5, 3, 25, .78);
    --public-page-gradient:
        radial-gradient(circle at 82% 8%, rgba(79,70,229,.22), transparent 34%),
        radial-gradient(circle at 10% 46%, rgba(126,34,206,.17), transparent 38%),
        radial-gradient(circle at 54% 100%, rgba(37,99,235,.08), transparent 42%),
        linear-gradient(145deg, #050016, #08082a 58%, #030014);
}

html { font-synthesis: none; background-color: var(--public-page-bg); }
body, button, input, select, textarea {
    font-family: var(--public-font) !important;
    font-synthesis: none;
    font-optical-sizing: auto;
}

body.public-page-shell {
    position: relative;
    isolation: isolate;
    min-height: 100vh;
    min-height: 100dvh;
    overflow-x: hidden;
    background-color: var(--public-page-bg) !important;
    background-image: none !important;
}
body.public-page-shell::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    background-color: var(--public-page-bg);
    background-image: var(--public-page-gradient);
    background-position: 0 0;
    background-repeat: no-repeat;
}
body.public-page-shell::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: .42;
    background-image:
        radial-gradient(circle, rgba(196,181,253,.18) 0 1px, transparent 1.25px),
        linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px);
    background-position: 11px 17px, 0 0, 0 0;
    background-size: 73px 73px, 56px 56px, 56px 56px;
}
body.public-page-shell > .aurora-bg,
body.public-page-shell > .grid-overlay,
body.public-page-shell > .noise-overlay,
body.public-page-shell > .orb,
body.public-page-shell > #particles {
    display: none !important;
}
.public-page-header {
    position: sticky !important;
    top: 0;
    z-index: 100 !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(255,255,255,.06) !important;
    background-color: var(--public-page-header-bg) !important;
    background-image: none !important;
    backdrop-filter: blur(24px) saturate(150%) !important;
    -webkit-backdrop-filter: blur(24px) saturate(150%) !important;
    box-shadow: 0 10px 32px rgba(3,0,20,.10);
}

.public-brand-header {
    height: var(--public-header-height);
    min-height: var(--public-header-height);
    box-sizing: border-box;
}
.public-brand-header > .pricing-nav-shell,
.public-brand-header .pricing-nav-row {
    height: 100%;
    min-height: 0 !important;
}
.public-brand-header__inner {
    width: 100%; max-width: var(--public-container); height: 100%; min-height: 0;
    margin-inline: auto; padding-inline: var(--public-gutter);
    display: flex; align-items: center; justify-content: space-between; gap: 20px;
}
.public-brand-bar {
    min-height: var(--public-header-height);
    display: flex; align-items: center; justify-content: space-between; gap: 20px;
}
.public-brand-wordmark {
    display: inline-flex; align-items: center; flex: none; min-height: var(--public-control-height);
    color: #fff !important; text-decoration: none !important; white-space: nowrap;
    font-family: var(--public-font) !important; font-size: var(--public-wordmark-size) !important;
    font-weight: var(--public-wordmark-weight) !important; line-height: 1 !important;
    letter-spacing: -.5px !important;
}
.public-brand-wordmark .public-brand-accent { color: #c084fc; -webkit-text-fill-color: currentColor; background: none; }
.public-brand-nav { display: flex; align-items: center; gap: 5px; }
.public-brand-nav-link {
    min-height: var(--public-control-height) !important; padding: 10px 14px !important;
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    border-radius: 10px; text-decoration: none;
    font-family: var(--public-font) !important; font-size: var(--public-nav-size) !important;
    font-weight: var(--public-nav-weight) !important; line-height: var(--public-nav-line) !important;
}
.public-shell-control {
    min-height: var(--public-control-height) !important;
    border-radius: var(--public-radius) !important;
    font-family: var(--public-font) !important; font-size: var(--public-nav-size) !important;
    font-weight: var(--public-nav-weight) !important; line-height: var(--public-nav-line) !important;
}
.public-brand-wordmark:focus-visible,
.public-brand-nav-link:focus-visible,
.public-shell-control:focus-visible {
    outline: 2px solid var(--public-focus) !important;
    outline-offset: 3px !important;
}

@media (max-width: 720px) {
    :root { --public-header-height: 62px; --public-gutter: 16px; --public-wordmark-size: 22px; }
    .public-brand-header__inner, .public-brand-bar { gap: 10px; }
    .public-brand-header .public-brand-nav { display: none !important; }
}

/* Homepage: tall single-column content must start at the top on mobile/tablet.
   Centering an item taller than the viewport clips the header above the canvas. */
@media (max-width: 1023.98px) {
    .home-shell {
        align-items: flex-start !important;
        min-height: 100vh;
        min-height: 100dvh;
    }
}

@media (max-width: 639.98px) {
    .home-shell {
        padding-top: max(16px, env(safe-area-inset-top)) !important;
        padding-right: max(16px, env(safe-area-inset-right)) !important;
        padding-bottom: max(24px, env(safe-area-inset-bottom)) !important;
        padding-left: max(16px, env(safe-area-inset-left)) !important;
    }
    .home-nav { margin-bottom: 20px !important; }
    .mobile-home-hero { margin-bottom: 12px !important; }
    .mobile-home-eyebrow { margin-bottom: 8px !important; }
    .mobile-home-hero h2 { margin-bottom: 4px !important; font-size: 28px !important; line-height: 1.05 !important; }
    .mobile-home-hero p { font-size: 12px !important; line-height: 1.35 !important; }
    .auth-surface { padding: 18px !important; }
    .auth-heading { margin-bottom: 14px !important; }
    .auth-heading h2 { font-size: 24px !important; line-height: 1.08 !important; }
    .auth-heading p { margin-top: 4px !important; font-size: 12px !important; line-height: 1.35 !important; }
    .auth-tabs { margin-bottom: 14px !important; }
    .tab-pill { min-height: 44px; padding: 8px 10px !important; font-size: 12px !important; }
    .tab-otp-label { display: none; }
    #login-form > :not([hidden]) ~ :not([hidden]) { margin-top: 12px !important; }
    #login-form label { margin-bottom: 6px !important; }
    #login-form .input-modern { min-height: 46px; padding-top: 12px; padding-bottom: 12px; }
    #login-form .mt-2 { margin-top: 6px !important; }
}

@media (max-width: 359.98px) {
    .auth-surface { padding: 16px !important; }
    .registration-ctas .cta-card { min-height: 58px; padding: 13px 14px; }
    .registration-ctas .cta-description { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .public-brand-wordmark, .public-brand-nav-link, .public-shell-control { transition: none !important; }
}