/* ============================================================
   CAPACITY-ARABIC LANDING - tt_css/brand.css
   Brand palette: orange #f69001 and black #111111, taken from
   the Capacity logo (black arc + orange check).
   Layout classes are single-property; application classes are
   prefixed with b_.
   ============================================================ */
/* ---- Category: background colours ---- */
.b_bg1 { background-color: #f69001; }
.b_bg_deep { background-color: #111111; }
.b_bg_dark { background-color: #1a1a1a; }
.b_bg_tint { background-color: #fff4e5; }
.b_bg10 { background-color: #ffffff; }
.b_bg_w06 { background-color: rgba(255, 255, 255, 0.06); }
.b_bg_w10 { background-color: rgba(255, 255, 255, 0.1); }
.b_brd1_w18 { border: 1px solid rgba(255, 255, 255, 0.18); }
.b_p0 { padding: 0; }
/* ---- Category: text colours ---- */
.b_fc2 { color: #ffffff; }
.b_fc7 { color: #f69001; }
.b_fc_ink { color: #211a10; }
.b_fc_body { color: #5d5040; }
.b_fc_muted { color: #8a7a66; }
.b_fc_nav { color: #6b5b45; }
.b_fc_footer { color: #d8c3a5; }
.b_fc_tint { color: #ffe3b8; }
/* ---- Category: base element helpers ---- */
.b_scroll_smooth { scroll-behavior: smooth; }
.b_font_inter {
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
}
.b_bg_page { background-color: #f7f4ef; }
.b_lh1p6 { line-height: 1.6; }
.b_lh1p45 { line-height: 1.45; }
.b_undn { text-decoration: none; }
.b_fcinherit { color: inherit; }
.b_lsn { list-style: none; }
/* ---- Category: container ---- */
.b_wmin1160 { width: min(1160px, 92%); }
.b_mauto { margin: auto; }
/* ---- Category: header and navigation ---- */
.b_hdr { background-color: #ffffff; border-bottom: 1px solid #f2e6d8; position: relative; }
.b_navtoggle { display: none; width: 40px; height: 40px; border: 0; background-color: transparent; padding: 0; align-items: center; justify-content: center; cursor: pointer; }
.b_navtoggle svg { width: 22px; height: 22px; }
.b_h82 { height: 82px; }
.b_justsb { justify-content: space-between; }
.b_gap9 { gap: 9px; }
.b_gap10 { gap: 10px; }
.b_gap12 { gap: 12px; }
.b_gap18 { gap: 18px; }
.b_gap22 { gap: 22px; }
.b_gap26 { gap: 26px; }
.b_gap28 { gap: 28px; }
.b_gap30 { gap: 30px; }
.b_gap65 { gap: 65px; }
.b_fw800 { font-weight: 800; }
.b_fw900 { font-weight: 900; }
.b_ls08em { letter-spacing: 0.08em; }
.b_ls15em { letter-spacing: 0.15em; }
.b_ls16em { letter-spacing: 0.16em; }
.b_ttup { text-transform: uppercase; }
.b_logo { width: 40px; }
.b_w40 { width: 40px; }
.b_w50 { width: 50px; }
.b_brandtxt { line-height: 1.25; }
.b_fs11 { font-size: 11px; }
.b_fs12 { font-size: 12px; }
.b_fs13 { font-size: 13px; }
.b_fs14 { font-size: 14px; }
.b_fs17 { font-size: 17px; }
.b_fs18 { font-size: 18px; }
.b_fs19 { font-size: 19px; }
.b_fs20 { font-size: 20px; }
.b_fs40 { font-size: 40px; }
/* ---- Category: buttons ---- */
.b_dispinlinefx { display: inline-flex; }
.b_trs2 { transition: 0.2s; }
.b_p11x18 { padding: 11px 18px; }
.b_p15x24 { padding: 15px 24px; }
.b_shd_btn { box-shadow: 0 12px 35px rgba(246, 144, 1, 0.18); }
.b_bgtrans { background-color: transparent; }
.b_brd1_tint { border: 1px solid #e8c99a; }
/* ---- Category: hover states (single property each) ---- */
.b_hov_up:hover { transform: translateY(-2px); }
.b_hov_bgdark:hover { background-color: #d97e00; }
.b_hov_bg2:hover { background-color: #e8c99a; }
.b_hov_bg1:hover { background-color: #f69001; }
.b_hov_fc2:hover { color: #ffffff; }
.b_hov_brd7:hover { color: #f69001; }
/* ---- Category: hero ---- */
.b_p92_0_105 { padding: 92px 0 105px; }
.b_hero {
    background-image: radial-gradient(ellipse at 12% 0%, #fff8ee 0%, transparent 55%),
                      radial-gradient(ellipse at 92% 10%, #fff1dc 0%, transparent 50%);
}
.b_gcol_108_92 { grid-template-columns: 1.08fr 0.92fr; }
.b_eyebrow { letter-spacing: 0.16em; }
.b_w7 { width: 7px; }
.b_h7 { height: 7px; }
.b_brd50 { border-radius: 50%; }
.b_shd_dot { box-shadow: 0 0 0 4px rgba(246, 144, 1, 0.12); }
.b_fsh1 { font-size: 60px; }
.b_lh0p98 { line-height: 0.98; }
.b_ls_n055em { letter-spacing: -0.055em; }
.b_m18_0_25 { margin: 18px 0 25px; }
.b_maxw760 { max-width: 760px; }
.b_maxw700 { max-width: 700px; }
.b_maxw650 { max-width: 650px; }
.b_m0_0_34 { margin: 0 0 34px; }
.b_m10_0_0 { margin: 10px 0 0; }
.b_m12_0_17 { margin: 12px 0 17px; }
.b_m12_0 { margin: 12px 0; }
.b_m22_0_8 { margin: 22px 0 8px; }
.b_m0auto { margin-left: auto; margin-right: auto; }
.b_m0 { margin: 0; }
.b_mt32 { margin-top: 32px; }
.b_mt48 { margin-top: 48px; }
.b_mb22 { margin-bottom: 22px; }
.b_pb78 { padding-bottom: 78px; }
.b_fxwrap { flex-wrap: wrap; }
/* ---- Category: imagery ---- */
.b_img { width: 100%; height: auto; display: block; }
.b_brd24 { border-radius: 24px; }
.b_shd_img { box-shadow: 0 18px 40px rgba(17, 17, 17, 0.14); }
/* ---- Category: content sections ---- */
.b_p100_0 { padding: 100px 0; }
.b_bg_soft { background-color: #fffaf2; }
.b_fsh2 { font-size: 44px; }
.b_lh1p05 { line-height: 1.05; }
.b_ls_n04em { letter-spacing: -0.04em; }
.b_gcol2 { grid-template-columns: 1fr 1fr; }
.b_gcol3 { grid-template-columns: repeat(3, 1fr); }
.b_gcol4 { grid-template-columns: repeat(4, 1fr); }
.b_card { border-radius: 18px; padding: 30px; min-height: 245px; }
.b_icon {
    width: 46px;
    height: 46px;
    border-radius: 13px;
    font-size: 21px;
    font-weight: 900;
    display: grid;
    place-items: center;
    padding: 9px;
}
.b_brd18 { border-radius: 18px; }
.b_brd1_line { border: 1px solid #f2e6d8; }
.b_pl25 { padding-left: 25px; }
.b_fs15 { font-size: 15px; }
/* ---- Category: bullet list ---- */
.b_listli { position: relative; }
/* ---- Category: dark band ---- */
.b_p78_0 { padding: 78px 0; }
.b_bandgrid { display: flex; align-items: center; justify-content: space-between; gap: 30px; }
.b_bandbtn { display: inline-flex; align-items: center; justify-content: center; }
/* ---- Category: footer ---- */
.b_p45_0 { padding: 45px 0; }
.b_brdt_tint { border-top: 1px solid rgba(255, 255, 255, 0.15); }
.b_footergrid { display: flex; justify-content: space-between; gap: 30px; align-items: center; }
.b_footersm { margin-top: 0; }
/* ---- Category: signup form ---- */
.b_form { border-radius: 18px; padding: 34px; }
.b_flabel { display: block; font-weight: 700; font-size: 13px; margin-bottom: 7px; }
.b_input {
    width: 100%;
    height: 46px;
    border: 1px solid #e3d3bd;
    border-radius: 10px;
    padding: 0 13px;
    font-size: 14px;
    background-color: #ffffff;
    color: #211a10;
}
.b_btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    font-weight: 800;
    padding: 14px 24px;
    cursor: pointer;
}
.b_field { margin-bottom: 16px; }
.b_msg { border-radius: 10px; padding: 12px 14px; font-size: 13px; margin-top: 14px; }
.b_msg_ok { background-color: #eaf7ee; color: #1d6b39; }
.b_msg_err { background-color: #fff4e5; color: #f69001; }
/* ---- Category: decorative elements ---- */
.b_listli::before {
    content: "\2713";
    position: absolute;
    left: 0;
    color: #f69001;
    font-weight: 900;
}
/* ---- Category: social links ---- */
.b_social {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.1);
    color: #ffffff;
}
/* ---- Category: terms section ---- */
.b_p24 { padding: 24px; }
/* ============================================================
   CHAT WIDGET
   ============================================================ */
.b_chat_starter {
    position: fixed;
    right: 16px;
    bottom: 16px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background-color: #f69001;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(85, 2, 8, 0.3);
    z-index: 30;
    cursor: pointer;
}
.b_w24 { width: 24px; }
.b_h24 { height: 24px; }
.b_inset0 { inset: 0; }
.b_zi40 { z-index: 40; }
.b_gap8 { gap: 8px; }
.b_p8 { padding: 8px; }
.b_fw400 { font-weight: 400; }
.b_ovfx_auto { overflow-x: auto; }
.b_wsn { white-space: nowrap; }
.b_chat_header {
    padding: 12px 16px;
    background-color: #111111;
    color: #ffffff;
    font-weight: bold;
    font-size: 14px;
}
.b_chat_history {
    flex: 1;
    overflow-y: auto;
    padding: 10px;
}
.b_chat_input_area {
    display: flex;
    padding: 8px;
    border-top: 1px solid #e0e0e0;
}
.b_chat_input {
    flex: 1;
    border: 1px solid #ccc;
    border-radius: 18px;
    padding: 8px 12px;
    font-size: 14px;
    outline: none;
}
.b_chat_send {
    width: 38px;
    height: 38px;
    margin-left: 6px;
    border: none;
    border-radius: 50%;
    background-color: #f69001;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
/* desktop chat panel */
@media (min-width: 769px) {
    .b_inset0 { inset: auto 16px 84px auto; }
    .b_chat_w { width: 320px; }
    .b_chat_h { height: 560px; }
    .b_chat_rd { border-radius: 12px; }
    .b_chat_shd { box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25); }
    .b_chat_ui { font-size: 13px; }
    .b_chat_topbar { padding: 8px 16px; }
    .b_chat_header { font-size: 12px; }
    .b_chat_input { font-size: 12px; }
    .b_chat_send { font-size: 14px; }
    .b_chiprow { font-size: 12px; }
}
/* ============================================================
   RESPONSIVE OVERRIDES
   ============================================================ */
@media (max-width: 850px) {
    .b_navlinks { display: none; }
    .b_p92_0_105 { padding: 65px 0 75px; }
    .b_gcol_108_92 { grid-template-columns: 1fr; }
    .b_gap65 { gap: 35px; }
    .b_gcol3 { grid-template-columns: 1fr; }
    .b_gcol4 { grid-template-columns: 1fr 1fr; }
    .b_gcol2 { grid-template-columns: 1fr; }
    .b_bandgrid { display: block; }
    .b_bandbtn { margin-top: 22px; }
}
@media (max-width: 520px) {
    .b_h82 { height: 70px; }
    .b_brandtxt { display: block; }
    .b_fsh1 { font-size: 42px; }
    .b_p11x18 { padding: 9px 12px; }
    .b_fs19 { font-size: 16px; }
    .b_p100_0 { padding: 72px 0; }
    .b_gcol4 { grid-template-columns: 1fr; }
    .b_fs40 { font-size: 31px; }
    .b_fsh2 { font-size: 33px; }
    .b_footergrid { display: block; }
    .b_footersm { margin-top: 18px; }
}
/* ============================================================
   ARABIC PRODUCT SECTIONS (90-day landing)
   ============================================================ */
.b_m0_0_18 { margin: 0 0 18px; }
.b_mt22 { margin-top: 22px; }
.b_brd18 { border-radius: 18px; }

/* ---- three pillars ---- */
.b_pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.b_pillar { border-top: 2px solid #f69001; padding-top: 18px; }
.b_pillar_icon { width: 34px; height: 34px; color: #f69001; margin-bottom: 10px; }
.b_pillar_icon svg { width: 100%; height: 100%; }
.b_pillar_title { margin: 0 0 6px; font-size: 19px; color: #211a10; }
.b_pillar_text { margin: 0; font-size: 14px; color: #5d5040; line-height: 1.55; }

/* ---- how it works ---- */
.b_how { display: grid; gap: 18px; margin-top: 40px; }
.b_how_step { display: grid; grid-template-columns: 52px 1fr 250px; gap: 18px; align-items: center; background-color: #ffffff; border: 1px solid #f2e6d8; border-radius: 18px; padding: 20px; }
.b_how_body { min-width: 0; }
.b_how_num { width: 40px; height: 40px; border-radius: 50%; background-color: #f69001; color: #ffffff; display: flex; align-items: center; justify-content: center; font-weight: 900; font-size: 16px; }
.b_how_title { margin: 0 0 6px; font-size: 20px; color: #211a10; }
.b_how_time { display: block; font-size: 12px; font-weight: 400; color: #8a7a66; margin-top: 2px; }
.b_how_text { margin: 0 0 8px; font-size: 14px; color: #5d5040; line-height: 1.55; }
.b_badge_soft { display: inline-block; background-color: #fff1dc; color: #a56500; border-radius: 999px; padding: 4px 10px; font-size: 11px; font-weight: 700; }
.b_example { background-color: #fff7ec; border: 1px solid #ffe3b8; border-radius: 14px; padding: 14px; text-align: center; }
.b_example_ar { font-size: 26px; color: #211a10; direction: rtl; line-height: 1.6; }
.b_example_amts { font-size: 14px; color: #a56500; margin-top: 2px; }
.b_example_en { font-size: 13px; color: #5d5040; margin: 2px 0 8px; }

/* ---- speak buttons ---- */
.b_say { width: 36px; height: 36px; border: 0; border-radius: 50%; background-color: #111111; color: #ffffff; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; font-size: 12px; line-height: 1; padding: 0; }
.b_say:hover { background-color: #f69001; }
.b_say:focus-visible { outline: 3px solid #ffe3b8; outline-offset: 2px; }
.b_say svg { width: 18px; height: 18px; }
.b_say.b_speaking { background-color: #f69001; animation: b_pulse 0.9s ease-in-out infinite; }
@keyframes b_pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(246, 144, 1, 0.45); } 50% { box-shadow: 0 0 0 9px rgba(246, 144, 1, 0); } }
.b_voice_note { font-size: 12px; color: #8a7a66; margin-top: 12px; }
.b_note { background-color: #fff7ec; border-left: 4px solid #f69001; border-radius: 10px; padding: 14px 16px; font-size: 14px; color: #5d5040; line-height: 1.55; margin-top: 26px; }
.b_note_dark { background-color: rgba(255, 255, 255, 0.06); border-left-color: #f69001; color: #e8dccb; }

/* ---- phone mockups ---- */
.b_phone_wrap { display: flex; justify-content: center; }
.b_phone { width: 286px; background-color: #111111; border-radius: 38px; padding: 12px; box-shadow: 0 24px 60px rgba(17, 17, 17, 0.2); }
.b_phone_screen { background-color: #fffaf2; border-radius: 28px; padding: 16px; min-height: 400px; text-align: left; }
.b_phone_flow { width: 100%; max-width: 286px; margin: 0 auto; }
.b_phone_top { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 11px; color: #8a7a66; margin-bottom: 14px; }
.b_phone_prompt { text-align: center; font-size: 13px; color: #8a7a66; margin-bottom: 6px; }
.b_screen_label { margin-top: 14px; font-size: 13px; font-weight: 700; color: #211a10; }
.b_progress { height: 6px; background-color: #f1e6d6; border-radius: 3px; margin-top: 14px; overflow: hidden; }
.b_progress_fill { height: 6px; width: 38%; background-color: #f69001; }
.b_progress_38 { width: 38%; }
.b_caption { font-size: 12px; color: #8a7a66; text-align: center; margin-top: 10px; }
.b_weekcard { padding: 26px; }

/* ---- first words ---- */
.b_wordgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 36px; }
.b_word { background-color: #ffffff; border: 1px solid #f2e6d8; border-radius: 16px; padding: 16px; display: flex; flex-direction: column; gap: 5px; }
.b_word_head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.b_word_ar { font-size: 23px; color: #211a10; direction: rtl; line-height: 1.6; }
.b_word_amts { font-size: 13px; color: #a56500; }
.b_word_en { font-size: 13px; color: #5d5040; }
.b_wordrow { display: flex; align-items: center; justify-content: space-between; gap: 8px; border-top: 1px solid #f7eee2; padding: 10px 0; font-size: 13px; color: #211a10; }
.b_wordrow .b_word_amts { font-size: 12px; }
.b_wordrow .b_word_en { font-size: 11px; text-align: right; }
.b_wordcard { background-color: #ffffff; border: 1px solid #f2e6d8; border-radius: 18px; padding: 18px; text-align: center; }
.b_wordcard .b_word_ar { font-size: 28px; }
.b_wordcard .b_word_amts { font-size: 14px; margin-top: 2px; }
.b_wordcard .b_word_en { font-size: 13px; margin: 2px 0 8px; }

/* ---- 90-day roadmap and goals ---- */
.b_goal_grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 36px; }
.b_goal { border-radius: 18px; padding: 26px; }
.b_goal_yes { background-color: #f2fbf4; border: 1px solid #cfe9d6; }
.b_goal_no { background-color: #fff4e5; border: 1px solid #ffe3b8; }
.b_goal_title { margin: 0 0 12px; font-size: 20px; color: #211a10; }
.b_goal_list { margin: 0; padding: 0; list-style: none; }
.b_goal_list li { position: relative; padding-left: 20px; margin: 8px 0; font-size: 14px; color: #5d5040; line-height: 1.5; }
.b_goal_list li::before { content: ""; position: absolute; left: 0; top: 8px; width: 7px; height: 7px; border-radius: 50%; background-color: #f69001; }
.b_goal_note { margin: 14px 0 0; font-size: 13px; color: #6b5b45; line-height: 1.5; }
.b_road { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 36px; }
.b_road_phase { background-color: #ffffff; border: 1px solid #f2e6d8; border-radius: 18px; padding: 22px; }
.b_road_days { font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: #f69001; font-weight: 900; }
.b_road_title { margin: 6px 0 0; font-size: 20px; color: #211a10; }
.b_road_list { margin: 12px 0 0; padding: 0; list-style: none; }
.b_road_list li { position: relative; padding-left: 20px; margin: 8px 0; font-size: 14px; color: #5d5040; line-height: 1.5; }
.b_road_list li::before { content: ""; position: absolute; left: 0; top: 8px; width: 7px; height: 7px; border-radius: 50%; background-color: #f69001; }

/* ---- conversation mock ---- */
.b_mock_chat { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.b_mock_bubble { background-color: #ffffff; border: 1px solid #f2e6d8; border-radius: 14px 14px 14px 2px; padding: 8px 10px; font-size: 13px; max-width: 90%; color: #211a10; direction: rtl; text-align: right; }
.b_mock_bubble_me { align-self: flex-end; background-color: #f69001; border-color: #f69001; color: #ffffff; border-radius: 14px 14px 2px 14px; }
.b_mock_row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.b_mock_chip { background-color: #fff7ec; border: 1px solid #ffe3b8; color: #a56500; border-radius: 999px; padding: 4px 10px; font-size: 11px; }
.b_mic { width: 86px; height: 86px; border-radius: 50%; background-color: #f69001; color: #ffffff; display: flex; align-items: center; justify-content: center; margin: 18px auto; box-shadow: 0 0 0 10px #fff1dc; }
.b_mic svg { width: 34px; height: 34px; }

/* ---- responsive for the new sections ---- */
@media (max-width: 850px) {
    .b_pillars { grid-template-columns: 1fr; }
    .b_how_step { grid-template-columns: 44px 1fr; }
    .b_example { grid-column: 1 / -1; }
    .b_wordgrid { grid-template-columns: 1fr 1fr; }
    .b_road { grid-template-columns: 1fr; }
    .b_goal_grid { grid-template-columns: 1fr; }
    .b_phone_screen { min-height: 0; }
}
@media (max-width: 520px) {
    .b_wordgrid { grid-template-columns: 1fr; }
    .b_word_ar { font-size: 21px; }
}

/* ============================================================
   EXACT APP CHAT SCREENS (Day 1 greetings)
   The screen keeps the app's own 412:915 viewport ratio and uses
   the app's chat classes, scaled to the phone width.
   ============================================================ */
.b_appframe { width: 100%; max-width: 322px; margin: 0 auto; padding: 10px; background-color: #111111; border-radius: 38px; box-shadow: 0 24px 60px rgba(17, 17, 17, 0.22); }
.b_appscreen { position: relative; display: flex; flex-direction: column; width: 100%; aspect-ratio: 412 / 915; overflow: hidden; background-color: #f1f1f1; border-radius: 28px; text-align: left; }
.b_app_titlebar { flex: 0 0 50px; display: flex; align-items: center; background-color: #ffffff; border-bottom: 1px solid #e4e4e4; }
.b_app_menu { width: 15%; height: 100%; display: flex; align-items: center; justify-content: center; }
.b_app_menu svg { width: 18px; height: 18px; }
.b_app_title { width: 70%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; letter-spacing: 0.06em; color: #333333; }
.b_app_close { width: 15%; height: 100%; display: flex; align-items: center; justify-content: center; }
.b_app_close svg { width: 16px; height: 16px; }
.b_app_page { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.b_app_spacer { flex: 0 0 30px; }
.b_app_history { flex: 1 1 auto; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; justify-content: flex-start; padding: 4px 8px 2px; }
.b_app_day { display: flex; align-items: center; gap: 6px; margin: 3px 0 6px; font-size: 9px; color: #8a7a66; }
.b_app_day::before, .b_app_day::after { content: ""; flex: 1; height: 1px; background-color: #e0d5c5; }
.b_app_status { flex: 0 0 auto; min-height: 14px; padding: 1px 0; text-align: center; font-size: 10px; color: #ae5c5c; }
.b_app_sugg { flex: 0 0 auto; display: flex; align-items: center; gap: 5px; overflow-x: auto; padding: 4px 6px; border-top: 1px solid #e0e0e0; background-color: #ffffff; scrollbar-width: none; }
.b_app_sugg::-webkit-scrollbar { display: none; }
.b_app_inputrow { flex: 0 0 38px; display: flex; gap: 3px; padding: 3px; background-color: #ffffff; }
.b_app_input { flex: 1 1 auto; display: flex; align-items: center; padding: 3px 6px; border: 1px solid #cccccc; border-radius: 6px; font-size: 12px; color: #8a8a8a; background-color: #ffffff; }
.b_app_miccell { flex: 0 0 14%; }
.b_app_send { flex: 0 0 14%; display: flex; align-items: center; justify-content: center; background-color: #425451; color: #ffffff; border-radius: 5px; font-size: 14px; }
.b_app_caption { margin-top: 12px; font-size: 13px; font-weight: 700; color: #211a10; }
.b_app_sub { margin-top: 3px; font-size: 12px; color: #8a7a66; line-height: 1.45; }
.b_app_tapnote { margin-top: 10px; font-size: 11px; color: #8a7a66; text-align: center; }
.b_appframe_hero .b_appscreen { aspect-ratio: 412 / 732; }
.b_app_safe { flex: 0 0 24px; background-color: #f1f1f1; }
.b_appscreen .b_app_history { scrollbar-width: none; -ms-overflow-style: none; }
.b_appscreen .b_app_history::-webkit-scrollbar { width: 0; height: 0; display: none; }

/* ---- the app's chat rows, scoped to the screen ---- */
.b_appscreen .k_chatline { float: none; clear: both; width: 100%; margin: 0; padding: 2px 0; }
.b_appscreen .k_sysbot,
.b_appscreen .k_userbot { position: relative; float: none; display: block; width: fit-content; max-width: 85%; padding: 11px 13px; border: 1px solid #d9cbb8; border-radius: 10px; white-space: normal; font-size: 12px; line-height: 1.35; color: #000000; }
.b_appscreen .k_sysbot.b_app_has_say,
.b_appscreen .k_userbot.b_app_has_say { padding-bottom: 24px; }
.b_appscreen .k_sysbot { background-color: #f1f1f1; border-radius: 0 10px 10px 10px; margin-right: auto; }
.b_appscreen .k_userbot { background-color: rgb(250, 226, 181); border-color: #e6cfa4; border-radius: 10px 0 10px 10px; margin-left: auto; }
.b_app_say { position: absolute; right: 5px; bottom: 3px; width: 20px; height: 20px; border: 0; border-radius: 50%; background-color: transparent; color: #8a7a66; display: flex; align-items: center; justify-content: center; padding: 0; cursor: pointer; }
.b_appscreen .k_userbot .b_app_say { right: auto; left: 5px; }
.b_app_say svg { width: 12px; height: 12px; }
.b_app_say:hover { color: #f69001; }
.b_app_say.b_app_speaking { color: #2e8b57; }
.b_appscreen .b_ar_script { margin: 0; font-size: 19px; font-weight: 700; line-height: 1.5; color: #111111; direction: rtl; }
.b_appscreen .b_ar_arabizi { margin: 1px 0 0; font-size: 13px; font-weight: 700; color: #333333; }
.b_appscreen .b_ar_eng { margin: 1px 0 0; font-size: 12px; font-style: italic; color: #333333; }
.b_appscreen .k_userbot .b_ar_script { font-size: 16px; }
.b_appscreen .k_sysbot.b_app_playing,
.b_appscreen .k_userbot.b_app_playing { outline: 2px solid #f69001; outline-offset: 1px; background-color: #fff7ec; }

/* ---- suggestions (app chip look) ---- */
.b_appscreen .ct_sugg_chip { flex: 0 0 auto; padding: 4px 8px; border: 1px solid #c9c9c9; border-radius: 16px; background-color: #f4f4f4; white-space: nowrap; font-size: 11px; color: #333333; cursor: pointer; }
.b_appscreen .ct_sugg_chip:active { background-color: #e0e0e0; }
.b_appscreen .ct_sugg_chip.b_app_playing { background-color: #f69001; border-color: #f69001; color: #ffffff; }

/* ---- mic + status ---- */
.b_appscreen .b_ar_mic { width: 100%; height: 100%; border: 0; border-radius: 5px; background-color: #888888; color: #ffffff; display: flex; align-items: center; justify-content: center; padding: 0; }
.b_appscreen .b_ar_mic_idle { background-color: #888888; }
.b_appscreen .b_ar_mic_rec { background-color: #2e8b57; }
.b_appscreen .b_ar_mic_speak { background-color: #888888; }
.b_appscreen .b_ar_mic_icon { width: 58%; height: 58%; display: block; }
.b_appscreen .b_ar_status { width: 100%; min-height: 14px; padding: 1px 0; text-align: center; font-size: 10px; color: #ae5c5c; }

/* ---- phone stage ---- */
.b_appstage { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 40px; text-align: center; }
.b_appstage .b_appframe { margin: 0 auto; }
@media (max-width: 850px) {
    .b_appstage { grid-template-columns: 1fr; }
    .b_appframe { max-width: 300px; }
}

/* ============================================================
   AI COMPANION RATIONALE + APP ROWS
   ============================================================ */
.b_why_grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 36px; }
.b_why_card { background-color: #ffffff; border: 1px solid #f2e6d8; border-radius: 18px; padding: 26px; }
.b_why_num { font-size: 12px; font-weight: 900; letter-spacing: 0.12em; color: #f69001; }
.b_why_title { margin: 8px 0 10px; font-size: 20px; line-height: 1.25; color: #211a10; }
.b_why_text { margin: 0; font-size: 14px; line-height: 1.6; color: #5d5040; }
.b_compare { margin-top: 36px; border: 1px solid #f2e6d8; border-radius: 18px; overflow: hidden; }
.b_compare_row { display: grid; grid-template-columns: 1fr 1fr; }
.b_compare_row span { padding: 13px 18px; font-size: 14px; line-height: 1.45; color: #5d5040; border-top: 1px solid #f2e6d8; }
.b_compare_row span:first-child { border-right: 1px solid #f2e6d8; }
.b_compare_head span { background-color: #111111; color: #ffffff; font-weight: 800; border-top: 0; }
.b_compare_head span:first-child { background-color: #f1f1f1; color: #211a10; }

.b_approws { display: grid; gap: 70px; margin-top: 48px; }
.b_approw { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 56px; align-items: center; }
.b_approw_rev { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); }
.b_approw_rev .b_approw_phone { order: 2; }
.b_approw_rev .b_approw_text { order: 1; }
.b_approw_phone { display: flex; flex-direction: column; align-items: center; }
.b_approw_phone .b_app_page { padding-bottom: 24px; }
.b_approw_text { max-width: 560px; }
.b_app_eyebrow { font-size: 11px; font-weight: 900; letter-spacing: 0.15em; text-transform: uppercase; color: #f69001; }
.b_app_h3 { margin: 10px 0 14px; font-size: 34px; line-height: 1.12; letter-spacing: -0.02em; color: #211a10; }
.b_app_body { margin: 0; font-size: 16px; line-height: 1.6; color: #5d5040; }
.b_app_rules { list-style: none; margin: 20px 0 0; padding: 0; }
.b_app_rules li { position: relative; padding-left: 22px; margin: 9px 0; font-size: 14px; line-height: 1.55; color: #5d5040; }
.b_app_rules li::before { content: ""; position: absolute; left: 0; top: 8px; width: 7px; height: 7px; border-radius: 50%; background-color: #f69001; }
.b_app_rules strong { color: #211a10; }
.b_app_note { margin-top: 20px; border-left: 3px solid #f69001; border-radius: 8px; background-color: #fff7ec; padding: 10px 14px; font-size: 13px; line-height: 1.5; color: #6b5b45; }

/* ---- Study reference bubbles inside the app screen ---- */
.b_appscreen .b_ar_bookhead { font-size: 14px; font-weight: 700; color: #111111; }
.b_appscreen .b_ar_refbody { margin-top: 2px; font-size: 12px; line-height: 1.45; color: #333333; }
.b_appscreen .b_cm_say { cursor: pointer; }

/* ---- Vocabulary page ---- */
.b_vocab_page { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 10px 12px; scrollbar-width: none; -ms-overflow-style: none; }
.b_vocab_page::-webkit-scrollbar { width: 0; height: 0; display: none; }
.b_vocab_day { padding-bottom: 6px; margin-bottom: 8px; border-bottom: 1px solid #e0d5c5; font-size: 12px; font-weight: 700; color: #425451; }
.b_vocab_row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 0; border-bottom: 1px solid #f1e6d6; }
.b_vocab_right { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.b_vocab_ar { font-size: 20px; font-weight: 700; line-height: 1.5; color: #111111; direction: rtl; }
.b_vocab_say { width: 28px; height: 28px; border: 0; border-radius: 50%; background-color: #111111; color: #ffffff; display: flex; align-items: center; justify-content: center; padding: 0; cursor: pointer; }
.b_vocab_say svg { width: 14px; height: 14px; }
.b_vocab_say:hover { background-color: #f69001; }
.b_vocab_say.b_app_playing { background-color: #f69001; }
.b_vocab_left { text-align: left; }
.b_vocab_tr { font-size: 13px; font-weight: 700; color: #333333; }
.b_vocab_en { font-size: 11px; color: #666666; }
.b_vocab_foot { margin-top: 10px; text-align: center; font-size: 10px; color: #8a7a66; }

/* ---- Quran coverage stats ---- */
.b_stats { margin-top: 18px; border: 1px solid #f2e6d8; border-radius: 14px; background-color: #ffffff; padding: 16px; }
.b_stats_title { margin-bottom: 10px; font-size: 12px; font-weight: 800; color: #211a10; }
.b_stat { margin: 8px 0; }
.b_stat_top { display: flex; align-items: center; justify-content: space-between; font-size: 12px; color: #5d5040; }
.b_stat_top strong { color: #211a10; }
.b_stat_bar { height: 7px; margin-top: 4px; border-radius: 4px; background-color: #f1e6d6; overflow: hidden; }
.b_stat_fill { display: block; height: 7px; border-radius: 4px; background-color: #f69001; }
.b_stat_w38 { width: 38.5%; }
.b_stat_w52 { width: 52.4%; }
.b_stat_w59 { width: 58.7%; }
.b_stat_w67 { width: 67%; }
.b_stat_w72 { width: 71.8%; }
.b_stat_note { margin-top: 10px; font-size: 11px; line-height: 1.5; color: #8a7a66; }
.b_sources { margin-top: 8px; font-size: 10px; line-height: 1.55; color: #8a7a66; }
.b_sources a { color: #a56500; }

/* ============================================================
   FLOATING CALL BUTTON (next to the chat starter)
   ============================================================ */
.b_call_starter { position: fixed; right: 84px; bottom: 16px; width: 56px; height: 56px; border-radius: 50%; background-color: #f69001; color: #ffffff; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 12px rgba(85, 2, 8, 0.3); z-index: 30; text-decoration: none; }
.b_call_starter svg { width: 24px; height: 24px; }

@media (max-width: 850px) {
    .b_navtoggle { display: flex; }
    .b_hdr_cta { display: none; }
    .b_brandtxt { display: block; }
    .b_navlinks { position: absolute; left: 0; right: 0; top: 100%; z-index: 60; display: none; flex-direction: column; gap: 0; padding: 8px 4%; background-color: #ffffff; border-top: 1px solid #eed9d9; border-bottom: 1px solid #eed9d9; box-shadow: 0 12px 20px rgba(0, 0, 0, 0.08); }
    .b_navlinks.b_navopen { display: flex; }
    .b_navlinks a { padding: 12px 0; border-bottom: 1px solid #f3e3e3; }
    .b_navlinks a:last-child { border-bottom: 0; }
    .b_why_grid { grid-template-columns: 1fr; }
    .b_compare_row { grid-template-columns: 1fr; }
    .b_compare_row span:first-child { border-right: 0; }
    .b_approws { gap: 50px; }
    .b_approw, .b_approw_rev { grid-template-columns: 1fr; gap: 28px; }
    .b_approw_rev .b_approw_phone { order: 1; }
    .b_approw_rev .b_approw_text { order: 2; }
    .b_approw_text { max-width: none; }
    .b_app_h3 { font-size: 28px; }
}

/* ============================================================
   FLUID TYPOGRAPHY
   Sizes are screen-relative (vw) with mobile-safe minimums and
   desktop maximums, so text grows with the screen without
   becoming unreadable on phones or oversized on wide displays.
   ============================================================ */
.k_f1vw { font-size: clamp(11px, 0.9vw, 13px); }
.k_f2vw { font-size: clamp(12px, 1.05vw, 15px); }
.k_f3vw { font-size: clamp(14px, 1.15vw, 17px); }
.k_f4vw { font-size: clamp(24px, 3vw, 44px); }
.k_f5vw { font-size: clamp(48px, 5.2vw, 80px); }
.k_f6vw { font-size: clamp(48px, 6.4vw, 96px); }

.b_fs11 { font-size: clamp(11px, 0.88vw, 13px); }
.b_fs12 { font-size: clamp(12px, 0.96vw, 15px); }
.b_fs13 { font-size: clamp(13px, 1.02vw, 16px); }
.b_fs14 { font-size: clamp(14px, 1.08vw, 17px); }
.b_fs15 { font-size: clamp(15px, 1.14vw, 18px); }
.b_fs17 { font-size: clamp(17px, 1.32vw, 21px); }
.b_fs18 { font-size: clamp(17px, 1.4vw, 23px); }
.b_fs19 { font-size: clamp(18px, 1.58vw, 24px); }
.b_fs20 { font-size: clamp(19px, 1.65vw, 26px); }
.b_fs40 { font-size: clamp(31px, 3.3vw, 50px); }
.b_fsh1 { font-size: clamp(48px, 5.2vw, 80px); }
.b_fsh2 { font-size: clamp(42px, 4.4vw, 60px); }

.b_pillar_title { font-size: clamp(19px, 1.55vw, 26px); }
.b_pillar_text { font-size: clamp(14px, 1.1vw, 17px); }
.b_why_title { font-size: clamp(20px, 1.6vw, 27px); }
.b_why_text { font-size: clamp(14px, 1.1vw, 17px); }
.b_compare_row span { font-size: clamp(14px, 1.1vw, 17px); }
.b_goal_list li { font-size: clamp(14px, 1.1vw, 17px); }
.b_road_list li { font-size: clamp(14px, 1.1vw, 17px); }
.b_goal_title { font-size: clamp(20px, 1.55vw, 26px); }
.b_road_title { font-size: clamp(20px, 1.55vw, 26px); }
.b_app_eyebrow { font-size: clamp(11px, 0.9vw, 13px); }
.b_app_h3 { font-size: clamp(30px, 2.8vw, 46px); }
.b_app_body { font-size: clamp(17px, 1.45vw, 21px); }
.b_app_rules li { font-size: clamp(14px, 1.1vw, 17px); }
.b_app_note { font-size: clamp(13px, 1.05vw, 16px); }
.b_app_caption { font-size: clamp(13px, 1.05vw, 16px); }
.b_app_sub { font-size: clamp(12px, 0.98vw, 15px); }
.b_stats_title { font-size: clamp(12px, 1vw, 15px); }
.b_stat_top { font-size: clamp(12px, 1vw, 15px); }
.b_stat_note { font-size: clamp(11px, 0.95vw, 14px); }
.b_sources { font-size: clamp(10px, 0.9vw, 13px); }

@media (max-width: 520px) {
    .b_fsh1, .k_f5vw { font-size: clamp(40px, 11vw, 48px); }
    .b_fsh2 { font-size: clamp(32px, 8.5vw, 40px); }
    .b_fs40 { font-size: clamp(29px, 8vw, 36px); }
    .b_app_h3 { font-size: clamp(27px, 7.4vw, 34px); }
}

/* ============================================================
   PRICING
   ============================================================ */
.b_pricing { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 22px; margin-top: 42px; align-items: stretch; }
.b_price_main { display: flex; flex-direction: column; align-items: flex-start; background-color: #111111; color: #ffffff; border-radius: 22px; padding: clamp(24px, 3vw, 40px); }
.b_price_label { font-size: clamp(11px, 0.9vw, 13px); font-weight: 900; letter-spacing: 0.15em; text-transform: uppercase; color: #f6dada; }
.b_price_figure { margin: 10px 0 6px; font-size: clamp(64px, 7.2vw, 112px); font-weight: 900; line-height: 0.9; letter-spacing: -0.04em; color: #f69001; }
.b_price_sub { font-size: clamp(18px, 1.5vw, 24px); font-weight: 700; color: #ffffff; }
.b_price_divider { width: 100%; height: 1px; margin: 22px 0; background-color: rgba(255, 255, 255, 0.15); }
.b_price_equiv { display: flex; align-items: baseline; gap: 6px; }
.b_price_equiv_fig { font-size: clamp(32px, 3.4vw, 52px); font-weight: 900; line-height: 1; color: #f69001; }
.b_price_equiv_unit { font-size: clamp(15px, 1.3vw, 20px); color: #e8dccb; }
.b_price_note { margin: 14px 0 22px; font-size: clamp(13px, 1.05vw, 16px); line-height: 1.6; color: #e8dccb; }
.b_price_main .b_btn { margin-top: auto; }
.b_price_side { display: flex; flex-direction: column; gap: 16px; }
.b_price_item { display: flex; align-items: center; gap: 18px; flex: 1; padding: clamp(16px, 2vw, 24px); background-color: #fff7ec; border: 1px solid #f2e6d8; border-radius: 18px; }
.b_price_item_fig { min-width: clamp(70px, 7vw, 105px); font-size: clamp(34px, 3.6vw, 56px); font-weight: 900; line-height: 1; letter-spacing: -0.03em; color: #f69001; }
.b_price_item_title { font-size: clamp(16px, 1.3vw, 20px); font-weight: 800; color: #211a10; }
.b_price_item_text { margin-top: 2px; font-size: clamp(13px, 1.05vw, 16px); line-height: 1.5; color: #5d5040; }
.b_price_factors { margin-top: 28px; }
.b_price_factors_title { margin: 0 0 8px; font-size: clamp(20px, 1.6vw, 27px); font-weight: 800; color: #211a10; }
.b_price_factors .b_app_rules { margin-top: 8px; }

@media (max-width: 850px) {
    .b_pricing { grid-template-columns: 1fr; }
    .b_price_main { padding: 26px; }
    .b_price_item_fig { min-width: 64px; }
}
@media (max-width: 520px) {
    .b_price_figure { font-size: clamp(56px, 18vw, 76px); }
    .b_price_item { gap: 12px; }
}

.b_price_monthly { display: flex; flex-direction: column; align-items: flex-start; background-color: #fff7ec; border: 2px solid #f69001; border-radius: 22px; padding: clamp(24px, 3vw, 40px); }
.b_price_monthly .b_price_label { color: #a56500; }
.b_price_monthly .b_price_figure { display: flex; align-items: baseline; gap: 2px; color: #f69001; }
.b_price_period { font-size: clamp(24px, 3vw, 44px); font-weight: 800; letter-spacing: 0; color: #a56500; }
.b_price_monthly .b_price_sub { color: #211a10; }
.b_price_monthly .b_price_divider { background-color: rgba(33, 26, 16, 0.12); }
.b_price_monthly .b_btn { margin-top: auto; }
.b_price_monthly_list { list-style: none; margin: 0 0 22px; padding: 0; }
.b_price_monthly_list li { position: relative; padding-left: 20px; margin: 8px 0; font-size: clamp(14px, 1.1vw, 17px); line-height: 1.5; color: #5d5040; }
.b_price_monthly_list li::before { content: ""; position: absolute; left: 0; top: 8px; width: 7px; height: 7px; border-radius: 50%; background-color: #f69001; }