/* frontend4 — "Launch App" slide-out (js/appmenu.js injects the markup).
   Follows .claude/rules/frontend4-design.md: warm paper, serif section heads,
   Inter body at 300, the two-button system, drawn bullets, sentence case. */

.apm { position: fixed; inset: 0; z-index: 200; pointer-events: none; }
.apm__backdrop {
    position: absolute; inset: 0;
    background: rgba(17, 17, 16, .34);
    opacity: 0;
    transition: opacity .34s cubic-bezier(.2,.7,.2,1);
}
.apm__panel {
    position: absolute; top: 0; right: 0; bottom: 0;
    width: min(720px, 92vw);
    background: var(--page-bg, #f2f2f0);
    box-shadow: -30px 0 80px -30px rgba(17,17,16,.45);
    transform: translateX(100%);
    transition: transform .38s cubic-bezier(.2,.7,.2,1);
    outline: none;
    display: flex; flex-direction: column;
}
.apm.is-open { pointer-events: auto; }
.apm.is-open .apm__backdrop { opacity: 1; }
.apm.is-open .apm__panel { transform: none; }
html.apm-lock, html.apm-lock body { overflow: hidden; }

.apm__scroll {
    flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
    padding: clamp(64px, 7vw, 88px) clamp(24px, 4.5vw, 64px) clamp(40px, 6vw, 72px);
}

/* close pill — the secondary button, shrunk */
.apm__close {
    position: absolute; top: clamp(16px, 2.4vw, 28px); right: clamp(16px, 2.4vw, 28px); z-index: 2;
    display: inline-flex; align-items: center; gap: 9px;
    height: 44px; padding: 0 20px;
    border-radius: 999px;
    background: #fff; color: var(--ink, #141413);
    font-family: var(--font-sans, Inter, system-ui, sans-serif);
    font-size: 14.5px; font-weight: 500; letter-spacing: -0.01em;
    border: 1px solid rgba(17,17,16,.08);
    box-shadow: 0 1px 2px rgba(17,17,16,.04), 0 10px 30px -14px rgba(17,17,16,.22);
    cursor: pointer;
    transition: transform .25s cubic-bezier(.2,.7,.2,1), box-shadow .25s;
}
.apm__close:hover { transform: translateY(-1px); box-shadow: 0 2px 4px rgba(17,17,16,.05), 0 16px 40px -16px rgba(17,17,16,.28); }
.apm__close svg { width: 13px; height: 13px; color: var(--ink-mute, #8a8a86); }

/* existing users — a quiet card so returning users can't miss the login */
.apm__login {
    display: flex; align-items: center; flex-wrap: wrap; gap: 14px;
    margin: 0 0 clamp(22px, 3vw, 32px);
}
.apm__login-tx {
    font-family: var(--font-sans, Inter, system-ui, sans-serif);
    font-size: 14.5px; font-weight: 400; letter-spacing: -0.01em; color: var(--ink-soft, #474744);
}
.apm__login-btn {
    display: inline-flex; align-items: center; gap: 9px;
    height: 40px; padding: 0 18px;
    border-radius: 999px;
    background: #fff; color: var(--ink, #141413);
    font-size: 14.5px; font-weight: 600; letter-spacing: -0.01em; text-decoration: none;
    border: 1px solid rgba(17,17,16,.08);
    box-shadow: 0 1px 2px rgba(17,17,16,.04), 0 10px 30px -16px rgba(17,17,16,.22);
    transition: transform .25s cubic-bezier(.2,.7,.2,1), box-shadow .25s;
}
.apm__login-btn:hover { transform: translateY(-1px); box-shadow: 0 2px 4px rgba(17,17,16,.05), 0 16px 40px -16px rgba(17,17,16,.28); }
.apm__login-btn svg { width: 15px; height: 15px; color: var(--ink-mute, #8a8a86); transition: color .2s, transform .25s cubic-bezier(.2,.7,.2,1); }
.apm__login-btn:hover svg { color: var(--ink, #141413); transform: translate(1px, -1px); }

/* sections — space first, a hairline only between them */
.apm__sec { padding: clamp(26px, 3.4vw, 40px) 0 0; margin: clamp(26px, 3.4vw, 40px) 0 0; border-top: 1px solid rgba(17,17,16,.10); }
.apm__sec--first { padding-top: 0; margin-top: 0; border-top: 0; }
.apm__sec h3 {
    font-family: var(--font-serif, Georgia, serif);
    font-weight: 400; font-variation-settings: 'SOFT' 50;
    font-size: clamp(24px, 2.6vw, 34px); line-height: 1.08; letter-spacing: -0.022em;
    color: var(--ink, #141413); margin: 0 0 12px;
}
.apm__sec h3 sup, .apm__sec p sup, .apm__links sup { font-size: .5em; vertical-align: top; position: relative; top: .3em; }
.apm__sec p {
    font-size: 16px; font-weight: 300; line-height: 1.65;
    color: var(--ink-soft, #474744); margin: 0 0 14px; max-width: 56ch;
}
.apm__sec p b { font-weight: 600; color: var(--ink, #141413); }
.apm__lead-in { margin-bottom: 12px !important; }

/* link list — a drawn dot, never a list-style disc */
.apm__links { list-style: none; margin: 0 0 22px; padding: 0; display: grid; gap: 9px; }
.apm__links li { position: relative; padding-left: 22px; }
.apm__links li::before {
    content: ""; position: absolute; left: 0; top: .62em;
    width: 7px; height: 7px; border-radius: 50%; background: var(--ink, #141413);
}
.apm__links a {
    font-size: 16px; font-weight: 400; line-height: 1.5; color: var(--ink, #141413);
    text-decoration: underline; text-decoration-color: rgba(17,17,16,.28); text-underline-offset: 4px;
    transition: text-decoration-color .2s;
}
.apm__links a:hover { text-decoration-color: var(--ink, #141413); }

/* CTAs — the site's two buttons, one per section */
.apm__cta { margin-top: 4px; }
.apm .btn-dark.apm__cta, .apm .btn-login.apm__cta { height: 52px; padding: 0 26px; font-size: 15.5px; }

@media (max-width: 560px) {
    .apm__panel { width: 100%; }
    .apm .btn-dark.apm__cta, .apm .btn-login.apm__cta { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
    .apm__panel, .apm__backdrop, .apm__close { transition: none; }
}