/* PRJ-104 — Baobab marketing landing page (public route: '/').
   Layout/section/nav rules only; colors come from the --v-* tokens defined
   in static/css/main.css (loaded alongside this file), per the design
   handoff's own "never hardcode hex" note. Tokens below are landing-page-
   specific values straight from that handoff's own Design Tokens section
   (Grey 500 muted text, gold hover/active tints) that don't already exist
   as --v-* app-wide tokens -- defined once here, referenced everywhere else. */
:root {
    --landing-grey-500: #ADB5BD;
    --landing-gold-hover: #E0C284;
    --landing-gold-active: #BF9A52;
}

html.landing-page, body.landing-page {
    margin: 0;
    background: var(--v-charcoal);
    color: var(--v-off-white);
    font-family: 'Inter', sans-serif;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

body.landing-page a {
    color: var(--v-off-white);
}
body.landing-page a:hover {
    color: var(--v-gold);
}
body.landing-page ::selection {
    background: var(--v-gold-light);
}
body.landing-page button:focus-visible {
    outline: 2px solid var(--v-gold);
    outline-offset: 3px;
}

@keyframes landing-cue {
    0%, 100% { transform: translateY(0); opacity: .5; }
    50% { transform: translateY(8px); opacity: 1; }
}

.landing-header {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 10;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 20px;
    padding: 24px clamp(20px, 4vw, 56px);
}

.landing-wordmark {
    font-family: 'Merriweather', serif;
    font-weight: 400;
    font-size: 15px;
    letter-spacing: 0.3em;
    color: var(--v-gold);
    text-transform: uppercase;
    margin-right: 12px;
}

.landing-btn-login {
    background: transparent;
    color: var(--v-off-white);
    border: 1px solid rgba(212, 176, 104, 0.45);
    border-radius: 8px;
    padding: 13px 24px;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 15px;
    letter-spacing: 0.02em;
    text-decoration: none;
    transition: background .3s, border-color .3s;
    white-space: nowrap;
}
.landing-btn-login:hover {
    background: var(--v-gold-light);
    border-color: var(--v-gold);
    color: var(--v-off-white);
}

.landing-btn-signup {
    background: var(--v-gold);
    color: var(--v-charcoal);
    border: 0;
    white-space: nowrap;
    flex-shrink: 0;
    border-radius: 8px;
    padding: 14px 28px;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 15px;
    letter-spacing: 0.02em;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    box-shadow: 0 15px 35px -5px rgba(0, 0, 0, 0.35);
    transition: background .3s;
}
.landing-btn-signup:hover { background: var(--landing-gold-hover); color: var(--v-charcoal); }
.landing-btn-signup:active { background: var(--landing-gold-active); }

.landing-tree-circle {
    position: fixed;
    top: 50vh; left: 0;
    width: 110vh; height: 110vh;
    margin-top: -55vh; margin-left: -55vh;
    z-index: 0;
    will-change: transform;
}
.landing-tree-circle svg {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    overflow: visible;
    pointer-events: none;
}
.landing-tree-mask {
    position: absolute; inset: 0;
    border-radius: 50%;
    overflow: hidden;
}
.landing-tree-mask img {
    position: absolute;
    width: 204%; left: -52%; top: -35.7%;
    max-width: none;
    display: block;
    filter: brightness(1.06);
}

.landing-main {
    position: relative;
    z-index: 1;
}

.landing-section {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 55vh minmax(0, 1fr);
    align-items: center;
    padding: 0 clamp(20px, 4vw, 56px);
    box-sizing: border-box;
}

.landing-section-content {
    padding-left: clamp(32px, 8vw, 140px);
    display: flex;
    flex-direction: column;
    gap: 28px;
}
.landing-section-content--body {
    gap: 16px;
    border-top: 1px solid rgba(212, 176, 104, 0.35);
    padding-top: 28px;
}

.landing-h1 {
    font-family: 'Merriweather', serif;
    font-weight: 400;
    font-size: clamp(48px, 7vw, 112px);
    line-height: 1;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--v-gold);
    margin: 0;
}
.landing-sub {
    font-size: 17px;
    line-height: 28px;
    margin: 0;
    max-width: 36ch;
    color: var(--landing-grey-500);
}
.landing-kicker {
    font-family: 'Roboto Mono', monospace;
    font-size: 12px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--v-gold);
}
.landing-h2 {
    font-family: 'Merriweather', serif;
    font-weight: 300;
    font-size: clamp(28px, 3.2vw, 44px);
    line-height: 1.2;
    margin: 0;
}
.landing-h2--close {
    font-size: clamp(36px, 4.4vw, 64px);
    line-height: 1.15;
}
.landing-body {
    font-size: 17px;
    line-height: 28px;
    margin: 0;
    max-width: 44ch;
    color: var(--landing-grey-500);
}

.landing-nav {
    position: fixed;
    bottom: 32px;
    right: clamp(20px, 4vw, 56px);
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 12px;
    font-family: 'Roboto Mono', monospace;
    font-size: 12px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--landing-grey-500);
}
.landing-nav-arrow {
    width: 48px; height: 48px;
    border-radius: 50%;
    background: transparent;
    color: var(--v-gold);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity .6s, background .3s;
}
.landing-nav-arrow:hover { background: var(--v-gold-light); }
.landing-nav-up { border: 1px solid rgba(212, 176, 104, 0.45); }
.landing-nav-down { border: 1px solid var(--v-gold); }
.landing-nav-down svg { animation: landing-cue 2.4s ease-in-out infinite; }
.landing-nav-row {
    display: flex;
    align-items: center;
    gap: 16px;
}
.landing-nav-counter {
    font-feature-settings: 'tnum' 1;
}

@media (prefers-reduced-motion: reduce) {
    .landing-nav-down svg { animation: none; }
}

/* Mobile (PRJ-104 follow-up) -- same dark/gold identity, tree motif, and
   section-by-section nav; the desktop grid (55vh text column + tree filling
   the rest) only works because 55vh is small relative to a wide viewport.
   On a narrow phone that same column is wider than the screen, which is
   what was pushing the hero text off-canvas entirely (confirmed via a
   390x844 Playwright check -- 752px of horizontal scroll, h1 rendered at
   x=516, off the 390px viewport). Below this breakpoint the grid collapses
   to one centered column and the tree is capped by viewport *width*
   (vw) instead of *height* (vh), so it reads as a centered backdrop behind
   the text instead of an oversized side panel. */
@media (max-width: 768px) {
    .landing-header {
        justify-content: space-between;
        padding: 16px 20px;
        gap: 10px;
    }
    .landing-wordmark { margin-right: 0; }
    /* min-height 48px, not just padding -- mobile_ux_standards.md P5 touch
       target floor; smaller padding+font alone measured 38px */
    .landing-btn-login, .landing-btn-signup {
        display: inline-flex;
        align-items: center;
        min-height: 48px;
        padding: 0 16px;
        font-size: 13px;
        box-sizing: border-box;
    }

    /* The tree is position:fixed and stays put across every section swap
       (desktop relies on the grid's side column to keep it clear of text).
       First cut (width min(80vw,65vh), top 13vh, content padding-top
       42-46vh) *looked* clear at one test size (390x844) but the numbers
       don't hold generally: tree_bottom = top + size, and for a squarer
       phone like iPhone SE (375x667, width/height 0.56 vs 390x844's 0.46)
       tree_bottom lands at ~58% of viewport height -- above the old
       42-46vh content start, so the gold heading text sat ON the gold
       tree there (reported live: illegible gold-on-gold, plus a stray
       divider line reading as crossing the header). Recomputed for the
       worst realistic portrait ratio instead of eyeballing one screenshot:
       shrunk the tree (min(62vw,55vh) from top:8vh -- worst case ~43% of
       height) and pushed content start to 52vh, unified across hero and
       body sections (the old 42/46vh split made body sections, which have
       more text, the *more* cramped case -- backwards). Verified via
       Playwright bounding-rect comparison, not just a visual screenshot,
       at 375x667/390x844/412x915/430x932 -- tree bottom edge stays above
       content top edge at all four. */
    /* top is a fixed px, not vh: the header's own height (16px padding x2
       + 48px buttons = ~80px) doesn't scale with viewport height, so an
       8vh anchor cleared the header on a tall phone but sat *inside* it
       on a short one -- the header has no background fill (by design, so
       it floats over the hero art on desktop), so the tree's top rim was
       visibly poking up through the transparent header strip. Reported
       live as "a dividing line across the top elements". 88px clears the
       header on every device, since neither number scales with viewport. */
    .landing-tree-circle {
        width: min(62vw, 55vh);
        height: min(62vw, 55vh);
        top: 88px;
        margin-top: 0;
        margin-left: calc(min(62vw, 55vh) / -2);
    }

    .landing-section {
        grid-template-columns: 1fr;
        padding: 0 24px;
        text-align: center;
        align-items: start;
    }
    /* margin-top, not padding-top: the body variant's own border-top+28px
       padding-top (base rule, unchanged) is what visually pairs the gold
       divider with the kicker text. Using padding-top here to push the
       whole block down left the border stranded at the *box's* top edge
       (padding moves content, not a border) -- which for a grid item with
       align-items:start is the top of the section, i.e. the top of the
       viewport. Reported live as "a dividing line across the top
       elements". margin-top moves the entire border+padding+content box
       as one unit, so the border stays attached to the kicker below it,
       just relocated further down the page. */
    .landing-section-content {
        padding-left: 0;
        margin-top: calc(88px + min(62vw, 55vh) + 24px);
        padding-bottom: 6vh;
        align-items: center;
    }
    .landing-sub, .landing-body { max-width: 40ch; }

    /* Corner-pinned nav (desktop) crowds body-section text on a short
       device -- the nav's position is independent of content flow, so a
       narrower text column only shrank the collision, it didn't remove
       it (confirmed: still overlapping at 32ch on a 375x667 viewport).
       Moving it to a centered bottom bar frees the corner entirely
       instead of fighting nav and text for the same space -- a standard
       mobile pattern, and still the same gold circular arrows + counter. */
    .landing-nav {
        left: 50%;
        right: auto;
        bottom: 16px;
        transform: translateX(-50%);
        flex-direction: row;
        align-items: center;
        gap: 16px;
    }
}

/* Short phones (iPhone SE and similar, <=700px tall): the 62vw/55vh tree
   plus header clearance left body-section text reaching all the way to
   the new bottom-center nav bar (measured overlap: text bottom 660.6px vs
   nav top 603px on a 375x667 viewport). Shrinking the tree further frees
   enough vertical room that text finishes above the nav instead of
   fighting it for space. */
@media (max-width: 768px) and (max-height: 700px) {
    .landing-tree-circle {
        width: min(46vw, 38vh);
        height: min(46vw, 38vh);
        margin-left: calc(min(46vw, 38vh) / -2);
    }
    .landing-section-content {
        margin-top: calc(88px + min(46vw, 38vh));
    }
}

/* Mobile browsers resize the visual viewport as the address bar/toolbar
   collapses, which makes plain vh unstable mid-interaction (the reported
   "divider line crossing the header" symptom is consistent with this --
   content positioned against a vh that shifted after paint). dvh tracks
   the real, current visual viewport; unsupported browsers simply ignore
   this rule and keep the vh above, so this is additive, not a fallback
   swap. */
@media (max-width: 768px) {
    @supports (height: 100dvh) {
        .landing-section { min-height: 100dvh; }
    }
}