body {
    background-color: var(--surface-parchment);
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.header {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    background-color: rgba(51, 51, 51, 0.7); /* Use rgba() with an alpha value of 0.7 for transparency */
    color: white;
    padding: 10px 20px;
    width: 100%;
    box-sizing: border-box;
    position: relative;
    z-index: 1;
}

.menu {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    row-gap: 10px;
}

.menu a {
    text-decoration: none;
    color: white;
    margin-left: 20px; /* Adjust the spacing between menu items as needed */
}

h1 {
    margin: 0; /* Remove the default margin from the h1 element */
}

/* The hero: the Helper tarsier - same 1408x768 canvas as the previous
landing_background.jpeg it replaces, so nothing else about this block
needed to change for the swap itself. Framing/empty-space fallout from the
Helper's different composition is a separate follow-up, not addressed here. */
.hero {
    position: relative;
    flex: 1; /* fills whatever space the header leaves, instead of guessing its height */
    background-image: url('/images/avatars/tarsiers/helper/helper.jpeg');
    background-size: cover;
    background-position: 65% center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
}

/* Above the phone breakpoint, show the whole image rather than letting
cover crop it to whatever the viewport's own aspect ratio happens to be -
locking the box to the art's actual ratio (1408x768) means cover never has
anything left to crop. Below it, the mobile layout still needs the height
for the stacked title+card, so it keeps the flexible/cropped treatment. */
@media (min-width: 701px) {
    .hero {
        flex: none;
        width: 100%;
        aspect-ratio: 1408 / 768;
        background-position: center;
    }
}

.hero-title {
    position: absolute;
    top: 40px;
    left: 40px;
    font-family: var(--heading-font-face);
    font-size: 56px;
    color: var(--accent-terracotta);
    text-shadow:
        0 0 12px rgba(255, 255, 255, 0.85),
        0 0 4px rgba(255, 255, 255, 0.85),
        2px 2px 6px rgba(0, 0, 0, 0.35);
}

.login-modal {
    width: 30%;
    max-width: 320px;
    padding: var(--space-5);
    margin-left: 6%;
    border-radius: var(--card-border-radius);
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
    background: linear-gradient(rgba(251, 243, 227, 0.95), rgba(251, 243, 227, 0.85), rgba(251, 243, 227, 0.95));
    color: black;
    box-sizing: border-box;
}

/* Below this, the hero stacks instead of overlaying: full-bleed background
stays, but the title moves back into normal flow above the card instead of
floating over it - both were sized for a screen with room to spare. */
@media (max-width: 700px) {
    .hero {
        flex-direction: column;
        justify-content: center;
        padding: 90px 20px 40px;
        box-sizing: border-box;
        gap: 20px;
    }

    .hero-title {
        position: static;
        text-align: center;
        font-size: 40px;
    }

    .login-modal {
        width: 90%;
        max-width: 360px;
        margin-left: 0;
    }
}

.login-form{
    display: flex;
    flex-direction: column;
    align-items: center;
}

.form-group{
    width: 100%;
    box-sizing: border-box;
    margin: 0;
    padding: var(--space-3) var(--space-7) var(--space-3) var(--space-3); /* right padding clears the eye toggle so typed text never runs under it */
    border: 1px solid #ccc;
    border-radius: var(--card-border-radius);
    font-size: 16px;
}

.input-field {
    width: 100%; /* Calculate width to account for padding */
    margin-bottom: var(--space-5);
}

.login-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    width: 100%;
}

.login-actions .button-action,
.login-actions .button-action-outline {
    width: 100%;
    margin-left: 0;
}

/* Not published to either store yet - these read as inert "coming soon"
badges rather than real download links, using the same pill shape as the
login buttons above so they read as part of the same card, not bolted on. */
.store-links {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    width: 100%;
    margin-top: var(--space-2);
}

.store-links .button-action-outline {
    width: 100%;
    margin-left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
}

.store-links .button-action-outline:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    border-color: #999999;
}

.store-link-icon {
    width: 18px;
    height: 18px;
}

.toggle-eye-container {
    position: relative;
    display: inline-block;
    width: 100%; /* Adjust width as needed */
}

.toggle-eye-image {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 10px;
    width: 20px;
    height: 20px;
    cursor: pointer;
}

.toggle-eye-input {
    width: 100%; /* Set width of input box */
    height: 100%; /* Set height of input box */
}