/* =========================================================================
   Bee Manager — legal pages theme
   Product brand: bee GOLD. Overall look: Servodio Digital "Playful" style
   (Poppins headings, warm light background, big rounded cards, pill chips,
   soft shadows). Shared by privacy/ and terms/.
   ========================================================================= */

:root {
    /* Bee Manager gold */
    --bm-gold:        #C9901A;
    --bm-gold-bright: #E9A82A;
    --bm-gold-soft:   #FFFBF2;
    --bm-gold-line:   #f0d080;
    --bm-gold-deep:   #633806;

    /* Warm light surfaces (shared with the company theme) */
    --bm-bg:        #faf8f6;
    --bm-surface:   #ffffff;
    --bm-border:    #ece4dd;
    --bm-text:      #3a2a00;
    --bm-text-body: #5a4f43;
    --bm-text-mut:  #9a8d7d;

    /* Playful tokens */
    --bm-radius:    24px;
    --bm-radius-sm: 16px;
    --bm-shadow:    0 14px 32px rgba(36, 28, 23, .08);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
    font-family: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
    background: var(--bm-bg);
    color: var(--bm-text-body);
    font-size: 15px;
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
}

/* ---------- Header ---------- */
.header {
    background: linear-gradient(135deg, var(--bm-gold) 0%, var(--bm-gold-bright) 100%);
    padding: 20px 24px;
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 6px 22px rgba(201, 144, 26, .28);
}
.header-inner { max-width: 800px; margin: 0 auto; display: flex; align-items: center; gap: 14px; }
.header-back {
    margin-left: auto;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 600;
    color: #fff;
    text-decoration: none;
    background: rgba(255, 255, 255, .18);
    border: 1px solid rgba(255, 255, 255, .35);
    transition: background .15s ease, transform .12s ease;
}
.header-back:hover { background: rgba(255, 255, 255, .3); transform: translateY(-1px); }
.header-back .arr { font-size: 14px; line-height: 1; }
@media (max-width: 520px) { .header-back .label { display: none; } .header-back { padding: 7px 11px; } }
.header-icon {
    width: 50px; height: 50px;
    border-radius: var(--bm-radius-sm);
    overflow: hidden; flex-shrink: 0;
    box-shadow: 0 6px 16px rgba(36, 28, 23, .2);
}
.header-icon img { width: 100%; height: 100%; object-fit: cover; }
.header-text h1 { font-family: "Poppins", sans-serif; color: #fff; font-size: 19px; font-weight: 700; letter-spacing: -.01em; }
.header-text p { color: rgba(255, 255, 255, .9); font-size: 11.5px; margin-top: 2px; }

/* ---------- Language bar ---------- */
.lang-bar { background: var(--bm-bg); padding: 14px 24px 4px; }
.lang-bar-inner { max-width: 800px; margin: 0 auto; display: flex; gap: 7px; flex-wrap: wrap; }
.lang-btn {
    padding: 5px 13px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid var(--bm-gold-line);
    background: var(--bm-gold-soft);
    color: var(--bm-gold-deep);
    text-decoration: none;
    transition: transform .12s ease, box-shadow .15s ease;
}
.lang-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 14px rgba(201, 144, 26, .18); }
.lang-btn.active {
    background: linear-gradient(135deg, var(--bm-gold) 0%, var(--bm-gold-bright) 100%);
    color: #fff;
    border-color: var(--bm-gold);
}

/* ---------- Content / cards ---------- */
.content { max-width: 800px; margin: 0 auto; padding: 14px 12px 40px; }
.card {
    background: var(--bm-surface);
    border: 1px solid var(--bm-border);
    border-radius: var(--bm-radius);
    box-shadow: var(--bm-shadow);
    padding: 22px 26px;
    margin-bottom: 14px;
}
.section-title {
    font-family: "Poppins", sans-serif;
    color: var(--bm-gold);
    font-size: 11px;
    font-weight: 700;
    margin-bottom: 9px;
    text-transform: uppercase;
    letter-spacing: .08em;
}
.card h2 { font-family: "Poppins", sans-serif; color: var(--bm-text); font-size: 16px; font-weight: 600; margin-bottom: 9px; }
.card p { color: var(--bm-text-body); font-size: 14.5px; margin-bottom: 9px; line-height: 1.75; }
.card p:last-child { margin-bottom: 0; }
.card ul { padding-left: 20px; margin-bottom: 9px; }
.card ul li { color: var(--bm-text-body); font-size: 14.5px; margin-bottom: 6px; line-height: 1.65; }
.card strong { color: var(--bm-text); }

/* Callouts */
.tip {
    background: var(--bm-gold-soft);
    border: 1px solid var(--bm-gold-line);
    border-radius: var(--bm-radius-sm);
    padding: 12px 15px;
    margin: 10px 0;
    font-size: 13.5px;
    color: var(--bm-gold-deep);
}
.warning {
    background: #FCEBEB;
    border: 1px solid #f0c0c0;
    border-radius: var(--bm-radius-sm);
    padding: 12px 15px;
    margin: 10px 0;
    font-size: 13.5px;
    color: #791F1F;
}

/* separators no longer needed — cards float on their own */
.sep { display: none; }

/* Update badge (gold, on-brand) */
.update-badge {
    display: inline-block;
    background: var(--bm-gold-soft);
    color: var(--bm-gold-deep);
    border: 1px solid var(--bm-gold-line);
    font-size: 11px;
    padding: 3px 11px;
    border-radius: 999px;
    margin-bottom: 12px;
    font-weight: 600;
}

/* Contact rows */
.contact-row { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--bm-border); }
.contact-row:last-child { border-bottom: none; }
.contact-label { font-size: 12px; color: var(--bm-text-mut); min-width: 90px; }
.contact-value { font-size: 13.5px; color: var(--bm-text); font-weight: 500; }
.contact-value a { color: var(--bm-gold); text-decoration: none; }
.contact-value a:hover { text-decoration: underline; }

/* Language toggling */
.lang-section { display: none; }
.lang-section.active { display: block; }

/* =========================================================================
   SHOWCASE / PRODUCT LANDING (beemanager/index.html)
   Reuses the gold Playful tokens above. Prefixed .bm- to avoid clashing
   with the legal-page classes.
   ========================================================================= */
.bm-hero {
    position: relative;
    overflow: hidden;
    text-align: center;
    padding: 4.5rem 1.5rem 4rem;
    background:
        radial-gradient(680px 340px at 50% -12%, rgba(201, 144, 26, .20), transparent 65%),
        var(--bm-bg);
}
.bm-hero-icon {
    width: 96px; height: 96px;
    border-radius: 26px;
    object-fit: cover;
    box-shadow: 0 18px 40px rgba(201, 144, 26, .3);
    margin-bottom: 1.25rem;
}
.bm-hero h1 {
    font-family: "Poppins", sans-serif;
    font-size: clamp(2.1rem, 6vw, 3rem);
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--bm-text);
    margin-bottom: .6rem;
}
.bm-hero h1 .bm-accent {
    background: linear-gradient(90deg, var(--bm-gold), var(--bm-gold-bright));
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.bm-tagline { font-size: 1.15rem; color: var(--bm-text-body); max-width: 36rem; margin: 0 auto 1.75rem; }
.bm-hero-actions { display: flex; flex-wrap: wrap; gap: .8rem; justify-content: center; align-items: center; }

/* Google Play badge */
.bm-play {
    display: inline-flex; align-items: center; gap: .7rem;
    background: #000; color: #fff;
    border-radius: 14px; padding: .6rem 1.25rem; text-decoration: none;
    transition: transform .15s ease, box-shadow .2s ease;
}
.bm-play:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(36, 28, 23, .3); color: #fff; }
.bm-play .tri { width: 0; height: 0; border-style: solid; border-width: 10px 0 10px 17px; border-color: transparent transparent transparent var(--bm-gold-bright); }
.bm-play .txt { display: flex; flex-direction: column; line-height: 1.1; text-align: left; }
.bm-play .txt small { font-size: .62rem; letter-spacing: .08em; color: #cfd6df; }
.bm-play .txt strong { font-family: "Poppins", sans-serif; font-size: 1.05rem; font-weight: 600; }

.bm-ghost {
    display: inline-flex; align-items: center;
    padding: .6rem 1.25rem; border-radius: 999px;
    font-weight: 600; font-size: .95rem; text-decoration: none;
    color: var(--bm-gold-deep); background: var(--bm-gold-soft);
    border: 1px solid var(--bm-gold-line);
    transition: transform .15s ease;
}
.bm-ghost:hover { transform: translateY(-2px); color: var(--bm-gold-deep); }

/* sections */
.bm-section { padding: 4rem 1.25rem; }
.bm-section.alt { background: var(--bm-surface); border-top: 1px solid var(--bm-border); border-bottom: 1px solid var(--bm-border); }
.bm-wrap { max-width: 980px; margin: 0 auto; }
.bm-section-head { text-align: center; max-width: 40rem; margin: 0 auto 2.5rem; }
.bm-section-head h2 { font-family: "Poppins", sans-serif; font-size: clamp(1.6rem, 4vw, 2.2rem); font-weight: 700; color: var(--bm-text); margin-bottom: .5rem; }
.bm-section-head p { color: var(--bm-text-body); }

/* feature grid */
.bm-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; }
.bm-feature {
    background: var(--bm-bg);
    border: 1px solid var(--bm-border);
    border-radius: var(--bm-radius);
    padding: 1.6rem 1.4rem;
    box-shadow: var(--bm-shadow);
    transition: transform .2s ease, box-shadow .2s ease;
}
.bm-feature:hover { transform: translateY(-4px); box-shadow: 0 18px 38px rgba(201, 144, 26, .16); }
.bm-feature .ic {
    width: 50px; height: 50px; border-radius: var(--bm-radius-sm);
    display: grid; place-items: center; font-size: 1.5rem;
    background: var(--bm-gold-soft); border: 1px solid var(--bm-gold-line);
    margin-bottom: 1rem;
}
.bm-feature h3 { font-family: "Poppins", sans-serif; font-size: 1.1rem; font-weight: 600; color: var(--bm-text); margin-bottom: .4rem; }
.bm-feature p { color: var(--bm-text-body); font-size: 14px; margin: 0; }

/* screenshots — swipeable gallery of finished promo tiles */
.bm-gallery {
    display: flex;
    gap: 1.1rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding: .5rem .25rem 1.4rem;
    -webkit-overflow-scrolling: touch;
}
.bm-gallery::-webkit-scrollbar { height: 8px; }
.bm-gallery::-webkit-scrollbar-track { background: transparent; }
.bm-gallery::-webkit-scrollbar-thumb { background: var(--bm-gold-line); border-radius: 999px; }
.bm-shot { flex: 0 0 auto; width: 234px; scroll-snap-align: center; }
.bm-shot img {
    width: 100%;
    border-radius: var(--bm-radius);
    border: 1px solid var(--bm-border);
    box-shadow: 0 18px 40px rgba(36, 28, 23, .18);
    display: block;
}
.bm-swipe-hint { text-align: center; font-size: 13px; color: var(--bm-text-mut); margin-top: .25rem; }

/* pro callout */
.bm-pro {
    max-width: 720px; margin: 0 auto; text-align: center;
    background: linear-gradient(135deg, var(--bm-gold) 0%, var(--bm-gold-bright) 100%);
    color: #fff; border-radius: var(--bm-radius); padding: 2.5rem 2rem;
    box-shadow: 0 20px 44px rgba(201, 144, 26, .3);
}
.bm-pro h2 { font-family: "Poppins", sans-serif; font-size: 1.7rem; font-weight: 800; margin-bottom: .5rem; }
.bm-pro .price { font-family: "Poppins", sans-serif; font-size: 2.6rem; font-weight: 800; line-height: 1; margin: .5rem 0; }
.bm-pro .price small { font-size: 1rem; font-weight: 500; opacity: .85; }
.bm-pro p { color: rgba(255, 255, 255, .9); margin-bottom: 0; }

/* FAQ */
.bm-faq { max-width: 720px; margin: 0 auto; }
.bm-faq details {
    background: var(--bm-surface); border: 1px solid var(--bm-border);
    border-radius: var(--bm-radius-sm); padding: .35rem 1.25rem; margin-bottom: .75rem;
}
.bm-faq summary {
    font-family: "Poppins", sans-serif; font-weight: 600; color: var(--bm-text);
    padding: .9rem 0; cursor: pointer; list-style: none; position: relative;
    padding-right: 1.5rem;
}
.bm-faq summary::-webkit-details-marker { display: none; }
.bm-faq summary::after { content: "+"; position: absolute; right: 0; color: var(--bm-gold); font-size: 1.3rem; line-height: 1; }
.bm-faq details[open] summary::after { content: "\2013"; }
.bm-faq details p { color: var(--bm-text-body); font-size: 14.5px; padding-bottom: 1rem; margin: 0; }

/* CTA band */
.bm-cta { text-align: center; padding: 4rem 1.5rem;
    background: radial-gradient(600px 260px at 50% 0%, rgba(201, 144, 26, .18), transparent 70%), var(--bm-bg); }
.bm-cta h2 { font-family: "Poppins", sans-serif; font-size: clamp(1.6rem, 4vw, 2.2rem); font-weight: 800; color: var(--bm-text); margin-bottom: 1.25rem; }

@media (max-width: 760px) { .bm-grid { grid-template-columns: 1fr; } }

/* ---------- Footer (dark warm, anchors the page — matches company site) ---------- */
.footer { background: #2a2018; padding: 24px; text-align: center; margin-top: 14px; }
.footer p { font-size: 11.5px; color: rgba(255, 255, 255, .55); margin-bottom: 4px; }
.footer a { color: var(--bm-gold-bright); text-decoration: none; }
.footer a:hover { text-decoration: underline; }