/* ExoPetBayan mobile header */

.app-header {
    height: 74px;
    padding: 12px 14px;
    display: grid;
    grid-template-columns: 42px 1fr 42px;
    align-items: center;
    gap: 8px;
    background: rgba(4, 17, 11, .97);
    border-bottom: 1px solid rgba(255, 200, 61, .25);
    position: sticky;
    top: 0;
    z-index: 30;
    backdrop-filter: blur(10px);
    overflow: hidden;
}

/* Soft jungle leaves, deliberately subtle */
.app-header::before,
.app-header::after {
    content: "";
    position: absolute;
    width: 86px;
    height: 86px;
    pointer-events: none;
    opacity: .12;
    z-index: 0;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
}

.app-header::before {
    left: -26px;
    top: -27px;
    transform: rotate(18deg);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='%2370a76e'%3E%3Cellipse cx='34' cy='30' rx='11' ry='25' transform='rotate(-38 34 30)'/%3E%3Cellipse cx='57' cy='46' rx='10' ry='23' transform='rotate(35 57 46)'/%3E%3Cellipse cx='34' cy='65' rx='9' ry='21' transform='rotate(-55 34 65)'/%3E%3Cpath d='M18 84 C36 62 51 42 72 18' fill='none' stroke='%2370a76e' stroke-width='5' stroke-linecap='round'/%3E%3C/g%3E%3C/svg%3E");
}

.app-header::after {
    right: -29px;
    top: -30px;
    transform: rotate(-24deg) scaleX(-1);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='%2370a76e'%3E%3Cellipse cx='34' cy='30' rx='11' ry='25' transform='rotate(-38 34 30)'/%3E%3Cellipse cx='57' cy='46' rx='10' ry='23' transform='rotate(35 57 46)'/%3E%3Cellipse cx='34' cy='65' rx='9' ry='21' transform='rotate(-55 34 65)'/%3E%3Cpath d='M18 84 C36 62 51 42 72 18' fill='none' stroke='%2370a76e' stroke-width='5' stroke-linecap='round'/%3E%3C/g%3E%3C/svg%3E");
}

.app-header__menu,
.app-header__brand,
.app-header__decor {
    position: relative;
    z-index: 1;
}

.app-header__menu {
    font-size: 30px;
    line-height: 1;
    font-weight: 400;
    text-decoration: none;
}

.app-header__brand {
    text-align: center;
    font-weight: 400;
    letter-spacing: -.6px;
    line-height: .9;
    text-decoration: none;
}

.app-header__brand-exo {
    font-size: 28px;
    color: #ff9f0a;
    text-shadow: 0 2px 0 #4a2600;
}

.app-header__brand-bayan {
    font-size: 28px;
    color: #73c72c;
    text-shadow: 0 2px 0 #143d11;
}

.app-header__brand small {
    display: block;
    margin-top: 5px;
    font-size: 8px;
    font-weight: 400;
    letter-spacing: 1px;
    color: #f2e9d0;
}

.app-header__decor {
    width: 42px;
    height: 42px;
}


/* Header without burger menu: decorative jungle leaves on both sides */
.app-header {
    grid-template-columns: 54px 1fr 54px !important;
}

.app-header__leaf-cluster,
.app-header__decor {
    position: relative;
    z-index: 1;
    width: 54px;
    height: 54px;
    pointer-events: none;
}

.app-header__leaf-cluster::before,
.app-header__leaf-cluster::after,
.app-header__decor::before,
.app-header__decor::after {
    content: "";
    position: absolute;
    border-radius: 70% 30% 70% 30%;
    background: linear-gradient(145deg, rgba(92, 150, 77, .44), rgba(35, 88, 47, .18));
    box-shadow: inset 0 0 0 1px rgba(176, 220, 146, .08);
}

.app-header__leaf-cluster::before,
.app-header__decor::before {
    width: 22px;
    height: 39px;
    left: 4px;
    top: 6px;
    transform: rotate(-38deg);
}

.app-header__leaf-cluster::after,
.app-header__decor::after {
    width: 18px;
    height: 33px;
    left: 25px;
    top: 14px;
    transform: rotate(35deg);
}

.app-header__decor {
    transform: scaleX(-1);
    opacity: .9;
}

.app-header__brand {
    font-weight: 400 !important;
}


/* Left-aligned brand, decorative leaves only on the right */
.app-header {
    grid-template-columns: 1fr 72px !important;
    padding-left: 16px !important;
    padding-right: 8px !important;
}

.app-header__brand {
    justify-self: start !important;
    text-align: left !important;
    font-weight: 400 !important;
    margin-left: 0 !important;
}

.app-header__brand-exo,
.app-header__brand-bayan,
.app-header__brand small {
    font-weight: 400 !important;
}

.app-header__leaf-cluster {
    display: none !important;
}

.app-header__decor {
    justify-self: end !important;
    width: 64px !important;
    height: 58px !important;
    opacity: .9 !important;
    transform: scaleX(-1) !important;
}

.app-header::before {
    display: none !important;
}

.app-header::after {
    right: -10px !important;
    top: -18px !important;
    width: 96px !important;
    height: 96px !important;
    opacity: .16 !important;
}

/* Center logo again, but keep decorative leaves only on the right */
.app-header {
    grid-template-columns: 1fr auto 1fr !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
}

.app-header__brand {
    justify-self: center !important;
    text-align: center !important;
    margin: 0 auto !important;
    font-weight: 400 !important;
}

.app-header__brand-exo,
.app-header__brand-bayan,
.app-header__brand small {
    font-weight: 400 !important;
}

.app-header__leaf-cluster {
    display: none !important;
}

.app-header__decor {
    justify-self: end !important;
    width: 54px !important;
    height: 54px !important;
    opacity: .9 !important;
    transform: scaleX(-1) !important;
}

.app-header::before {
    display: none !important;
}

.app-header::after {
    display: block !important;
    right: -12px !important;
    top: -20px !important;
    width: 96px !important;
    height: 96px !important;
    opacity: .14 !important;
}

/* TRUE centered logo, independent of right-side decoration */
.app-header {
    position: sticky !important;
    display: block !important;
    height: 74px !important;
    padding: 12px 14px !important;
}

.app-header__brand {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: max-content !important;
    margin: 0 !important;
    text-align: center !important;
    font-weight: 400 !important;
    z-index: 2 !important;
}

.app-header__brand-exo,
.app-header__brand-bayan,
.app-header__brand small {
    font-weight: 400 !important;
}

.app-header__leaf-cluster,
.app-header::before {
    display: none !important;
}

.app-header__decor {
    position: absolute !important;
    right: 8px !important;
    top: 50% !important;
    transform: translateY(-50%) scaleX(-1) !important;
    width: 58px !important;
    height: 58px !important;
    margin: 0 !important;
    opacity: .9 !important;
    z-index: 1 !important;
}

.app-header::after {
    display: block !important;
    right: -12px !important;
    top: -18px !important;
    width: 96px !important;
    height: 96px !important;
    opacity: .14 !important;
}

/* Remove legacy header leaf decorations; keep new image asset only */
.app-header__decor,
.app-header__leaf-cluster,
.app-header::before,
.app-header::after,
header::before,
header::after {
    display: none !important;
    content: none !important;
}

/* Keep the new right-side leaf artwork visible */
.app-header__leaf-wrap {
    display: flex !important;
}

/* ==========================================================
   Frog hero header background
   Uses a text-free rainforest banner as the header background
   ========================================================== */

header,
.app-header {
    position: relative !important;
    overflow: hidden !important;
    min-height: 76px !important;
    background-image:
        linear-gradient(rgba(0, 18, 10, 0.58), rgba(0, 18, 10, 0.58)),
        url('../images/app_header_hero_frogs.png') !important;
    background-size: cover !important;
    background-position: left center !important;
    background-repeat: no-repeat !important;
}

/* Hide old decorative cutout assets if they exist */
.app-header__frog-wrap,
.app-header__leaf-wrap {
    display: none !important;
}

.app-header__brand,
.app-brand,
.app-logo,
.app-header__brand--decorated {
    position: relative !important;
    z-index: 2 !important;
}

/* Keep the brand centered and readable on top of the image */
.app-header__brand,
.app-brand,
.app-logo {
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
}

/* Make the logo text read a bit cleaner on photo background */
.app-header__brand h1,
.app-brand h1,
.app-logo h1,
.app-header__brand-title,
.app-logo-title {
    text-shadow: 0 1px 2px rgba(0,0,0,.35) !important;
}

/* Small screens */
@media (max-width: 380px) {
    header,
    .app-header {
        min-height: 72px !important;
        background-position: 16% center !important;
    }
}

/* Slightly wider phones */
@media (min-width: 430px) {
    header,
    .app-header {
        min-height: 82px !important;
        background-position: left center !important;
    }
}

/* ==========================================================
   Frog header refinement v2
   Clearer image + centered brand + readable tagline
   ========================================================== */

.app-header,
header.app-header {
    position: relative !important;
    min-height: 96px !important;
    height: 96px !important;
    overflow: hidden !important;

    background-image:
        linear-gradient(
            90deg,
            rgba(0,18,10,.10) 0%,
            rgba(0,18,10,.20) 26%,
            rgba(0,18,10,.54) 48%,
            rgba(0,18,10,.58) 70%,
            rgba(0,18,10,.38) 100%
        ),
        url('../images/app_header_hero_frogs.png') !important;

    background-size: cover !important;
    background-position: left center !important;
    background-repeat: no-repeat !important;
}

/* Do not show the old separate decorations */
.app-header__frog-wrap,
.app-header__leaf-wrap,
.app-header__decor,
.app-header__leaf-cluster {
    display: none !important;
}

/* Kill old pseudo decorations too */
.app-header::before,
.app-header::after {
    display: none !important;
    content: none !important;
}

/* Brand block: truly centered over the photo */
.app-header__brand,
.app-header__brand--decorated,
.app-brand,
.app-logo {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;

    width: 58% !important;
    max-width: 275px !important;
    margin: 0 !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;

    text-align: center !important;
    z-index: 5 !important;
}

/* Main ExoPetBayan wordmark */
.app-header__brand > span:first-child,
.app-header__brand-title,
.app-brand__title,
.app-logo-title,
.app-header__brand h1,
.app-brand h1,
.app-logo h1 {
    margin: 0 !important;
    font-size: 28px !important;
    line-height: 1 !important;
    font-weight: 400 !important;
    letter-spacing: -.5px !important;
    white-space: nowrap !important;
    text-shadow: 0 2px 4px rgba(0,0,0,.55) !important;
}

/* Tagline under the wordmark */
.app-header__tagline,
.app-header__brand small,
.app-brand small,
.app-logo small {
    display: block !important;
    width: 100% !important;
    margin-top: 5px !important;

    color: rgba(255,248,228,.92) !important;
    font-size: 8px !important;
    line-height: 1.1 !important;
    font-weight: 400 !important;
    letter-spacing: .8px !important;
    white-space: nowrap !important;

    text-align: center !important;
    text-shadow: 0 1px 3px rgba(0,0,0,.72) !important;
}

/* Narrow phones */
@media (max-width: 390px) {
    .app-header,
    header.app-header {
        min-height: 90px !important;
        height: 90px !important;
        background-position: 8% center !important;
    }

    .app-header__brand,
    .app-header__brand--decorated,
    .app-brand,
    .app-logo {
        width: 60% !important;
        max-width: 235px !important;
        left: 57% !important;
    }

    .app-header__brand > span:first-child,
    .app-header__brand-title,
    .app-brand__title,
    .app-logo-title,
    .app-header__brand h1,
    .app-brand h1,
    .app-logo h1 {
        font-size: 24px !important;
    }

    .app-header__tagline,
    .app-header__brand small,
    .app-brand small,
    .app-logo small {
        font-size: 7px !important;
        letter-spacing: .55px !important;
    }
}

/* Keep ExoPetBayan on one line */
.app-header__brand,
.app-header__brand--decorated,
.app-brand,
.app-logo {
    width: auto !important;
    max-width: none !important;
    min-width: max-content !important;
}

.app-header__brand > span:first-child,
.app-header__brand-title,
.app-brand__title,
.app-logo-title,
.app-header__brand h1,
.app-brand h1,
.app-logo h1 {
    white-space: nowrap !important;
    word-break: keep-all !important;
    overflow-wrap: normal !important;
    hyphens: none !important;
}

/* Give the centered logo a little more breathing room on small phones */
@media (max-width: 390px) {
    .app-header__brand,
    .app-header__brand--decorated,
    .app-brand,
    .app-logo {
        left: 58% !important;
    }

    .app-header__brand > span:first-child,
    .app-header__brand-title,
    .app-brand__title,
    .app-logo-title,
    .app-header__brand h1,
    .app-brand h1,
    .app-logo h1 {
        font-size: 22px !important;
    }
}

/* Fix ExoPet + Bayan splitting onto separate lines */
.app-header__brand,
.app-header__brand--decorated,
.app-brand,
.app-logo {
    display: block !important;
    white-space: nowrap !important;
}

/* Keep the wordmark pieces on the same line */
.app-header__brand > span,
.app-header__brand > b,
.app-header__brand > strong,
.app-brand > span,
.app-brand > b,
.app-brand > strong,
.app-logo > span,
.app-logo > b,
.app-logo > strong {
    display: inline !important;
    white-space: nowrap !important;
    word-break: keep-all !important;
}

/* Tagline stays on its own line underneath */
.app-header__brand > small,
.app-header__tagline,
.app-brand > small,
.app-logo > small {
    display: block !important;
    white-space: nowrap !important;
    margin-top: 5px !important;
    text-align: center !important;
}

/* Keep ExoPet and Bayan identical in font size */
.app-header__brand > span,
.app-header__brand > b,
.app-header__brand > strong,
.app-brand > span,
.app-brand > b,
.app-brand > strong,
.app-logo > span,
.app-logo > b,
.app-logo > strong {
    font-size: 24px !important;
    line-height: 1 !important;
    font-weight: 400 !important;
    vertical-align: baseline !important;
}

/* Slightly smaller on narrow phones, but still identical */
@media (max-width: 390px) {
    .app-header__brand > span,
    .app-header__brand > b,
    .app-header__brand > strong,
    .app-brand > span,
    .app-brand > b,
    .app-brand > strong,
    .app-logo > span,
    .app-logo > b,
    .app-logo > strong {
        font-size: 22px !important;
    }
}

/* Consistent larger ExoPetBayan wordmark + tagline */
.app-header__brand > span,
.app-header__brand > b,
.app-header__brand > strong,
.app-brand > span,
.app-brand > b,
.app-brand > strong,
.app-logo > span,
.app-logo > b,
.app-logo > strong {
    display: inline !important;
    font-size: 28px !important;
    line-height: 1 !important;
    font-weight: 400 !important;
    vertical-align: baseline !important;
    white-space: nowrap !important;
}

/* Tagline */
.app-header__brand > small,
.app-header__tagline,
.app-brand > small,
.app-logo > small {
    display: block !important;
    margin-top: 5px !important;
    font-size: 9px !important;
    line-height: 1.1 !important;
    font-weight: 400 !important;
    letter-spacing: .7px !important;
    white-space: nowrap !important;
    text-align: center !important;
}

/* Narrow phones: still larger than before, and both parts identical */
@media (max-width: 390px) {
    .app-header__brand > span,
    .app-header__brand > b,
    .app-header__brand > strong,
    .app-brand > span,
    .app-brand > b,
    .app-brand > strong,
    .app-logo > span,
    .app-logo > b,
    .app-logo > strong {
        font-size: 25px !important;
    }

    .app-header__brand > small,
    .app-header__tagline,
    .app-brand > small,
    .app-logo > small {
        font-size: 8px !important;
        letter-spacing: .55px !important;
    }
}

/* Small desktop / narrow browser widths:
   override any old selectors that made Bayan smaller */
@media (min-width: 391px) and (max-width: 700px) {
    .app-header__brand > span,
    .app-header__brand > b,
    .app-header__brand > strong,
    .app-brand > span,
    .app-brand > b,
    .app-brand > strong,
    .app-logo > span,
    .app-logo > b,
    .app-logo > strong {
        font-size: 28px !important;
    }

    .app-header__brand > small,
    .app-header__tagline,
    .app-brand > small,
    .app-logo > small {
        font-size: 9px !important;
    }
}

/* One size bigger ExoPetBayan wordmark */
.app-header__brand > span,
.app-header__brand > b,
.app-header__brand > strong,
.app-brand > span,
.app-brand > b,
.app-brand > strong,
.app-logo > span,
.app-logo > b,
.app-logo > strong {
    font-size: 30px !important;
}

/* Mobile: one step larger than before */
@media (max-width: 390px) {
    .app-header__brand > span,
    .app-header__brand > b,
    .app-header__brand > strong,
    .app-brand > span,
    .app-brand > b,
    .app-brand > strong,
    .app-logo > span,
    .app-logo > b,
    .app-logo > strong {
        font-size: 27px !important;
    }
}

/* === CANONICAL EXOPETBAYAN WORDMARK === */
.app-header__wordmark {
    display: inline-block !important;
    white-space: nowrap !important;
    font-size: clamp(36px, 8.5vw, 40px) !important;
    line-height: 1 !important;
    font-weight: 400 !important;
    letter-spacing: -.6px !important;
}

.app-header__wordmark > .app-header__brand-exo,
.app-header__wordmark > .app-header__brand-bayan {
    display: inline !important;
    font: inherit !important;
    line-height: inherit !important;
    letter-spacing: inherit !important;
    white-space: inherit !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
    vertical-align: baseline !important;
}

.app-header__brand-exo {
    color: #ff9f0a !important;
    text-shadow: 0 2px 0 #4a2600 !important;
}

.app-header__brand-bayan {
    color: #73c72c !important;
    text-shadow: 0 2px 0 #143d11 !important;
}

.app-header__brand > small {
    display: block !important;
}
/* === END CANONICAL EXOPETBAYAN WORDMARK === */

/* Larger ExoPetBayan wordmark */
.app-header__wordmark {
    font-size: clamp(34px, 8vw, 38px) !important;
}

/* === FORCE BIG SHARED WORDMARK === */
.app-header__brand {
    width: max-content !important;
    max-width: none !important;
    white-space: nowrap !important;
}

.app-header__wordmark {
    display: inline-block !important;
    white-space: nowrap !important;
    font-size: 46px !important;
    line-height: 1 !important;
    font-weight: 400 !important;
    letter-spacing: -1px !important;
}

/* SAME size, SAME typography, always together */
.app-header__wordmark .app-header__brand-exo,
.app-header__wordmark .app-header__brand-bayan,
.app-header__brand-exo,
.app-header__brand-bayan {
    display: inline !important;
    font-size: 46px !important;
    line-height: 1 !important;
    font-weight: 400 !important;
    letter-spacing: -1px !important;
    white-space: nowrap !important;
    vertical-align: baseline !important;
}

@media (max-width: 390px) {
    .app-header__wordmark,
    .app-header__wordmark .app-header__brand-exo,
    .app-header__wordmark .app-header__brand-bayan,
    .app-header__brand-exo,
    .app-header__brand-bayan {
        font-size: 42px !important;
    }
}
/* === END FORCE BIG SHARED WORDMARK === */

/* ExoPetBayan mobile wordmark: one size everywhere */
.app-header__wordmark,
.app-header__wordmark .app-header__brand-exo,
.app-header__wordmark .app-header__brand-bayan,
.app-header__brand-exo,
.app-header__brand-bayan {
    font-size: 42px !important;
    line-height: 1 !important;
    font-weight: 400 !important;
    letter-spacing: -1px !important;
    white-space: nowrap !important;
}

/* ExoPetBayan header: one fixed size, right-aligned as one unit */
.app-header__brand,
.app-header__brand--decorated {
    left: auto !important;
    right: 16px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: max-content !important;
    max-width: calc(100% - 120px) !important;
    margin: 0 !important;
    text-align: right !important;
    white-space: nowrap !important;
}

.app-header__wordmark,
.app-header__wordmark .app-header__brand-exo,
.app-header__wordmark .app-header__brand-bayan,
.app-header__brand-exo,
.app-header__brand-bayan {
    font-size: 40px !important;
    line-height: 1 !important;
    font-weight: 400 !important;
    letter-spacing: -1px !important;
    white-space: nowrap !important;
}

.app-header__brand > small,
.app-header__tagline {
    display: block !important;
    width: 100% !important;
    margin-top: 5px !important;
    text-align: right !important;
    white-space: nowrap !important;
}

/* Crisp ExoPetBayan wordmark — no bold, no blur/shadow */
.app-header__wordmark,
.app-header__wordmark .app-header__brand-exo,
.app-header__wordmark .app-header__brand-bayan,
.app-header__brand-exo,
.app-header__brand-bayan {
    font-size: 40px !important;
    font-weight: 400 !important;
    line-height: 1 !important;
    letter-spacing: -.4px !important;
    text-shadow: none !important;
    filter: none !important;
    -webkit-font-smoothing: auto !important;
    text-rendering: geometricPrecision !important;
}

/* Keep subtitle normal weight too */
.app-header__brand > small,
.app-header__tagline {
    font-weight: 400 !important;
    text-shadow: none !important;
    filter: none !important;
}

/* Final mobile header text sizing */
.app-header__wordmark,
.app-header__wordmark .app-header__brand-exo,
.app-header__wordmark .app-header__brand-bayan,
.app-header__brand-exo,
.app-header__brand-bayan {
    font-size: 39px !important;
    font-weight: 400 !important;
    line-height: 1 !important;
    letter-spacing: -.4px !important;
}

.app-header__brand > small,
.app-header__tagline {
    font-size: 10px !important;
    font-weight: 400 !important;
    line-height: 1.1 !important;
    letter-spacing: .65px !important;
}

/* Clean intentional divider between header and first content section */
.app-header {
    border-bottom: 1px solid rgba(255, 190, 45, .78) !important;
    box-shadow: none !important;
}

/* ExoPetBayan final size adjustment */
.app-header__wordmark,
.app-header__wordmark .app-header__brand-exo,
.app-header__wordmark .app-header__brand-bayan,
.app-header__brand-exo,
.app-header__brand-bayan {
    font-size: 37px !important;
}

/* ExoPetBayan one-step smaller */
.app-header__wordmark,
.app-header__wordmark .app-header__brand-exo,
.app-header__wordmark .app-header__brand-bayan,
.app-header__brand-exo,
.app-header__brand-bayan {
    font-size: 36px !important;
}

/* ExoPetBayan 35px + subtitle shares same left edge */
.app-header__brand,
.app-header__brand--decorated {
    right: 16px !important;
    left: auto !important;
    width: max-content !important;
    max-width: none !important;
    text-align: left !important;
    align-items: flex-start !important;
}

.app-header__wordmark,
.app-header__wordmark .app-header__brand-exo,
.app-header__wordmark .app-header__brand-bayan,
.app-header__brand-exo,
.app-header__brand-bayan {
    font-size: 35px !important;
    line-height: 1 !important;
    font-weight: 400 !important;
    letter-spacing: -.4px !important;
    white-space: nowrap !important;
}

/* Keep subtitle starting at the same left edge as ExoPetBayan */
.app-header__brand > small,
.app-header__tagline {
    display: block !important;
    width: 100% !important;
    margin-top: 5px !important;
    text-align: left !important;
    align-self: flex-start !important;
}

/* Final header sizing */
.app-header__wordmark,
.app-header__wordmark .app-header__brand-exo,
.app-header__wordmark .app-header__brand-bayan,
.app-header__brand-exo,
.app-header__brand-bayan {
    font-size: 34px !important;
    line-height: 1 !important;
    font-weight: 400 !important;
    letter-spacing: -.4px !important;
    white-space: nowrap !important;
}

.app-header__brand > small,
.app-header__tagline {
    font-size: 9px !important;
    line-height: 1.1 !important;
    font-weight: 400 !important;
}

/* Exact shared left edge for wordmark + subtitle */
.app-header__brand,
.app-header__brand--decorated {
    text-align: left !important;
}

.app-header__wordmark {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: left !important;
}

.app-header__wordmark .app-header__brand-exo,
.app-header__wordmark .app-header__brand-bayan {
    margin: 0 !important;
    padding: 0 !important;
}

.app-header__brand > small,
.app-header__tagline {
    display: block !important;
    width: auto !important;
    margin: 5px 0 0 0 !important;
    padding: 0 !important;
    text-align: left !important;
}

/* Optical left alignment:
   CSS boxes were aligned, but the font's glyph side-bearing makes
   ExoPetBayan appear slightly farther right. Nudge subtitle 2px right. */
.app-header__brand > small,
.app-header__tagline {
    margin-left: 2px !important;
}