/* ============================================================
   BRAND COLOUR PALETTE  (maroon #8e0203 and its derivatives)
   ============================================================ */

/* Background colours */
.b_bg1  { background-color: #8e0203; }
.b_bg2  { background-color: #ddb3b3; }
.b_bg3  { background-color: #fbf5f5; }
.b_bg6  { background-color: #f1f1f1; }
.b_bg7  { background-color: #f5e7e7; }
.b_bg9  { background-color: #f5e7e7; }
.b_bg10 { background-color: #ffffff; }
.b_bg12 { background-color: #f1f1f1; }
.b_fc7     { color: #8e0203; }
.b_fcolor2 { color: #ffffff; }
.b_fcolor4 { color: #ffffff; }
.b_txtgray { color: #888888; }

/* Table row colours */
.b_tr0 { background-color: #f5e7e7; }

/* Chart colours */
.b_color0 { fill: #8e0203; }

/* Border colours */
.b_brdr1 { border: 1px solid #c68181; }

/* Text decoration */
.b_und1 { text-decoration: underline; }

/* Spinner rotation while the lead generator is working */
@keyframes b_spinner_rotate {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* Calendar month header cells */
.b_cal_mh {
    height: 9vw;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Calendar blank day cell (leading blanks) */
.b_cal_blank {
    height: 11vw;
}

/* Calendar day tile (7 columns, Sun..Sat) */
.b_cal_day {
    width: 14.28%;
    height: 11vw;
    float: left;
    text-align: center;
    font-size: 3vw;
    border: 1px solid #eed9d9;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

/* Calendar day circle (selected / today highlight) */
.b_cal_circle {
    width: 9vw;
    height: 9vw;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

/* Today outline around the circle when not selected */
.b_cal_today_outline {
    outline: 2px solid #8e0203;
}

/* Campaign card (dismissal_parent b_student_card style) */
.b_campaign_card {
    width: 100%;
    display: flex;
    align-items: center;
    padding: 12px 8px;
    border-bottom: 1px solid #eed9d9;
    background-color: #ffffff;
    box-sizing: border-box;
    cursor: pointer;
}

.b_campaign_icon {
    width: 56px;
    height: 56px;
    min-width: 56px;
    border-radius: 50%;
    overflow: hidden;
    border: 1px solid #eed9d9;
    background-color: #f5f5f5;
    display: flex;
    align-items: center;
    justify-content: center;
}

.b_campaign_info {
    flex: 1;
    min-width: 0;
    padding: 0 8px;
}

.b_campaign_name {
    font-size: 16px;
    font-weight: 700;
    color: #333;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.b_campaign_detail {
    font-size: 13px;
    color: #888;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.b_campaign_arrow {
    min-width: 24px;
    text-align: center;
    color: #888;
    font-size: 18px;
}

/* Status chips for leads/opportunities */
.b_status_chip {
    display: inline-block;
    border-radius: 8px;
    padding: 2px 8px;
    font-size: 1.2vh;
    font-weight: bold;
}

.b_status_new {
    background-color: #f5f5f5;
    color: #616161;
}

.b_status_qualified {
    background-color: #f5e7e7;
    color: #6b0102;
}

.b_status_lost {
    background-color: #6b0102;
    color: #fff;
}

/* ============================================================
   SALES AGENT HOME DASHBOARD TILES (cardowner-style)
   ============================================================ */

/* BF logo proper colors (cardowner): #8e0203 polygons 1&3, black polygon 2 */
svg[aria-label="Business-Folio"] polygon:nth-child(1),
svg[aria-label="Business-Folio"] polygon:nth-child(3) {
    fill: #8e0203;
    stroke: #8e0203;
}

svg[aria-label="Business-Folio"] polygon:nth-child(2) {
    fill: #2b0101;
    stroke: #2b0101;
}

/* Dashboard tile */
.b_dash_tile {
    position: relative;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}

/* Dashboard badge (counts on tiles) */
.b_dash_badge {
    position: absolute;
    top: 6px;
    right: 6px;
    min-width: 20px;
    height: 20px;
    padding: 0 4px;
    background-color: #6b0102;
    color: #fff;
    border-radius: 50%;
    font-size: 11px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}

/* Profile circle icon */
.b_profile_circle {
    border: 2px solid #eed9d9;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

/* Chat starter button (bottom-right, home only) */
.b_chat_starter {
    position: fixed;
    right: 16px;
    bottom: 16px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background-color: #8e0203;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    z-index: 30;
    cursor: pointer;
}

.b_chat_history {
    flex: 1;
    overflow-y: scroll;
    padding: 10px;
}

.b_chat_input {
    flex: 1;
    border: 1px solid #ddb3b3;
    border-radius: 18px;
    padding: 8px 12px;
    font-size: 14px;
    outline: none;
}

/* Capacity chat suggestion bar - one horizontal line above the input, no scrollbars */
.b_ct_sugg {
  display: flex;
  align-items: center;
  gap: 2vw;
  overflow-x: auto;
  padding: 2vw;
  border-top: 1px solid #eed9d9;
  background: #ffffff;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.b_ct_sugg::-webkit-scrollbar { display: none; }
.b_ct_sugg_chip {
  align-self: center;
  flex: 0 0 auto;
  padding: 6px 14px;
  border: 1px solid #ddb3b3;
  border-radius: 20px;
  background: #f4f4f4;
  white-space: nowrap;
  font-size: 4.5vw;
  color: #333333;
  width: fit-content;
  margin: 0 4vw;
}
.b_ct_sugg_chip:active { background: #e0e0e0; }

/* Spacer inside a chat bubble between a short comment and the next question/summary */
.b_q_gap { height: 14px; }

/* Objective (A/B/C/D) option row inside an assess question bubble */
.b_opt_row { margin: 6px 0; line-height: 1.4; font-size: 4.6vw; }

/* Chat pages: fixed full-screen flex column; ONLY the history area scrolls.
   Shared by every coach/chat page (each carries the .b_ct_chat_page class). */
.b_ct_chat_page {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}
.b_ct_chat_page > .b_chat_history {
  flex: 0 0 auto;
  height: calc(100% - 45vw);
}
.b_ct_chat_page > .b_hist_spc {
  flex: 1 1 auto;
  min-height: 2vw;
}
.b_ct_chat_page > .b_ct_sugg {
  flex: 0 0 auto;
}
.b_ct_chat_page > .w_100p.h_4t1 {
  flex: 0 0 auto;
}

/* Chat bubble sizing/format for Capacity chat pages */
/* Chat pages: each message occupies its own full-width, cleared row */
.b_ct_chat_page .k_chatline {
  width: 100%;
  clear: both;
  margin: 1.5vw 0;
}

.b_ct_chat_page .k_userbot,
.b_ct_chat_page .k_sysbot {
  max-width: 90%;
  box-sizing: border-box;
  line-height: 1.5;
  font-size: 6vw;
  text-align: left;
}
/* grow the framework text helpers inside chat bubbles so lesson/example text is bigger too */
.b_ct_chat_page .k_sysbot .k_f5vw,
.b_ct_chat_page .k_sysbot .k_f6vw { font-size: 6vw; }
.b_ct_chat_page .b_ct_sugg_chip { font-size: 4.6vw; }
.b_ct_chat_page .b_chat_input { font-size: 4.6vw; }


/* Lesson card visuals: AI SVG figure and the "Example:" box inside a chat bubble */
#learn_chat_page .k_sysbot .b_lsn_fig {
  width: 100%;
  margin: 0 0 1.5vw 0;
  background: #ffffff;
  border: 1px solid #eed9d9;
  border-radius: 2vw;
  padding: 2vw;
  box-sizing: border-box;
}
#learn_chat_page .k_sysbot .b_lsn_fig svg {
  display: block;
  width: 100%;
  height: auto;
}
/* gentle entrance so the picture "appears" instead of popping harshly */
@keyframes ct_lsn_pop {
  0%   { opacity: 0; transform: translateY(8px) scale(0.97); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
#learn_chat_page .k_sysbot .b_lsn_fig {
  animation: ct_lsn_pop 0.45s ease-out;
}
#learn_chat_page .k_sysbot .b_lsn_ex {
  margin-top: 1.5vw;
  padding: 1.5vw 2vw;
  background: #fbf5f5;
  border-radius: 2vw;
  color: #333333;
}

/* Learn (processor 140): nested topic > subtopic > skill tree in the resume card.
   The level codes are printed explicitly, so the browser list markers are removed
   and each level is indented instead. */
#learn_chat_page .k_sysbot .b_tree {
  list-style: none;
  margin: 0.6vw 0 0 0;
  padding-left: 0;
}
#learn_chat_page .k_sysbot .b_tree .b_tree {
  margin: 0.5vw 0 0 0;
  padding-left: 5vw;
}
#learn_chat_page .k_sysbot .b_tree li {
  margin: 0.4vw 0;
  line-height: 1.35;
  color: #333333;
}

/* Method/step bullet list inside a lesson bubble */
#learn_chat_page .k_sysbot .b_lsn_list {
  margin: 1vw 0 0 0;
  padding-left: 6vw;
  color: #333333;
}
#learn_chat_page .k_sysbot .b_lsn_list li {
  margin: 0.6vw 0;
}


/* Practice / quick-check countdown timer inside a bubble */
#learn_chat_page .k_sysbot .b_ct_prac_head {
  margin-bottom: 1vw;
}
#learn_chat_page .k_sysbot .b_ct_prac_timer {
  display: inline-block;
  margin-left: 1vw;
  padding: 0 2vw;
  border: 1px solid #ddb3b3;
  border-radius: 2vw;
  background: #fbf5f5;
  font-family: monospace;
  font-weight: bold;
  font-size: 6vw;
  color: #6b0102;
  vertical-align: baseline;
}



/* Practice chat (processor 150): question header, figure, flashcard front and the
   model-steps list of a step-by-step question - same look as the Learn quick-check. */
#practice_chat_page .k_sysbot .b_ct_prac_head {
  margin-bottom: 1vw;
}
#practice_chat_page .k_sysbot .b_lsn_fig {
  width: 100%;
  margin: 0 0 1.5vw 0;
  background: #ffffff;
  border: 1px solid #eed9d9;
  border-radius: 2vw;
  padding: 2vw;
  box-sizing: border-box;
}
#practice_chat_page .k_sysbot .b_lsn_fig svg {
  display: block;
  width: 100%;
  height: auto;
}
/* A flashcard front is boxed so it reads as a card */
#practice_chat_page .k_sysbot .b_flash_card {
  border: 1px solid #ddb3b3;
  border-radius: 2vw;
  padding: 2vw;
  background: #fbf5f5;
}
/* The model solution of a step-by-step question, shown once it is answered */
#practice_chat_page .k_sysbot .b_steps_list {
  margin: 1.5vw 0 0 0;
  padding-left: 6vw;
  color: #333333;
}
#practice_chat_page .k_sysbot .b_steps_list li {
  margin: 0.6vw 0;
}

/* Chat day divider (dashed line - Today - dashed line) */
.b_ct_day {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 4vw;
}
.b_ct_day::before,
.b_ct_day::after {
  content: "";
  flex: 1;
  border-top: 1px dashed #ddb3b3;
}
.b_ct_day span {
  font-size: 3.4vw;
  color: #8a8a8a;
}

/* Progress coach (processor 180): chart bars + insights inside chat bubbles */
.b_prog_row { margin: 5px 0; }
.b_prog_label { font-size: 4vw; line-height: 1.4; }
.b_bar_svg { width: 100%; height: 1.2vh; display: block; margin-top: 2px; }
.b_prog_insight {
  margin-top: 8px;
  padding: 6px 8px;
  border-left: 3px solid #ddb3b3;
  background-color: #fbf5f5;
  border-radius: 4px;
  font-size: 3.8vw;
  line-height: 1.5;
}

/* ============================================================
   MOVED FRAMEWORK BRAND RULES
   Relocated out of ttstyles.css and re-derived from the maroon
   logo colour (#8e0203). Framework k_ utilities renamed to b_.
   ============================================================ */

/* SVG fills (was .k_svgfill1 / .k_svgfill2) */
.b_svgfill1 { fill: #8e0203; }

/* Border colours (was .k_brdrb1) */
.b_brdrb1 { border-bottom: solid #eed9d9 1px; }

/* Business-Folio logo polygons (was the .b_co_logo polygon rules) */
.b_co_logo polygon:nth-child(1),
.b_co_logo polygon:nth-child(3) { fill: #8e0203; stroke: #8e0203; }
.b_co_logo polygon:nth-child(2) { fill: #2b0101; stroke: #2b0101; }

/* App loader (rethemed to the brand) */
.b_tt_loader {
    border: 16px solid #eef2f9;
    border-radius: 50%;
    border-top: 16px solid #e3b62c;
    border-bottom: 16px solid #0f2244;
    width: 120px;
    height: 120px;
    animation: spin 2s linear infinite;
}

/* Table headers (was gold #ccb78f) */
table thead th { background-color: #8e0203; color: #ffffff; }
.b_th { background-color: #8e0203; color: #ffffff; }

/* OTP verification dialog: roomier line height + gap between elements */
.b_dlg_otp {
    gap: 2.5vw;
    line-height: 1.6;
}

/* ============================================================
   VOICE AGENT — full-screen company dialer
   Light background (#f1f1f1). --va-brand is set by the company
   va_config command (gold is the default).
   ============================================================ */
:root { --va-brand: #e3b62c; }
.b_va_page {
    background-color: #f1f1f1;
    overflow: hidden;
}
.b_va_frame {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    padding: clamp(14px, 3vh, 28px) clamp(14px, 4vw, 28px) clamp(10px, 2vh, 20px);
}
.b_va_top {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.b_va_logo { display: block; margin: 0 auto; object-fit: contain; }
.b_va_close {
    position: absolute;
    top: clamp(8px, 1.2vh, 16px);
    right: clamp(12px, 4vw, 24px);
    z-index: 5;
    font-size: clamp(22px, 6vw, 34px);
    line-height: 1;
    color: #888888;
    cursor: pointer;
}
.b_va_name {
    font-size: clamp(16px, 4.4vw, 22px);
    font-weight: 700;
    color: #1a1a1a;
    margin-top: clamp(8px, 1.5vh, 14px);
    text-align: center;
}
.b_va_timer {
    font-size: clamp(24px, 6vw, 40px);
    font-weight: 600;
    letter-spacing: 0.06em;
    color: #1a1a1a;
    margin-top: clamp(4px, 0.5vh, 8px);
}
.b_va_status {
    font-size: clamp(13px, 3.6vw, 18px);
    color: var(--va-brand);
    margin-top: clamp(4px, 0.5vh, 8px);
}
/* middle: free space filled with dashboard tiles (2 columns x 2 rows) */
.b_va_mid {
    width: 100%;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;   /* panels handle their own scrolling (no double scrollbar) */
    padding: 2vh 0;
    box-sizing: border-box;
}
.b_va_tiles {
    width: 100%;
    max-width: 340px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(10px, 2.6vw, 16px);
}
.b_va_tile {
    background-color: #ffffff;
    border: 1px solid #dddddd;
    border-radius: clamp(10px, 3.5vw, 18px);
    padding: clamp(10px, 3vw, 18px) clamp(8px, 2vw, 14px);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(6px, 1vh, 12px);
    cursor: pointer;
    color: var(--va-brand);
}
.b_va_tile_ico { width: clamp(26px, 7vw, 38px); height: auto; }
.b_va_tile_lbl { font-size: clamp(11px, 2.8vw, 14px); color: #333333; text-align: center; }
.b_va_tile_on { border-color: var(--va-brand); box-shadow: 0 0 0 2px var(--va-brand) inset; }
.b_va_tile_dis { opacity: 0.4; pointer-events: none; }
/* one panel at a time fills the middle area (tiles | keypad | transcript | history) */
.b_va_panel {
    width: 100%;
    max-width: 340px;
    height: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}
.b_va_panel_head {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0 clamp(4px, 1vw, 8px) clamp(6px, 1vh, 10px);
    font-size: clamp(12px, 3vw, 15px);
    color: #666666;
}
.b_va_panel_x { font-size: clamp(18px, 5vw, 26px); line-height: 1; cursor: pointer; color: #888888; padding: 0 clamp(6px, 2vw, 12px); }
.b_va_panel_body {
    flex: 1 1 auto;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.b_va_log_body {
    flex: 1 1 auto;
    width: 100%;
    overflow-y: auto;
    padding: 0 clamp(6px, 1vw, 14px);
    box-sizing: border-box;
    font-size: clamp(13px, 3.4vw, 17px);
}
.b_va_log_body .k_sysbot { background-color: #ffffff; color: #333333; border: 1px solid #e2e2e2; }
.b_va_log_body .k_userbot { background-color: var(--va-brand); color: #ffffff; }
.b_va_hist_body {
    flex: 1 1 auto;
    width: 100%;
    overflow-y: auto;
    padding: 0 clamp(6px, 1vw, 14px);
    box-sizing: border-box;
    font-size: clamp(13px, 3.4vw, 17px);
}
.b_va_hist_body .k_sysbot { background-color: #ffffff; color: #333333; border: 1px solid #e2e2e2; }
.b_va_hist_body .k_userbot { background-color: var(--va-brand); color: #ffffff; }
.b_va_hist_empty { width: 100%; text-align: center; color: #888888; font-size: clamp(12px, 3.2vw, 15px); padding: clamp(10px, 2vh, 18px) 0; }
/* keypad */
.b_va_keypad {
    width: auto;
    max-width: 100%;
    display: grid;
    grid-template-columns: repeat(3, auto);
    justify-content: center;
    gap: clamp(10px, 2vh, 18px);
    padding: 0;
}
.b_va_key {
    width: clamp(54px, 16vw, 84px);
    height: clamp(40px, 6.4vh, 52px);
    border-radius: 8px;
    background-color: #ffffff;
    color: #1a1a1a;
    border: 1px solid #cccccc;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(15px, 4vw, 22px);
    cursor: pointer;
}
/* keypad contact-number entry (used when the caller types instead of speaking) */
.b_va_keypad_wrap { display: flex; flex-direction: column; align-items: center; gap: clamp(8px, 1.4vh, 14px); width: 100%; max-height: 100%; overflow: hidden; }
.b_va_keypad_disp {
    min-height: 34px;
    min-width: 55%;
    max-width: 90%;
    text-align: center;
    font-size: clamp(18px, 5vw, 26px);
    letter-spacing: 0.08em;
    color: #1a1a1a;
    background-color: #ffffff;
    border: 1px solid #cccccc;
    border-radius: 10px;
    padding: 6px 14px;
    box-sizing: border-box;
}
.b_va_key_enter { background-color: #1faa59; border-color: #1faa59; color: #ffffff; }
.b_va_key_ico { width: 55%; height: 55%; max-width: 26px; }
/* bottom: dial + hang up */
.b_va_controls {
    width: 100%;
    max-width: 340px;
    display: flex;
    gap: clamp(10px, 2.6vw, 16px);
    padding: clamp(10px, 1.5vh, 18px) 0 clamp(6px, 1vh, 12px);
}
.b_va_dial, .b_va_hang {
    flex: 1 1 0;
    height: 48px;
    border-radius: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(13px, 3.4vw, 17px);
    font-weight: 700;
    color: #ffffff;
    cursor: pointer;
}
.b_va_dial { background-color: #1faa59; }
.b_va_hang { background-color: #d93636; }
.b_va_dis { opacity: 0.4; pointer-events: none; }
/* footer */
.b_va_foot {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(6px, 2vw, 12px);
    padding-top: clamp(4px, 0.6vh, 10px);
}
.b_va_bf { width: 20px; height: 20px; flex: 0 0 auto; }
.b_va_foot_txt { font-size: clamp(10px, 2.4vw, 13px); color: #888888; text-align: center; }
.b_va_btn_hide { display: none; }

/* Wider screens (tablet / desktop): the dialer fills the whole page; only the
   content columns get a little wider so they use the extra space. */
@media (min-width: 769px) {
    .b_va_tiles { max-width: 620px; }
    .b_va_controls { max-width: 620px; }
    .b_va_panel { max-width: 620px; }
    .b_va_keypad { max-width: 340px; }
}
@media (min-width: 1200px) {
    .b_va_tiles { max-width: 760px; }
    .b_va_controls { max-width: 760px; }
    .b_va_panel { max-width: 760px; }
    .b_va_keypad { max-width: 380px; }
}

/* ============================================================
   BRAND ACCENTS (shared)
   navy #0f2244, gold #e3b62c.
   ============================================================ */
.b_login_logo { width: 40vw; max-width: 180px; height: auto; }
/* ============================================================
   AI-Receptionist product page (Business-Folio) — black / orange / white
   ============================================================ */
.b_pd_page {
    min-height: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}
.b_pd_white { color: #ffffff; }
.b_pd_orange { color: #ffa500; }
.b_pd_muted { color: #ccd3dc; }
.b_pd_logo { width: 72px; height: 72px; display: block; margin: 0 auto; }
.b_pd_grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: clamp(12px, 2.5vw, 22px);
}
.b_pd_item {
    width: clamp(140px, 42vw, 190px);
    max-width: 165px;
    background-color: #14171c;
    border: 1px solid #23272e;
    border-radius: clamp(10px, 3vw, 16px);
    padding: clamp(12px, 3vw, 20px) clamp(10px, 2vw, 16px);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(6px, 1vh, 12px);
}
.b_pd_ico { width: clamp(28px, 9vw, 38px); height: auto; color: #ffa500; }
.b_pd_lbl { font-size: clamp(12px, 3.4vw, 16px); color: #ffffff; text-align: center; }
.b_pd_hist {
    width: 100%;
    max-width: 360px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: clamp(8px, 2vw, 14px);
}
.b_pd_hist_item {
    display: flex;
    align-items: center;
    gap: clamp(10px, 3vw, 18px);
    background-color: #14171c;
    border: 1px solid #23272e;
    border-radius: clamp(10px, 3vw, 16px);
    padding: clamp(10px, 2.5vw, 18px) clamp(12px, 3vw, 20px);
    box-sizing: border-box;
    cursor: pointer;
}
.b_pd_hist_logo { width: 10%; max-width: 40px; height: auto; }
.b_pd_hist_txt { flex: 1 1 auto; }
.b_pd_hist_name { color: #ffffff; font-size: clamp(13px, 3.6vw, 17px); }
.b_pd_hist_sub { color: #ccd3dc; font-size: clamp(11px, 3vw, 15px); }
.b_pd_tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(6px, 1vh, 12px);
    width: clamp(200px, 60vw, 260px);
    max-width: 220px;
    margin: 0 auto;
    background-color: #14171c;
    border: 1px solid #23272e;
    border-radius: clamp(10px, 4vw, 18px);
    padding: clamp(12px, 3vw, 20px) clamp(10px, 2vw, 16px);
    box-sizing: border-box;
    cursor: pointer;
    color: #ffa500;
}
.b_pd_tile_ico { width: clamp(28px, 9vw, 38px); height: auto; }
.b_pd_tile_lbl { font-size: clamp(12px, 3.4vw, 16px); color: #ffffff; text-align: center; }
/* mobile-dialer style call history list */
.b_pd_calllist { width: 100%; display: flex; flex-direction: column; text-align: left; }
/* titled full-page (top padding only, no bottom gap) */
.b_pd_titled { padding-top: 54px; box-sizing: border-box; }
/* top aligned content (call history / transcript pages) */
.b_pd_top { justify-content: flex-start; }
/* "...and many more" link to the product site */
.b_pd_morelink { color: #e07c00; font-size: clamp(14px, 4vw, 20px); text-decoration: none; }
/* Responsive cap for the framework vw text helper used on the product page:
   keeps mobile sizes and caps them on wide (desktop) screens. */
.k_f4vw { font-size: clamp(15px, 4vw, 22px); }
/* transcript page body: exactly like the app chat (scrollable, padded) */
.b_pd_chat {
    width: 100%;
    flex: 1 1 auto;
    overflow-y: auto;
    padding: clamp(12px, 2vw, 24px);
    box-sizing: border-box;
    text-align: left;
    font-size: clamp(13px, 3.4vw, 17px);
}
.b_pd_chat .k_chatline { padding: clamp(6px, 1vw, 12px); }
.b_pd_calllist { font-size: clamp(13px, 3.4vw, 17px); }
.b_pd_call {
    display: flex;
    align-items: center;
    gap: clamp(10px, 3vw, 18px);
    padding: clamp(12px, 2.5vw, 20px) clamp(12px, 2vw, 20px);
    border-bottom: 1px solid #e5e5e5;
    box-sizing: border-box;
    cursor: pointer;
}
.b_pd_call_logo {
    width: clamp(42px, 12vw, 56px);
    height: clamp(42px, 12vw, 56px);
    max-width: 56px;
    max-height: 56px;
    border-radius: 50%;
    overflow: hidden;
    flex: 0 0 auto;
    background-color: #f1f1f1;
    border: 1px solid #dddddd;
    display: flex;
    align-items: center;
    justify-content: center;
}
.b_pd_call_logo img { width: 78%; height: 78%; object-fit: contain; }
.b_pd_call_info { flex: 1 1 auto; min-width: 0; }
.b_pd_call_name { color: #1a1a1a; font-size: clamp(14px, 4vw, 18px); }
.b_pd_call_meta { color: #666666; font-size: clamp(12px, 3vw, 15px); margin-top: clamp(3px, 0.4vh, 6px); }
.b_pd_call_arrow { color: #e07c00; font-size: clamp(22px, 7vw, 32px); line-height: 1; flex: 0 0 auto; }
.b_bg_navy { background-color: #0f2244; }
.b_bg_gold { background-color: #e3b62c; }
.b_brdr_navy { border: 1px solid #0f2244; }

/* Voice agent: tappable numbered choices shown on the phone screen */
.b_va_opts {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: clamp(8px, 2vw, 14px);
    justify-content: center;
    padding: clamp(6px, 1vh, 12px) 0;
}
.b_va_opt {
    padding: clamp(8px, 1.6vw, 12px) clamp(12px, 3vw, 20px);
    border-radius: clamp(8px, 2vw, 14px);
    background-color: #16294a;
    color: #ffffff;
    border: 1px solid var(--va-brand);
    font-size: clamp(13px, 3.4vw, 17px);
    cursor: pointer;
}

/* ============================================================
   Call history page: single column on mobile (list only, opens the
   transcript as its own page); two columns on wide / landscape screens
   (list on the left, intro then transcript on the right).
   ============================================================ */
.b_va_histcols { width: 100%; height: 100%; display: flex; flex-direction: column; }
.b_va_histcol_l { width: 100%; flex: 1 1 auto; overflow-y: auto; }
.b_va_histcol_r { display: none; }
.b_va_intro { max-width: 720px; text-align: left; }
.b_va_intro_title { font-size: clamp(16px, 3vw, 22px); font-weight: 800; color: #1a1a1a; margin-bottom: clamp(8px, 1.5vh, 14px); }
.b_va_intro_txt { font-size: clamp(13px, 3.4vw, 16px); color: #444444; line-height: 1.5; margin-bottom: clamp(10px, 1.6vh, 16px); }
@media (min-width: 769px), (orientation: landscape) {
    .b_va_histcols { flex-direction: row; }
    .b_va_histcol_l { flex: 0 0 38%; width: 38%; border-right: 1px solid #e5e5e5; }
    .b_va_histcol_r { display: block; flex: 1 1 auto; overflow-y: auto; padding: clamp(14px, 2vw, 24px); }
}

/* ============================================================
   Default product page (no slug): one full screen, no scrolling.
   The framework vw paddings are tightened so the content fits.
   ============================================================ */
#tthome { height: 100%; overflow: hidden; }
.b_pd_page.k_pad3vw { height: 100%; overflow: hidden; padding: clamp(10px, 2vh, 22px) clamp(12px, 3vw, 28px); }
.b_pd_page .k_pad2vw { padding: clamp(4px, 1.6vh, 12px) 0; }
.b_pd_page .k_pad1vw { padding: clamp(2px, 1vh, 8px) 0; }

/* ============================================================
   Header: title and close button reduced proportionally.
   ============================================================ */
#tth_title_text { font-size: clamp(14px, 3.2vw, 20px); line-height: 1.2; }
#tth_cbtnid svg { max-width: 22px; max-height: 22px; margin: auto; }