/* =====================================================
   FINANZEN LANDING — minimal CSS companion to Tailwind
   Only things Tailwind can't handle via utility classes
   ===================================================== */


.logo-lamppost {
    height: 2em;
    width: auto;
    mix-blend-mode: multiply;
}
@media (min-width: 640px) {
    .logo-lamppost {
        height: 3.5em;
        position: relative;
        top: 0.4em;
    }
}

html {
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Remove default <details> marker across all browsers */
summary {
    list-style: none;
}
summary::-webkit-details-marker {
    display: none;
}

/* FAQ chevron rotation when open */
.faq-chevron {
    transition: transform 250ms ease;
}
details[open] .faq-chevron {
    transform: rotate(180deg);
}

/* Hero — phone & mascot responsive positioning (desktop only)
   Mascot right:-50% keeps it off-screen at narrow desktops; the section's
   overflow-hidden clips it, and it gradually reveals at wider viewports.
   Phone shifts from inside-column (lg) to slightly beyond (xl). */
@media (min-width: 1024px) {
    .hero-phone  { top: 12%; right: 17%; width: 80%; }
    .hero-mascot { top: 47%; right: -50%; }
}
@media (min-width: 1280px) {
    .hero-phone  { right: -10%; }
    .hero-mascot { top: 47%; right: -46%; }
}