/* Scoped to #business-landing so Foundation's page styles and these cannot reach each other. */

#business-landing {
    --bl-deep: #9a5b0a;
    --bl-btn: var(--ds-brand, #f79321);
    --bl-btn-hover: #e07f12;
    --bl-btn-edge: var(--ds-brand-strong, #c2740f);
    background: var(--ds-surface-2, #faf8f4);
    color: var(--ds-text-2, #56534c);
    font-family: Figtree, system-ui, -apple-system, "Segoe UI", sans-serif;
    font-size: 17px;
    line-height: 1.6;
}

#business-landing * { box-sizing: border-box; }

#business-landing .bl-wrap {
    max-width: 1180px;
    margin: 0 auto;
    padding-left: 24px;
    padding-right: 24px;
}

#business-landing h1,
#business-landing h2,
#business-landing h3 {
    color: var(--ds-text, #211f1c);
    margin: 0;
    text-wrap: balance;
    font-family: inherit;
}

#business-landing p { margin: 0; max-width: 68ch; }

#business-landing .bl-eyebrow {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--bl-deep);
    margin: 0 0 18px;
}

#business-landing .bl-cta,
#business-landing .bl-cta-quiet {
    display: inline-block;
    text-decoration: none;
    border-radius: 9px;
    font-size: 17px;
    padding: 16px 30px;
}

#business-landing .bl-cta {
    background: var(--bl-btn);
    color: var(--ds-text, #211f1c);
    font-weight: 700;
    /* Same 1.5px box as .bl-cta-quiet, so the pair sits on one baseline. */
    border: 1.5px solid var(--bl-btn-edge);
    padding: 15px 28px;
}
#business-landing .bl-cta:hover { background: var(--bl-btn-hover); color: var(--ds-text, #211f1c); }

#business-landing .bl-cta-quiet {
    background: var(--ds-surface, #fff);
    color: var(--ds-text, #211f1c);
    font-weight: 600;
    border: 1.5px solid #cfc9be;
    padding: 15px 28px;
}

#business-landing .bl-hero { background: var(--ds-surface, #fff); border-bottom: 1px solid var(--ds-border, #ebe8e1); }
#business-landing .bl-hero .bl-wrap { padding-top: 76px; padding-bottom: 72px; }
#business-landing .bl-hero h1 { font-size: 54px; line-height: 1.07; font-weight: 800; letter-spacing: -.03em; margin-bottom: 22px; }
#business-landing .bl-lede { font-size: 20px; line-height: 1.55; margin-bottom: 30px; max-width: 36em; }
#business-landing .bl-actions { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
#business-landing .bl-trust { margin-top: 26px; font-size: 15px; color: #6b675f; }

#business-landing .bl-section .bl-wrap { padding-top: 76px; padding-bottom: 20px; }
#business-landing .bl-section h2 { font-size: 36px; font-weight: 800; letter-spacing: -.022em; margin-bottom: 14px; }
#business-landing .bl-section .bl-sub { font-size: 19px; margin-bottom: 40px; max-width: 46em; }

#business-landing .bl-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
    gap: 26px;
}

#business-landing .bl-card {
    background: var(--ds-surface, #fff);
    border: 1px solid var(--ds-border, #ebe8e1);
    border-radius: 13px;
    padding: 28px;
}

#business-landing .bl-card h3 { font-size: 20px; font-weight: 700; margin-bottom: 10px; }
#business-landing .bl-card p { font-size: 16px; }


#business-landing .bl-band .bl-wrap { padding-top: 76px; padding-bottom: 20px; }
#business-landing .bl-band-inner {
    background: var(--ds-text, #211f1c);
    border-radius: 18px;
    padding: 52px;
    display: flex;
    flex-wrap: wrap;
    gap: 44px;
    align-items: center;
}
#business-landing .bl-band-inner h2 { color: #f4f1ea; font-size: 34px; line-height: 1.13; margin-bottom: 18px; }
#business-landing .bl-band-inner p { color: #c2bdb1; font-size: 18px; margin-bottom: 14px; }
#business-landing .bl-band-copy { flex: 999 1 460px; min-width: 0; }
#business-landing .bl-band-list { flex: 1 1 320px; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
#business-landing .bl-band-list span { color: #f4f1ea; font-size: 16.5px; }
#business-landing .bl-band-list div { display: flex; gap: 13px; align-items: flex-start; }
#business-landing .bl-band .bl-eyebrow { color: #f9ad48; }

#business-landing .bl-toggle {
    display: inline-flex;
    background: var(--ds-surface, #fff);
    border: 1px solid var(--ds-border, #ebe8e1);
    border-radius: 10px;
    padding: 4px;
    margin-bottom: 34px;
}
#business-landing .bl-toggle button {
    border: 0;
    cursor: pointer;
    font-family: inherit;
    font-size: 15.5px;
    font-weight: 600;
    padding: 10px 22px;
    border-radius: 7px;
    background: transparent;
    color: var(--ds-text-2, #56534c);
}
#business-landing .bl-toggle button[aria-pressed="true"] { background: var(--ds-text, #211f1c); color: #fff; }

#business-landing .bl-plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(262px, 1fr)); gap: 20px; align-items: stretch; }

#business-landing .bl-plan {
    background: var(--ds-surface, #fff);
    border: 1px solid var(--ds-border, #ebe8e1);
    border-radius: 13px;
    padding: 26px;
    display: flex;
    flex-direction: column;
}
#business-landing .bl-plan.is-featured { border: 2px solid var(--bl-deep); }
#business-landing .bl-plan-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
#business-landing .bl-plan h3 { font-size: 19px; font-weight: 700; }
#business-landing .bl-badge {
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--bl-deep);
    background: var(--ds-brand-tint, #fdf1e1);
    padding: 3px 8px;
    border-radius: 20px;
}
#business-landing .bl-who { font-size: 15px; color: #6b675f; margin-bottom: 20px; }
#business-landing .bl-price { display: flex; align-items: baseline; gap: 6px; margin-bottom: 4px; }
#business-landing .bl-price strong { font-size: 38px; font-weight: 800; color: var(--ds-text, #211f1c); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
#business-landing .bl-price span { font-size: 15.5px; color: #6b675f; }
#business-landing .bl-billing { font-size: 14px; color: #6b675f; margin-bottom: 22px; }
#business-landing .bl-feat { list-style: none; margin: 0 0 24px; padding: 0; display: flex; flex-direction: column; gap: 11px; font-size: 15px; flex: 1 0 auto; }
#business-landing .bl-feat li { display: flex; gap: 10px; align-items: flex-start; margin: 0; }
#business-landing .bl-feat svg { flex: none; margin-top: 4px; }
#business-landing .bl-plan .bl-choose {
    display: block;
    text-align: center;
    text-decoration: none;
    padding: 13px 18px;
    border-radius: 8px;
    font-weight: 700;
    font-size: 15.5px;
    background: var(--ds-surface, #fff);
    color: var(--ds-text, #211f1c);
    border: 1.5px solid #cfc9be;
}
#business-landing .bl-plan.is-featured .bl-choose {
    background: var(--bl-btn);
    color: var(--ds-text, #211f1c);
    border-color: var(--bl-btn-edge);
}
#business-landing .bl-plan.is-featured .bl-choose:hover { background: var(--bl-btn-hover); }
#business-landing .bl-note { margin-top: 26px; font-size: 15px; color: #6b675f; }

#business-landing .bl-step-no { font-size: 14px; font-weight: 700; color: var(--bl-deep); margin-bottom: 10px; letter-spacing: .04em; }
#business-landing .bl-faq { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 26px 44px; }
#business-landing .bl-faq h3 { font-size: 18px; font-weight: 700; margin-bottom: 8px; }
#business-landing .bl-faq p { font-size: 16px; }

#business-landing .bl-close .bl-wrap { padding-top: 70px; padding-bottom: 84px; }
#business-landing .bl-close-inner {
    background: var(--ds-brand-tint, #fdf1e1);
    border: 1px solid #f9dbb7;
    border-radius: 16px;
    padding: 52px;
    text-align: center;
}
#business-landing .bl-close-inner h2 { font-size: 32px; margin-bottom: 14px; }
#business-landing .bl-close-inner p { margin: 0 auto 28px; font-size: 18px; max-width: 34em; }
#business-landing .bl-close-inner .bl-actions { justify-content: center; }

@media (max-width: 640px) {
    #business-landing .bl-hero h1 { font-size: 38px; }
    #business-landing .bl-section h2 { font-size: 28px; }
    #business-landing .bl-band-inner,
    #business-landing .bl-close-inner { padding: 32px 24px; }
}

#business-landing .bl-quotes { position: relative; }
#business-landing .bl-slide { display: none; }
#business-landing .bl-slide.is-current { display: grid; }

#business-landing .bl-dots {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 22px;
}
#business-landing .bl-dots button {
    width: 9px;
    height: 9px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #cfc9be;
    cursor: pointer;
    transition: background .15s ease;
}
#business-landing .bl-dots button[aria-selected="true"] { background: var(--bl-deep); }
#business-landing .bl-dots button:focus-visible {
    outline: 2px solid var(--bl-deep);
    outline-offset: 3px;
}

#business-landing .bl-save {
    margin-left: 8px;
    padding: 2px 7px;
    border-radius: 999px;
    background: var(--bl-btn);
    color: var(--ds-text, #211f1c);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .01em;
}
#business-landing #bl-annual[aria-pressed="true"] .bl-save {
    background: #fff;
    color: var(--ds-text, #211f1c);
}

#business-landing .bl-plan .bl-saving {
    display: block;
    margin: 0 0 6px;
    color: var(--bl-deep);
    font-size: 15.5px;
    font-weight: 700;
    white-space: nowrap;
}
#business-landing .bl-plan .bl-saving:empty { display: none; }

#business-landing .bl-mark { color: var(--bl-deep); font-weight: 700; }

#business-landing #apps .bl-actions { margin-top: 30px; justify-content: center; }

#business-landing .bl-ico { font-size: .95em; color: var(--bl-deep); margin-left: 8px; }

#business-landing .bl-industry { font-size: 19px; margin-bottom: 10px; }
#business-landing .bl-cycle { position: relative; display: inline-block; vertical-align: bottom; overflow: hidden; }
#business-landing .bl-cycle-sizer { visibility: hidden; }
#business-landing .bl-cycle-word {
    position: absolute;
    left: 0;
    top: 0;
    white-space: nowrap;
    transition: transform .3s ease, opacity .3s ease;
}
#business-landing .bl-cycle-word.is-leaving { transform: translateY(-0.6em); opacity: 0; }
#business-landing .bl-cycle-word.is-entering { transform: translateY(0.6em); opacity: 0; transition: none; }

@media (prefers-reduced-motion: reduce) {
    #business-landing .bl-cycle-word { transition: none; }
}

#business-landing .bl-platforms {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 18px;
}
#business-landing .bl-platform {
    background: var(--ds-surface, #fff);
    border: 1px solid var(--ds-border, #ebe8e1);
    border-radius: 13px;
    padding: 22px 18px;
}
#business-landing .bl-platform-ico { display: block; font-size: 26px; line-height: 1; color: var(--bl-deep); margin-bottom: 14px; }
#business-landing .bl-platform h3 { font-size: 17px; font-weight: 700; margin-bottom: 6px; }
#business-landing .bl-platform p { font-size: 14px; }

@media (max-width: 900px) {
    #business-landing .bl-platforms { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
    #business-landing .bl-platforms { grid-template-columns: 1fr; }
}
