/* ==========================================================================
   Leafed — warm editorial brand system
   --------------------------------------------------------------------------
   Hand-authored, no build step. Loaded AFTER styles/site.css (the compiled
   Tailwind bundle) so it wins on the homepage. site.css stays linked because
   it supplies the Preflight reset and the utility classes that
   /scripts/account-nav.js injects at runtime.

   All classes here are `lf-` prefixed so nothing collides with a Tailwind
   utility. The only unprefixed selectors are the #accountNav compatibility
   rules at the bottom, which restyle markup that script builds.
   ========================================================================== */

:root {
    /* Surfaces — never pure white */
    --lf-canvas:     #FBF9F5;
    --lf-surface:    #F3EFEA;
    --lf-elevated:   #EBE6DF;
    --lf-hairline:   #E2DCD2;

    /* Brand greens */
    --lf-forest:     #264227;
    --lf-pine:       #4A5D4E;
    --lf-sage:       #8FAA73;

    /* Text */
    --lf-ink:        #161514;
    --lf-muted:      #7D756D;
    /* --lf-muted sits at 4.35:1 on canvas, just under AA for small text.
       Use it for large lede copy and decorative marks; small text takes
       --lf-muted-strong (5.6:1) or --lf-pine (6.7:1). */
    --lf-muted-strong: #6B635B;

    /* On the dark band */
    --lf-on-band:        #FBF9F5;
    --lf-on-band-soft:   #C9D3C2;
    --lf-band-hairline:  rgba(251, 249, 245, 0.16);
    --lf-band-surface:   rgba(251, 249, 245, 0.05);

    /* Geometry */
    --lf-radius-card: 12px;
    --lf-radius-pill: 9999px;
    --lf-hairline-w:  1px;

    /* Type */
    --lf-display: 'Fraunces', Georgia, 'Times New Roman', serif;
    --lf-body:    'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

    /* Rhythm */
    --lf-wrap:    1120px;
    --lf-gutter:  20px;
}

@media (min-width: 768px) {
    :root { --lf-gutter: 32px; }
}

/* Hairlines resolve to a true sub-pixel rule on retina */
@media (min-resolution: 2dppx) {
    :root { --lf-hairline-w: 0.5px; }
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

.lf-page {
    background-color: var(--lf-canvas);
    color: var(--lf-ink);
    font-family: var(--lf-body);
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

.lf-page *,
.lf-page *::before,
.lf-page *::after { box-sizing: border-box; }

.lf-wrap {
    width: 100%;
    max-width: var(--lf-wrap);
    margin-inline: auto;
    padding-inline: var(--lf-gutter);
}

.lf-section { padding-block: 64px; }

@media (min-width: 768px) {
    .lf-section { padding-block: 96px; }
}

.lf-section--tight { padding-block: 48px; }

/* Skip-to-content helper for keyboard users */
.lf-skip {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 100;
    background: var(--lf-forest);
    color: var(--lf-canvas);
    padding: 12px 20px;
    border-radius: 0 0 var(--lf-radius-card) 0;
    font-weight: 500;
}
.lf-skip:focus { left: 0; }

/* --------------------------------------------------------------------------
   Type
   -------------------------------------------------------------------------- */

.lf-h1,
.lf-h2,
.lf-h3,
.lf-brand__word {
    font-family: var(--lf-display);
    font-optical-sizing: auto;
    color: var(--lf-forest);
    margin: 0;
    text-wrap: balance;
}

.lf-h1 {
    font-weight: 600;
    font-size: clamp(2.125rem, 6.2vw, 3.75rem);
    line-height: 1.08;
    letter-spacing: -0.02em;
}

.lf-h2 {
    font-weight: 600;
    font-size: clamp(1.625rem, 3.6vw, 2.5rem);
    line-height: 1.15;
    letter-spacing: -0.015em;
}

.lf-h3 {
    font-weight: 500;
    font-size: 1.125rem;
    line-height: 1.3;
    letter-spacing: -0.005em;
}

.lf-lede {
    font-size: clamp(1.0625rem, 2vw, 1.1875rem);
    line-height: 1.62;
    color: var(--lf-pine);
    margin: 0;
    max-width: 34em;
    text-wrap: pretty;
}

.lf-body {
    color: var(--lf-pine);
    margin: 0;
    text-wrap: pretty;
}

.lf-small {
    font-size: 0.875rem;
    line-height: 1.55;
    color: var(--lf-muted-strong);
    margin: 0;
}

.lf-eyebrow {
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--lf-muted-strong);
    margin: 0;
}

.lf-stack > * + * { margin-top: 20px; }
.lf-stack-sm > * + * { margin-top: 10px; }

/* --------------------------------------------------------------------------
   Links & buttons
   -------------------------------------------------------------------------- */

.lf-textlink {
    color: var(--lf-forest);
    font-weight: 500;
    text-decoration: underline;
    text-decoration-color: var(--lf-sage);
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
    transition: text-decoration-color 0.2s ease, color 0.2s ease;
}
.lf-textlink:hover {
    text-decoration-color: var(--lf-forest);
}

.lf-arrowlink {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--lf-forest);
    white-space: nowrap;
    transition: gap 0.2s ease;
}
.lf-arrowlink:hover { gap: 10px; }

.lf-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-family: var(--lf-body);
    font-size: 0.9375rem;
    font-weight: 500;
    line-height: 1;
    padding: 13px 22px;
    border-radius: var(--lf-radius-pill);
    border: var(--lf-hairline-w) solid transparent;
    cursor: pointer;
    text-align: center;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.lf-btn--primary {
    background-color: var(--lf-forest);
    color: var(--lf-canvas);
}
.lf-btn--primary:hover { background-color: #1B3220; }

.lf-btn--quiet {
    background-color: var(--lf-surface);
    color: var(--lf-forest);
    border-color: var(--lf-hairline);
}
.lf-btn--quiet:hover { background-color: var(--lf-elevated); }

/* Store badges keep a card radius so they read as badges, not pills */
.lf-store-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.lf-store-btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 12px 22px 12px 18px;
    border-radius: var(--lf-radius-card);
    border: var(--lf-hairline-w) solid transparent;
    text-align: left;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.lf-store-btn__icon {
    width: 20px;
    height: 20px;
    flex: none;
}

.lf-store-btn__label { display: block; }

.lf-store-btn__kicker {
    display: block;
    font-size: 0.625rem;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    line-height: 1.2;
    opacity: 0.75;
}

.lf-store-btn__name {
    display: block;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.25;
}

.lf-store-btn--primary {
    background-color: var(--lf-forest);
    color: var(--lf-canvas);
}
.lf-store-btn--primary:hover { background-color: #1B3220; }

.lf-store-btn--quiet {
    background-color: var(--lf-surface);
    color: var(--lf-forest);
    border-color: var(--lf-hairline);
}
.lf-store-btn--quiet:hover { background-color: var(--lf-elevated); }

/* Visible focus for keyboard users, everywhere */
.lf-page a:focus-visible,
.lf-page button:focus-visible {
    outline: 2px solid var(--lf-forest);
    outline-offset: 3px;
    border-radius: 4px;
}
.lf-band a:focus-visible,
.lf-band button:focus-visible { outline-color: var(--lf-sage); }

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */

.lf-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background-color: rgba(251, 249, 245, 0.92);
    backdrop-filter: saturate(180%) blur(12px);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    border-bottom: var(--lf-hairline-w) solid var(--lf-hairline);
}

.lf-header__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    height: 64px;
}

@media (min-width: 768px) {
    .lf-header__bar { height: 76px; }
}

.lf-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex: none;
}

.lf-brand__glyph {
    width: 36px;
    height: 36px;
    flex: none;
    display: block;
}

.lf-brand__word {
    font-size: 1.375rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1;
}

.lf-nav {
    display: none;
    align-items: center;
    gap: 26px;
    margin-inline: auto;
}

@media (min-width: 1024px) {
    .lf-nav { display: flex; }
}

.lf-nav__link {
    font-size: 0.9375rem;
    color: var(--lf-pine);
    white-space: nowrap;
    padding-block: 4px;
    border-bottom: 2px solid transparent;
    transition: color 0.2s ease, border-color 0.2s ease;
}
.lf-nav__link:hover { color: var(--lf-forest); }

.lf-nav__link--current {
    color: var(--lf-forest);
    font-weight: 500;
    border-bottom-color: var(--lf-sage);
}

.lf-header__actions {
    display: flex;
    align-items: center;
    gap: 14px;
    flex: none;
}

.lf-signin {
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--lf-forest);
    white-space: nowrap;
    transition: color 0.2s ease;
}
.lf-signin:hover { color: var(--lf-pine); }

/* The CTA stays present at every width; below 480px it compacts so the
   lockup, Sign in, Get the app and the menu toggle all fit on one 375px row. */
.lf-header__cta { display: inline-flex; }

@media (max-width: 479px) {
    :root { --lf-gutter: 16px; }

    .lf-header__bar { gap: 10px; }
    .lf-header__actions { gap: 10px; }

    .lf-brand { gap: 8px; }
    .lf-brand__glyph { width: 32px; height: 32px; }
    .lf-brand__word { font-size: 1.25rem; }

    .lf-signin,
    #accountNav > a { font-size: 0.875rem; }

    .lf-header__cta {
        font-size: 0.8125rem;
        padding: 10px 14px;
    }

    .lf-menu-toggle { width: 36px; height: 36px; }

    /* Store badges stack to equal width rather than sitting ragged */
    .lf-store-row {
        flex-direction: column;
        align-items: stretch;
    }
}

.lf-menu-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    background: none;
    border: none;
    color: var(--lf-forest);
    cursor: pointer;
}

@media (min-width: 1024px) {
    .lf-menu-toggle { display: none; }
}

/* The collapsing element must carry no padding or border of its own: under
   box-sizing:border-box, max-height:0 floors at padding+border, so padding
   here would leak ~29px into the closed header. It lives on the inner wrap. */
.lf-mobile-nav {
    padding: 0;
    border: 0;
}

.lf-mobile-nav__inner {
    border-top: var(--lf-hairline-w) solid var(--lf-hairline);
    padding-block: 12px 16px;
}

@media (min-width: 1024px) {
    .lf-mobile-nav { display: none; }
}

.lf-mobile-nav__link {
    display: block;
    padding: 11px 12px;
    border-radius: var(--lf-radius-card);
    font-size: 0.9375rem;
    color: var(--lf-pine);
}
.lf-mobile-nav__link:hover { background-color: var(--lf-surface); }

.lf-mobile-nav__link--current {
    background-color: var(--lf-surface);
    color: var(--lf-forest);
    font-weight: 500;
}

.lf-mobile-nav__cta {
    display: block;
    margin-top: 10px;
    padding: 12px;
    border-radius: var(--lf-radius-pill);
    background-color: var(--lf-forest);
    color: var(--lf-canvas);
    font-weight: 500;
    text-align: center;
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.lf-hero { padding-block: 56px 64px; }

@media (min-width: 768px) {
    .lf-hero { padding-block: 88px 104px; }
}

.lf-hero__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 48px;
    align-items: center;
}

@media (min-width: 1024px) {
    .lf-hero__grid {
        grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
        gap: 64px;
    }
}

.lf-hero__copy > * + * { margin-top: 22px; }
.lf-hero__copy .lf-store-row { margin-top: 32px; }

/* Device frame — parchment card, hairline, no drop shadow */
.lf-device {
    justify-self: center;
    width: 100%;
    max-width: 340px;
    background-color: var(--lf-surface);
    border: var(--lf-hairline-w) solid var(--lf-hairline);
    border-radius: 20px;
    padding: 14px;
}

@media (min-width: 1024px) {
    .lf-device { justify-self: end; }
}

.lf-device__shot {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 384 / 832;
    object-fit: cover;
    border-radius: var(--lf-radius-card);
    background-color: var(--lf-elevated);
}

.lf-device__caption {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 12px 4px 2px;
    font-size: 0.8125rem;
    color: var(--lf-muted-strong);
}

.lf-device__dot {
    width: 7px;
    height: 7px;
    border-radius: var(--lf-radius-pill);
    background-color: var(--lf-sage);
    flex: none;
}

/* --------------------------------------------------------------------------
   Cards
   -------------------------------------------------------------------------- */

.lf-cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}

@media (min-width: 640px)  { .lf-cards--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 640px)  { .lf-cards--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 960px)  { .lf-cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 640px)  { .lf-cards--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .lf-cards--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.lf-card {
    background-color: var(--lf-surface);
    border: var(--lf-hairline-w) solid var(--lf-hairline);
    border-radius: var(--lf-radius-card);
    padding: 26px;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

a.lf-card:hover {
    background-color: var(--lf-elevated);
    border-color: #D6CEC1;
}

.lf-card__icon {
    display: block;
    font-size: 26px;
    color: var(--lf-pine);
    margin-bottom: 14px;
}

.lf-card .lf-h3 { margin-bottom: 8px; }

.lf-card__text {
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--lf-pine);
    margin: 0;
}

/* Numbered cards for "Where your books live" */
.lf-card__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    margin-bottom: 16px;
    border-radius: var(--lf-radius-pill);
    border: var(--lf-hairline-w) solid var(--lf-hairline);
    background-color: var(--lf-canvas);
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--lf-pine);
}

.lf-card__tag {
    display: inline-block;
    margin-bottom: 14px;
    padding: 4px 11px;
    border-radius: var(--lf-radius-pill);
    background-color: var(--lf-canvas);
    border: var(--lf-hairline-w) solid var(--lf-hairline);
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--lf-pine);
}

.lf-closing {
    margin: 28px auto 0;
    max-width: 32em;
    text-align: center;
    font-family: var(--lf-display);
    font-weight: 500;
    font-size: clamp(1.0625rem, 2.2vw, 1.375rem);
    line-height: 1.45;
    color: var(--lf-forest);
    text-wrap: balance;
}

/* --------------------------------------------------------------------------
   Section headers
   -------------------------------------------------------------------------- */

.lf-section__head { margin-bottom: 40px; }
.lf-section__head > * + * { margin-top: 14px; }

.lf-section__head--split {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

@media (min-width: 768px) {
    .lf-section__head--split {
        flex-direction: row;
        align-items: flex-end;
        justify-content: space-between;
    }
    .lf-section__head--split > * + * { margin-top: 0; }
}

.lf-section__head--center {
    text-align: center;
    max-width: 40rem;
    margin-inline: auto;
}
.lf-section__head--center .lf-lede { margin-inline: auto; }

/* --------------------------------------------------------------------------
   Dark band (Privacy by design)
   -------------------------------------------------------------------------- */

.lf-band {
    background-color: var(--lf-forest);
    color: var(--lf-on-band);
}

.lf-band .lf-h2,
.lf-band .lf-h3 { color: var(--lf-on-band); }

.lf-band .lf-lede { color: var(--lf-on-band-soft); }

.lf-band .lf-card {
    background-color: var(--lf-band-surface);
    border-color: var(--lf-band-hairline);
}

.lf-band .lf-card__icon { color: var(--lf-sage); }

.lf-band .lf-card__text { color: var(--lf-on-band-soft); }

.lf-band .lf-arrowlink { color: var(--lf-on-band-soft); }
.lf-band .lf-arrowlink:hover { color: var(--lf-on-band); }

/* --------------------------------------------------------------------------
   Feature grid (bento)
   -------------------------------------------------------------------------- */

.lf-bento {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}

@media (min-width: 720px) {
    .lf-bento { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    .lf-bento__item--wide { grid-column: span 4; }
    .lf-bento__item--half { grid-column: span 3; }
    .lf-bento__item--third { grid-column: span 2; }
    .lf-bento__item--full { grid-column: span 6; }
}

.lf-feature-lead {
    background-color: var(--lf-forest);
    border-color: transparent;
    color: var(--lf-on-band);
}
.lf-feature-lead .lf-h3 { color: var(--lf-on-band); }
.lf-feature-lead .lf-card__text { color: var(--lf-on-band-soft); }
.lf-feature-lead .lf-card__icon { color: var(--lf-sage); }
.lf-feature-lead .lf-textlink {
    color: var(--lf-on-band);
    text-decoration-color: var(--lf-sage);
}

.lf-banner {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 22px;
    background-color: var(--lf-elevated);
    border: var(--lf-hairline-w) solid var(--lf-hairline);
    border-radius: var(--lf-radius-card);
    padding: 30px;
}

@media (min-width: 860px) {
    .lf-banner {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 32px;
        padding: 34px 38px;
    }
}

.lf-banner__copy { max-width: 34rem; }
.lf-banner__copy .lf-h3 { margin-bottom: 8px; }
.lf-banner .lf-btn { flex: none; }

/* --------------------------------------------------------------------------
   Pricing
   -------------------------------------------------------------------------- */

.lf-pricing {
    background-color: var(--lf-surface);
    border: var(--lf-hairline-w) solid var(--lf-hairline);
    border-radius: var(--lf-radius-card);
    padding: 44px 24px;
    text-align: center;
}

@media (min-width: 768px) {
    .lf-pricing { padding: 64px 48px; }
}

.lf-pricing .lf-lede { margin-inline: auto; }

.lf-pricing__list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin: 28px 0 0;
    padding: 0;
    list-style: none;
}

.lf-pricing__list li {
    padding: 7px 16px;
    border-radius: var(--lf-radius-pill);
    background-color: var(--lf-canvas);
    border: var(--lf-hairline-w) solid var(--lf-hairline);
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--lf-forest);
}

.lf-pricing .lf-store-row {
    justify-content: center;
    margin-top: 32px;
}

.lf-pricing__note { margin-top: 20px; }

/* --------------------------------------------------------------------------
   What Leafed doesn't do — the limitations list (index.html, under the hero).
   Mirrors the App Store screenshot panel of the same copy
   (scripts/brand/store-screenshots.limits.manifest.js).
   -------------------------------------------------------------------------- */

.lf-wont {
    max-width: 620px;
    margin: 32px auto 0;
    padding: 0;
    list-style: none;
}

.lf-wont li {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 2px;
    border-top: var(--lf-hairline-w) solid var(--lf-hairline);
    font-size: 1.0625rem;
    font-weight: 500;
    color: var(--lf-ink);
}

.lf-wont li:last-child { border-bottom: var(--lf-hairline-w) solid var(--lf-hairline); }

.lf-wont__x {
    flex: 0 0 auto;
    font-size: 1.25rem;
    line-height: 1;
    color: var(--lf-sage);
}

.lf-wont__foot {
    max-width: 620px;
    margin: 24px auto 0;
    text-align: center;
    font-family: var(--lf-display);
    font-size: 1.25rem;
    color: var(--lf-forest);
}

.lf-wont__foot span {
    display: block;
    margin-top: 6px;
    font-family: var(--lf-body);
    font-size: 0.9375rem;
    color: var(--lf-pine);
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.lf-footer {
    border-top: var(--lf-hairline-w) solid var(--lf-hairline);
    background-color: var(--lf-surface);
    padding-block: 40px;
}

.lf-footer__inner {
    display: flex;
    flex-direction: column;
    gap: 26px;
}

@media (min-width: 768px) {
    .lf-footer__inner {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
}

.lf-footer__brand { margin-bottom: 8px; }
.lf-footer__brand .lf-brand__glyph { width: 26px; height: 26px; }
.lf-footer__brand .lf-brand__word { font-size: 1.0625rem; }

.lf-footer__links {
    display: flex;
    flex-wrap: wrap;
    gap: 14px 24px;
}

.lf-footer__link {
    font-size: 0.875rem;
    color: var(--lf-pine);
    transition: color 0.2s ease;
}
.lf-footer__link:hover { color: var(--lf-forest); }

/* --------------------------------------------------------------------------
   Motion
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }

    /* Never leave content stranded at opacity 0 if animation is suppressed */
    .reveal,
    .reveal.visible {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }

    .lf-page *,
    .lf-page *::before,
    .lf-page *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }
}

/* --------------------------------------------------------------------------
   #accountNav compatibility
   --------------------------------------------------------------------------
   /scripts/account-nav.js rewrites this mount with hardcoded Tailwind classes
   and is shared with the other pages, so it is not edited. These id-scoped
   rules (specificity 1,0,1) outrank those utilities without !important.
   -------------------------------------------------------------------------- */

#accountNav > a {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    font-family: var(--lf-body);
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--lf-forest);
    white-space: nowrap;
}
#accountNav > a:hover { color: var(--lf-pine); }

#accountNav > button {
    background-color: var(--lf-forest);
    color: var(--lf-canvas);
    border: 0;
    border-radius: var(--lf-radius-pill);
    font-family: var(--lf-body);
}
#accountNav > button:hover { background-color: #1B3220; }

#accountNav > div {
    background-color: var(--lf-canvas);
    border: var(--lf-hairline-w) solid var(--lf-hairline);
    border-radius: var(--lf-radius-card);
    box-shadow: none;
}

#accountNav > div p { color: var(--lf-muted-strong); }

#accountNav > div a,
#accountNav > div button {
    font-family: var(--lf-body);
    color: var(--lf-forest);
    background: none;
}

#accountNav > div a:hover,
#accountNav > div button:hover { background-color: var(--lf-surface); }

#accountNav > div p,
#accountNav > div button {
    border-color: var(--lf-hairline);
}

#mobileAccountNav button,
#mobileAccountNav a,
#mobileAccountNav span {
    font-family: var(--lf-body);
}

#mobileAccountNav button:hover {
    background-color: var(--lf-surface);
}