/* Public website styles (layouts/public.php), moved out of the page so every visit does not
   download them again. Linked with ?v=<mtime>; cached for a year. */
[x-cloak]{display:none!important}

/* ============================================================
   Shared design tokens — keep public + app pages visually consistent.
   ============================================================ */

/* Primary gradient button */
.btn-brand {
    background-image: linear-gradient(180deg, #3B86F4 0%, #2C7BF2 60%, #1F66D6 100%);
    color: #fff;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.25) inset,
        0 1px 2px rgba(10, 30, 63, 0.25),
        0 8px 22px -8px rgba(44, 123, 242, 0.55);
    transition: box-shadow .2s ease, transform .15s ease;
}
.btn-brand:hover {
    background-image: linear-gradient(180deg, #4790F6 0%, #2F80F4 60%, #1F66D6 100%);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.3) inset,
        0 2px 4px rgba(10, 30, 63, 0.3),
        0 14px 30px -8px rgba(44, 123, 242, 0.6);
    transform: translateY(-1px);
}

/* Outlined button on dark backgrounds */
.btn-ghost-light {
    background: rgba(255, 255, 255, 0.05);
    color: #fff;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.18) inset;
    transition: background .2s ease, box-shadow .2s ease;
}
.btn-ghost-light:hover {
    background: rgba(255, 255, 255, 0.12);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.30) inset;
}

/* Card surfaces */
.card-surface {
    background: #FFFFFF;
    border-radius: 1rem;
    box-shadow:
        0 1px 2px rgba(15, 23, 42, 0.04),
        0 0 0 1px rgba(15, 23, 42, 0.06);
}
.card-hover {
    background: #FFFFFF;
    border-radius: 1rem;
    transition: transform .2s ease, box-shadow .2s ease;
    box-shadow:
        0 1px 2px rgba(15, 23, 42, 0.04),
        0 0 0 1px rgba(15, 23, 42, 0.06);
}
.card-hover:hover {
    transform: translateY(-3px);
    box-shadow:
        0 18px 40px -16px rgba(10, 30, 63, 0.18),
        0 2px 6px rgba(15, 23, 42, 0.05),
        0 0 0 1px rgba(44, 123, 242, 0.20);
}

/* Hero backdrop: deep navy with blue + cyan glows, plus a subtle dot grid */
.hero-dark {
    background:
        radial-gradient(50rem 30rem at 80% 20%, rgba(44, 123, 242, 0.35) 0%, transparent 60%),
        radial-gradient(40rem 25rem at 15% 90%, rgba(96, 165, 250, 0.18) 0%, transparent 60%),
        linear-gradient(180deg, #0A1E3F 0%, #0E2547 100%);
}
.hero-dots {
    background-image: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.06) 1px, transparent 0);
    background-size: 22px 22px;
}

/* Light section backdrop */
.section-soft {
    background:
        radial-gradient(40rem 24rem at 100% 0%, rgba(44, 123, 242, 0.05) 0%, transparent 60%),
        #F6F8FB;
}

/* ============================================================
   Glow titles — inspired by the "programmatically" blue word
   treatment. Applied to all major h1/h2 on public pages so the
   brand-blue accents have a consistent, slightly luminous feel.
   ============================================================ */
.title-glow {
    color: #2C7BF2;
    text-shadow:
        0 0 24px rgba(44, 123, 242, 0.42),
        0 0 60px rgba(44, 123, 242, 0.18);
}
/* Gradient title that also carries the soft glow, for headlines
   that already use the from-blue-300 -> via-brand-blue -> to-blue-300
   gradient. The drop-shadow renders against the actual glyph paths. */
.title-grad-glow {
    background: linear-gradient(90deg, #60A5FA 0%, #2C7BF2 50%, #93C5FD 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(0 0 28px rgba(44, 123, 242, 0.38));
}
/* Drop-in utility — add `glow-blue` to any element (works on gradient-text
   spans too because drop-shadow follows the rendered glyph). */
.glow-blue {
    filter: drop-shadow(0 0 24px rgba(44, 123, 242, 0.45));
}
.glow-blue-soft {
    filter: drop-shadow(0 0 18px rgba(44, 123, 242, 0.28));
}

/* ============================================================
   Mobile-first refinements
   ============================================================ */

/* Use the dynamic viewport unit so the address bar collapsing on iOS Safari
   doesn't push hero content out of view. Falls back to vh on older browsers. */
.h-screen-mobile { min-height: 100vh; min-height: 100dvh; }

/* Bump up the tap target on every interactive element below the md breakpoint.
   Apple HIG + Material both recommend 44 × 44 px minimum. Excludes inline icon-only
   helpers that explicitly opt out with .no-tap-min. */
@media (max-width: 767px) {
    a, button, [role="button"], input[type="submit"], input[type="button"] {
        min-height: 36px;
    }
    a.no-tap-min, button.no-tap-min { min-height: auto; }

    /* Tighten section padding on small screens so the hero is reachable
       without scrolling past 1.5 viewports of whitespace. */
    section[class*="py-20"] { padding-top: 3rem !important; padding-bottom: 3rem !important; }
    section[class*="py-24"] { padding-top: 3.5rem !important; padding-bottom: 3.5rem !important; }

    /* Stop large display headlines from overflowing on narrow phones. */
    h1.text-7xl, h1.text-6xl, h2.text-7xl, h2.text-6xl { font-size: 2.5rem; line-height: 1.05; }
    h1.text-5xl, h2.text-5xl { font-size: 2.25rem; line-height: 1.1; }

    /* Prevent any descendant from blowing out the viewport horizontally. */
    body { overflow-x: hidden; }
}
@media (max-width: 480px) {
    h1.text-7xl, h1.text-6xl, h2.text-7xl, h2.text-6xl { font-size: 2rem; }
}

/* "How it works" dashed connector — desktop only */
@media (min-width: 768px) {
    .step-connector {
        position: relative;
    }
    .step-connector::after {
        content: "";
        position: absolute;
        top: 1.75rem;
        left: calc(100% - 1rem);
        right: -1rem;
        height: 2px;
        background-image: linear-gradient(to right, #CBD5E1 50%, transparent 0%);
        background-size: 12px 2px;
        background-repeat: repeat-x;
    }
    .step-connector:last-child::after { display: none; }
}