/* Landing, brand pass: the logo's own colours. Deep teal grounds (the logo's square), gold where the logo has its coin
   (the main action, the highlighted words, the marks on dark tiles), white and the app's light teal-grey for reading.
   Flat: borders and solid fills only, no shadows, glows, gradients or decorative rings.
   Loaded after the built landing.css (unlayered, so it wins over the @layer rules). */
.lp {
    --lp-night: #073c43;      /* deep teal: header, hero, trust band, final call */
    --lp-night-2: #0a4a52;    /* a step lighter, for tiles on the deep teal */
    --lp-night-line: #145a63; /* hairlines on the deep teal */
    --lp-foot: #052f35;
    --lp-brand: #0b5c66;      /* the logo's teal */
    --lp-gold: #f4b740;       /* the logo's coin */
    --lp-gold-line: #e8d29e;
    --lp-gold-ink: #8a5a00;   /* gold-family text on white (5.5:1) */
    --lp-ivory: #f0f5f5;      /* the app's page colour: alternate sections */
    --lp-line: #e1e8e9;
    --lp-ink: #0e1c21;
    --lp-muted: #5b6c71;      /* 5.5:1 on white, 4.9:1 on the alternate sections */
    --lp-on-night: #c8dfe2;   /* light text on the deep teal */
    --lp-shadow: none;
}

/* ---- buttons: gold is the one main action; no glow ---- */
.lp .lp-btn { border-radius: 0.75rem; letter-spacing: 0.005em; box-shadow: none; }
.lp .lp-btn--primary,
.lp .lp-btn--gold { background: var(--lp-gold); color: var(--lp-night); box-shadow: none; }
.lp .lp-btn--primary:hover,
.lp .lp-btn--gold:hover { background: #f7c65e; box-shadow: none; }
.lp-header .lp-btn--ghost,
.lp-hero .lp-btn--ghost { background: transparent; color: #fff; border: 1px solid rgba(255, 255, 255, 0.3); }
.lp-header .lp-btn--ghost:hover,
.lp-hero .lp-btn--ghost:hover { background: var(--lp-night-2); border-color: rgba(255, 255, 255, 0.55); }

/* ---- header: one deep-teal bar, flush with the hero ---- */
.lp .lp-header { background: var(--lp-night); border-bottom: 1px solid var(--lp-night-line); box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
.lp .lp-header__row { min-height: 4.5rem; }
.lp .lp-nav a { color: var(--lp-on-night); }
.lp .lp-nav a:hover { color: #fff; background: var(--lp-night-2); }
.lp .lp-nav a:focus-visible { outline-color: var(--lp-gold); }
.lp .lp-menu-btn { background: transparent; color: #fff; border-color: rgba(255, 255, 255, 0.3); }
.lp .lp-sheet__panel { box-shadow: none; border-left: 1px solid var(--lp-line); }

/* ---- hero ---- */
.lp .lp-hero { background: var(--lp-night); color: #fff; }
.lp .lp-hero::before { display: none; }
.lp .lp-hero__grid { padding-block: 4rem 6.5rem; }
@media (min-width: 900px) { .lp .lp-hero__grid { padding-block: 5.5rem 8rem; } }
.lp .lp-pill { background: var(--lp-night-2); border-color: rgba(244, 183, 64, 0.45); color: #f6d58f; letter-spacing: 0.01em; }
.lp .lp-pill::before { box-shadow: none; outline: 3px solid rgba(244, 183, 64, 0.22); }
.lp .lp-hero__title { color: #fff; font-size: clamp(2.1rem, 4.3vw, 3.4rem); line-height: 1.2; letter-spacing: -0.005em; }
.lp .lp-nw { white-space: nowrap; }
.lp .lp-hero__title mark { background: none; color: var(--lp-gold); padding-inline: 0; }
.lp .lp-hero__lead { color: var(--lp-on-night); }
.lp .lp-hero .lp-hero__note { color: var(--lp-on-night); }
.lp .lp-hero .lp-hero__note a { color: #f6d58f; }
.lp .lp-hero__facts { border-top: 1px solid var(--lp-night-line); }
.lp .lp-hero__facts li { color: #e6f0f1; font-weight: 500; }
.lp .lp-hero .lp-check { background: var(--lp-night-2); border: 1px solid var(--lp-night-line); color: var(--lp-gold); }
/* the phone stands on its own: no halo, no drop shadow */
.lp .lp-hero__visual { isolation: isolate; }
.lp .lp-hero__visual::before { display: none; }
.lp .lp-hero__visual .bk-phone,
.lp-hero__visual .bk-phone { filter: none; }
.lp .bk-phone-frame { background: #0b1f23; box-shadow: none; border: 1px solid rgba(255, 255, 255, 0.14); }
.lp .lp-float { border: 1px solid var(--lp-line); box-shadow: none; }

/* ---- highlights: a white strip resting on the hero edge ---- */
.lp .lp-highlights { margin-top: -3.5rem; }
.lp .lp-highlights__grid { border-color: var(--lp-line); box-shadow: none; }
.lp .lp-highlight { border-color: var(--lp-line); }
@media (min-width: 900px) { .lp .lp-highlight { padding: 1.6rem 1.5rem; } }

/* ---- icons: the logo in miniature, a deep-teal tile with a gold mark ---- */
.lp .lp-icon,
.lp .lp-icon--gold { background: var(--lp-brand); color: var(--lp-gold); border-radius: 0.85rem; box-shadow: none; }
.lp .lp-icon--solid { background: var(--lp-gold); color: var(--lp-night); }

/* ---- sections: white and the app's light teal-grey, one after the other ---- */
.lp .lp-section--soft { background: var(--lp-ivory); }
.lp .lp-kicker { display: inline-flex; align-items: center; gap: 0.6rem; color: var(--lp-gold-ink); font-size: 0.875rem; letter-spacing: 0.02em; }
.lp .lp-kicker::before { content: ''; width: 1.5rem; height: 2px; border-radius: 2px; background: var(--lp-gold); }
.lp .lp-head:not(.lp-head--left) .lp-kicker::after { content: ''; width: 1.5rem; height: 2px; border-radius: 2px; background: var(--lp-gold); }
.lp .lp-title { color: var(--lp-night); font-size: clamp(1.85rem, 3.6vw, 2.75rem); line-height: 1.25; letter-spacing: -0.005em; }
.lp .lp-lead { color: var(--lp-muted); }
/* on the deep teal, light text */
.lp .lp-trust .lp-lead,
.lp .lp-cta .lp-lead,
.lp .lp-trust .lp-head p:not(.lp-kicker) { color: var(--lp-on-night); }
.lp .lp-trust__card h3 { color: #fff; }

/* ---- before / after: grey paper against the brand card ---- */
.lp .lp-compare__card--paper { background: #fff; border: 1px dashed #c9d3d6; }
.lp .lp-compare__card--app { background: var(--lp-night); border: 1px solid var(--lp-night-line); box-shadow: none; }
.lp .lp-compare__arrow { background: #fff; color: var(--lp-night); border: 1px solid var(--lp-line); box-shadow: none; }

/* ---- steps ---- */
.lp .lp-steps::before { border-top: 1px dashed var(--lp-gold-line); }
.lp .lp-step__num { background: var(--lp-brand); border: 1px solid var(--lp-gold-line); color: var(--lp-gold); box-shadow: none; outline: 8px solid var(--lp-ivory); }
@media (max-width: 899px) { .lp .lp-step { border-color: var(--lp-line); } }

/* ---- spotlight pictures: solid panels in the brand tint ---- */
.lp .lp-spot__visual { background: #e3eff0; border-color: #d3e6e8; border-radius: 2rem; }
.lp .lp-spot__visual--wa { background: #e8f4ec; border-color: #cfe8d8; }
.lp .lp-channel,
.lp .lp-tool,
.lp .lp-faq__item { border-color: var(--lp-line); box-shadow: none; }

/* ---- tools ---- */
.lp .lp-tool { padding: 1.6rem; }
.lp .lp-tool:hover { border-color: var(--lp-gold-line); box-shadow: none; transform: none; }

/* ---- trust band + final call: the deep teal again, gold marks ---- */
.lp .lp-trust { background: var(--lp-night); }
.lp .lp-trust::after,
.lp .lp-cta::before { display: none; }
.lp .lp-trust__card { background: var(--lp-night-2); border-color: var(--lp-night-line); box-shadow: none; }
.lp .lp-trust__card p { color: var(--lp-on-night); }
.lp .lp-trust__card .lp-icon { background: var(--lp-night); border: 1px solid var(--lp-night-line); color: var(--lp-gold); }
.lp .lp-cta { background: var(--lp-brand); border: 1px solid rgba(244, 183, 64, 0.35); box-shadow: none; }
.lp .lp-cta h2 { color: #fff; }
.lp .lp-cta p { color: var(--lp-on-night); }

/* ---- pricing ---- */
.lp .lp-plan--featured { border: 2px solid var(--lp-gold); box-shadow: none; }

/* ---- FAQ ---- */
.lp .lp-faq__item.is-open { border-color: var(--lp-gold-line); box-shadow: none; }
.lp .lp-faq__item.is-open .lp-faq__sign { background: var(--lp-brand); color: var(--lp-gold); }
.lp .lp-faq__sign { background: var(--lp-ivory); color: var(--lp-night); }
.lp .lp-faq__help { background: #fdf5e2; border-color: var(--lp-gold-line); }

/* ---- footer ---- */
.lp .lp-footer { background: var(--lp-foot); }

.lp .lp-trust .lp-title,
.lp .lp-cta h2 { color: #fff; }
.lp .lp-trust .lp-kicker { color: var(--lp-gold); }

/* ---- the phone pictures: the app as it looks today (teal card with the gold ৳, brand-tint tiles, gold নতুন) ---- */
.lp .bk-pm-hero { background: var(--lp-brand); }
.lp .bk-pm-hero strong em { color: var(--lp-gold); opacity: 1; }
.lp .bk-pm-hero-row > div { background: #084a53; border: 1px solid #0a5059; }
.lp .bk-pm-hero-row b.is-green { color: #fff; }
.lp .bk-pm-actions > span { border-color: var(--lp-line); }
.lp .bk-pm-actions > span:not(.is-sale) i,
.lp .bk-pm-actions .is-baki i,
.lp .bk-pm-actions .is-joma i { background: #e3eff0; color: var(--lp-brand); }
.lp .bk-pm-grid3 .is-primary { border-color: #d3e6e8; background: #e3eff0; }
.lp .bk-pm-grid3 b.is-green { color: #127a3e; }
.lp .bk-pm-grid3 b.is-amber { color: #b42318; }
.lp .bk-pm-tx-ico.is-due { background: #fbedeb; color: #b42318; }
.lp .bk-pm-tx-ico.is-joma { background: #e8f4ec; color: #127a3e; }
.lp .bk-pm-tab.is-active { color: var(--lp-brand); }
.lp .bk-pm-tab.is-active i { background: none; color: var(--lp-brand); }
.lp .bk-pm-nav .bk-pm-tab:nth-child(3) i { background: var(--lp-gold); color: var(--lp-night); border-radius: 0.6em; }
.lp .bk-pm-submit,
.lp .bk-pm-chips .is-on { box-shadow: none; }