/* ═══════════════════════════════════════════════════════════════════
   PAGE: business-email  ·  Managely Mail

   Almost everything here is borrowed: .appx-hero, .appx-section,
   .appx-card, .appx-grid and .mcta-* all come from globals, the same
   as every other add-on page. Only four things are genuinely new,
   and each earns its place:

     .bml-switch   the from-address comparison, which is the page
     .bml-plans    three numbers, said without a table
     .bml-faq      two columns of short answers
     .bml-link-card  a card that is a link to a sister page

   Written in logical properties throughout. One `dir` flip on the
   shell mirrors the whole page; a single `left:` would break it in
   one direction only, silently.
   ═══════════════════════════════════════════════════════════════════ */

.pg-bmail {
    --app-accent: var(--blue);
    color: var(--ink);
    line-height: 1.6;
}

/* ── The switch: two envelopes, one arrow ──────────────────────────
   This is the whole argument, and it is made with type rather than
   pictures -- an address is more convincing set as an address than
   drawn as an illustration. */

.bml-switch {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 22px;
    align-items: center;
}

.bml-mail {
    border: 1px solid var(--mist);
    border-radius: var(--r-l);
    padding: 22px 24px;
    background: var(--white);
}

.bml-mail--before {
    /* Not red. A red panel here reads as an attack on the visitor's own
       current setup, and the visitor is the one we are trying to keep. */
    background: var(--snow);
}

.bml-mail--after {
    border-color: rgba(var(--blue-rgb), .35);
    box-shadow: 0 1px 2px rgba(11, 17, 32, .04);
}

.bml-tag {
    display: inline-block;
    font-size: var(--fs-micro);
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 100px;
    margin-block-end: 14px;
}

.bml-tag--before {
    color: var(--silver);
    background: var(--mist);
}

.bml-tag--after {
    color: var(--blue-d);
    background: var(--blue-l);
}

.bml-row {
    display: flex;
    gap: 10px;
    align-items: baseline;
    padding-block: 7px;
    border-block-start: 1px solid var(--mist);
}

.bml-row:first-of-type {
    border-block-start: 0;
}

.bml-k {
    flex: 0 0 62px;
    font-size: var(--fs-2xs);
    color: var(--silver);
    font-weight: 600;
}

.bml-v {
    font-size: var(--fs-sm);
    color: var(--ink);
    word-break: break-all;
}

.bml-v--bad {
    color: var(--slate);
    text-decoration: line-through;
    text-decoration-color: rgba(var(--blue-rgb), .35);
}

.bml-v--good {
    color: var(--blue-d);
    font-weight: 700;
}

.bml-note {
    margin: 14px 0 0;
    font-size: var(--fs-2xs);
    color: var(--slate);
    line-height: 1.65;
}

.bml-arrow {
    inline-size: 40px;
    block-size: 40px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--blue-l);
    color: var(--blue);
    flex: none;
}

/* ── The plan numbers ─────────────────────────────────────────────── */

.bml-plans {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    margin-block-start: 8px;
}

.bml-plan {
    border: 1px solid var(--mist);
    border-radius: var(--r-l);
    padding: 26px 18px;
    background: var(--white);
    text-align: center;
}

.bml-plan b {
    display: block;
    font-size: 40px;
    line-height: 1.1;
    font-weight: 700;
    color: var(--ink);
    letter-spacing: -1px;
}

.bml-plan span {
    display: block;
    font-size: var(--fs-2xs);
    color: var(--slate);
    margin-block-start: 4px;
}

.bml-plan em {
    display: block;
    font-style: normal;
    font-size: var(--fs-micro);
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--blue-d);
    margin-block-start: 12px;
}

.bml-plans-note {
    margin: 18px auto 22px;
    max-inline-size: 62ch;
    text-align: center;
    font-size: var(--fs-sm);
    color: var(--slate);
}

/* ── A card that is a link ────────────────────────────────────────── */

.bml-link-card {
    display: block;
    text-decoration: none;
    color: inherit;
    transition: border-color .18s, transform .18s;
}

.bml-link-card:hover {
    border-color: rgba(var(--blue-rgb), .45);
    transform: translateY(-2px);
}

.bml-go {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-block-start: 14px;
    font-size: var(--fs-2xs);
    font-weight: 700;
    color: var(--blue-d);
}

/* ── FAQ ──────────────────────────────────────────────────────────── */

.bml-faq {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 26px 34px;
}

.bml-q h3 {
    margin: 0 0 7px;
    font-size: var(--fs-sm);
    font-weight: 700;
    color: var(--ink);
}

.bml-q p {
    margin: 0;
    font-size: var(--fs-2xs);
    line-height: 1.75;
    color: var(--slate);
}

/* ── Narrow screens ───────────────────────────────────────────────── */

@media (max-width: 900px) {

    .bml-switch,
    .bml-faq {
        grid-template-columns: 1fr;
    }

    /* The arrow points down once the two panels stack, and it is decoration
       at that size, so it simply goes. */
    .bml-arrow {
        display: none;
    }

    .bml-plans {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    .bml-link-card {
        transition: none;
    }

    .bml-link-card:hover {
        transform: none;
    }
}