/* bento-cards.css : round 2 scenes (tracking_a, agents_a, cdp_b, pipeline_a, integrations_a, web_c). Generated from design/bento-lab/v2. */
/* ---- tracking_a ---- */
/* Tracking plans, variation a : "Plan sheet".
   A tracking-plan spreadsheet: three spellings of a signup collapse into one named event,
   properties arrive as typed fields, owners take each row, a test fails, is fixed, and the
   campaign switch goes live. Default CSS is the END state (clean, passing, live).
   Every rule is scoped under .bt_tracking_a; class prefix tka_. */
.bt_tracking_a {
  --ink: #142853;
  --blue: #3360FF;
  --amber: #FEC84B;
  --ok: #027A48;
  --p1: #EFF4FF;
  --p2: #D6E3FF;
  --rule: rgba(20, 40, 83, .14);
  --edge: rgba(20, 40, 83, .26);
  --mute: rgba(20, 40, 83, .58);
  --cols: minmax(0, 1fr) 5.75rem 1.5rem;
  --areas: "name owner test" "props props .";
  --hareas: "name owner test";
  position: relative;
  z-index: 1;
  align-self: stretch;
  width: 100%;
  min-height: 15rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 1rem 1.125rem 1.0625rem;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  color: var(--ink);
  cursor: pointer;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
}
.bt_tracking_a:focus-visible { box-shadow: inset 0 0 0 2px var(--blue); }
.bt_tracking_a .tka_lean { position: relative; display: flex; flex-direction: column; gap: .625rem; }

/* the sheet and its flat under-page (depth by layering, no shadow) */
.bt_tracking_a .tka_stack { position: relative; }
.bt_tracking_a .tka_under {
  position: absolute;
  inset: 0;
  transform: translate(6px, 6px);
  background: var(--p1);
  border: 1px solid var(--p2);
  border-radius: 2px;
}
.bt_tracking_a .tka_sheet {
  position: relative;
  background: #fff;
  border: 1px solid var(--edge);
  border-radius: 2px;
}

/* title strip : document name, tool marks, status */
.bt_tracking_a .tka_top {
  display: flex;
  align-items: center;
  gap: .625rem;
  height: 1.875rem;
  padding: 0 .625rem;
  border-bottom: 1px solid var(--rule);
}
.bt_tracking_a .tka_doc {
  display: flex;
  align-items: center;
  gap: .4375rem;
  font: 700 .8125rem/1 'Plus Jakarta Sans', sans-serif;
  letter-spacing: -.01em;
  white-space: nowrap;
}
.bt_tracking_a .tka_doc svg { width: .875rem; height: .875rem; flex: none; }
.bt_tracking_a .tka_marks { display: flex; align-items: center; gap: .4375rem; margin-left: auto; color: var(--ink); }
.bt_tracking_a .tka_marks i { display: grid; place-items: center; width: 1.25rem; height: 1.25rem; border: 1px solid var(--rule); border-radius: 2px; }
.bt_tracking_a .tka_marks svg { height: .75rem; width: .75rem; display: block; fill: currentColor; }

.bt_tracking_a .tka_state {
  display: grid;
  justify-items: end;
  min-width: 5.5rem;
  padding-left: .625rem;
  border-left: 1px solid var(--rule);
  height: 100%;
  align-items: center;
}
.bt_tracking_a .tka_state b {
  grid-area: 1 / 1;
  font-weight: 500;
  font-size: .75rem;
  line-height: 1;
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
}
.bt_tracking_a .tka_s0 { color: var(--mute); opacity: 0; }
.bt_tracking_a .tka_s1 { color: var(--ink); opacity: 0; }
.bt_tracking_a .tka_s2 { color: var(--blue); }

/* column head : a spreadsheet header row */
.bt_tracking_a .tka_head {
  display: grid;
  grid-template-columns: var(--cols);
  grid-template-areas: var(--hareas);
  column-gap: .625rem;
  align-items: center;
  height: 1.375rem;
  padding: 0 .625rem;
  background: var(--p1);
  border-bottom: 1px solid var(--rule);
  font-size: .75rem;
  line-height: 1;
  color: var(--mute);
}
.bt_tracking_a .tka_head span:nth-child(1) { grid-area: name; }
.bt_tracking_a .tka_head span:nth-child(2) { grid-area: dest; display: none; }
.bt_tracking_a .tka_head span:nth-child(3) { grid-area: owner; }
.bt_tracking_a .tka_head span:nth-child(4) { grid-area: test; justify-self: center; }

/* one row : name, owner, test on line one; typed properties on line two */
.bt_tracking_a .tka_row {
  position: relative;
  display: grid;
  grid-template-columns: var(--cols);
  grid-template-areas: var(--areas);
  grid-template-rows: 1.625rem 1.375rem;
  column-gap: .625rem;
  row-gap: .25rem;
  padding: .5rem .625rem;
  outline: none;
  transition: background-color .2s;
}
.bt_tracking_a .tka_row + .tka_row { border-top: 1px solid var(--rule); }
.bt_tracking_a .tka_row.is-hot { background: #F7F9FF; }
.bt_tracking_a .tka_name { grid-area: name; position: relative; display: flex; align-items: center; min-width: 0; }
.bt_tracking_a .tka_clean {
  font-weight: 500;
  font-size: .9375rem;
  line-height: 1;
  letter-spacing: -.01em;
  white-space: nowrap;
}
.bt_tracking_a .tka_raw {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  opacity: 0;
}
.bt_tracking_a .tka_raw i {
  position: relative;
  font-style: normal;
  font-size: .75rem;
  line-height: 1;
  padding: .25rem .375rem;
  margin-right: -.1875rem;
  background: #fff;
  border: 1px dashed rgba(20, 40, 83, .5);
  border-radius: 2px;
  white-space: nowrap;
}
.bt_tracking_a .tka_raw em {
  font-style: normal;
  font-size: .75rem;
  color: var(--mute);
  margin-left: .625rem;
  white-space: nowrap;
}

/* owner : an empty dashed slot, then avatar and team */
.bt_tracking_a .tka_owner { grid-area: owner; display: grid; align-items: center; justify-items: start; }
.bt_tracking_a .tka_none,
.bt_tracking_a .tka_who { grid-area: 1 / 1; }
.bt_tracking_a .tka_none {
  font-size: .75rem;
  line-height: 1;
  padding: .25rem .375rem;
  border: 1px dashed rgba(20, 40, 83, .4);
  border-radius: 2px;
  color: var(--mute);
  white-space: nowrap;
  opacity: 0;
}
.bt_tracking_a .tka_who { display: flex; align-items: center; gap: .375rem; font-size: .75rem; line-height: 1; white-space: nowrap; transform-origin: 0 50%; }
.bt_tracking_a .tka_who i {
  display: grid;
  place-items: center;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  background: var(--ink);
  color: #fff;
  font: 700 .75rem/1 'Plus Jakarta Sans', sans-serif;
  font-style: normal;
}

/* sends to : the tools each event is delivered to (wide tiles only) */
.bt_tracking_a .tka_dest { grid-area: dest; display: none; align-items: center; gap: .3125rem; }
.bt_tracking_a .tka_dest i { display: grid; place-items: center; width: 1.375rem; height: 1.375rem; border: 1px solid var(--rule); border-radius: 2px; background: #fff; }
.bt_tracking_a .tka_dest svg { height: .8125rem; width: .8125rem; fill: var(--ink); display: block; }

/* test : empty box, green tick, or the amber failure */
.bt_tracking_a .tka_test { grid-area: test; position: relative; width: 1.25rem; height: 1.25rem; align-self: center; justify-self: center; }
.bt_tracking_a .tka_test svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.bt_tracking_a .tka_box { fill: #fff; stroke: var(--edge); stroke-width: 1; }
.bt_tracking_a .tka_okbox { fill: var(--ok); }
.bt_tracking_a .tka_tick { fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 100; stroke-dashoffset: 0; }
.bt_tracking_a .tka_failbox { fill: var(--amber); }
.bt_tracking_a .tka_x { fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 0; }
.bt_tracking_a .tka_ok,
.bt_tracking_a .tka_fail { transform-origin: 50% 50%; transform-box: fill-box; }
.bt_tracking_a .tka_fail { opacity: 0; }

/* properties line : typed field chips, or the failing value */
.bt_tracking_a .tka_props { grid-area: props; position: relative; display: flex; align-items: center; min-width: 0; }
.bt_tracking_a .tka_pl,
.bt_tracking_a .tka_err { display: flex; align-items: center; gap: .375rem; white-space: nowrap; }
.bt_tracking_a .tka_err { position: absolute; left: 0; top: 0; bottom: 0; opacity: 0; font-size: .75rem; }
.bt_tracking_a .tka_ph {
  position: absolute;
  left: 0;
  top: 50%;
  width: 6.5rem;
  height: .875rem;
  margin-top: -.4375rem;
  border: 1px dashed rgba(20, 40, 83, .3);
  border-radius: 2px;
  opacity: 0;
}
.bt_tracking_a .tka_prop {
  display: inline-flex;
  align-items: center;
  font-size: .75rem;
  line-height: 1;
  padding: .25rem .375rem;
  background: var(--p1);
  border: 1px solid var(--p2);
  border-radius: 2px;
}
.bt_tracking_a .tka_prop em { font-style: normal; }
.bt_tracking_a .tka_prop s { text-decoration: none; color: var(--blue); margin-left: .375rem; }
.bt_tracking_a .tka_err em { font-style: normal; }
.bt_tracking_a .tka_slot { display: grid; align-items: center; }
.bt_tracking_a .tka_slot > * { grid-area: 1 / 1; }
.bt_tracking_a .tka_bad {
  font-size: .75rem;
  line-height: 1;
  padding: .25rem .375rem;
  background: var(--amber);
  border-radius: 2px;
  transform-origin: 0 50%;
}
.bt_tracking_a .tka_val { font-weight: 500; color: var(--ink); padding: 0 .125rem; }
.bt_tracking_a .tka_exp { color: var(--mute); }

/* selection handles on the row under test (hidden in the end state) */
.bt_tracking_a .tka_sel { position: absolute; inset: -1px; z-index: 2; pointer-events: none; opacity: 0; border: 1px solid var(--ink); }
.bt_tracking_a .tka_sel i { position: absolute; width: 7px; height: 7px; background: #fff; border: 1px solid var(--ink); }
.bt_tracking_a .tka_sel i:nth-child(1) { left: -4px; top: -4px; }
.bt_tracking_a .tka_sel i:nth-child(2) { right: -4px; top: -4px; }
.bt_tracking_a .tka_sel i:nth-child(3) { left: -4px; bottom: -4px; }
.bt_tracking_a .tka_sel i:nth-child(4) { right: -4px; bottom: -4px; }

/* the test scan : a blue hairline that walks the rows */
.bt_tracking_a .tka_scan { position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--blue); opacity: 0; pointer-events: none; z-index: 3; }

/* footer : campaign switch and the trust line, with a blue rule that lights when live */
.bt_tracking_a .tka_foot {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  height: 2rem;
  padding: 0 .125rem 0 .625rem;
}
.bt_tracking_a .tka_rule { position: absolute; left: 0; right: 0; top: -.3125rem; height: 2px; background: var(--blue); transform-origin: 0 50%; }
.bt_tracking_a .tka_camp { display: flex; align-items: center; gap: .5rem; }
.bt_tracking_a .tka_switch { position: relative; width: 1.875rem; height: 1rem; border: 1px solid var(--edge); border-radius: 2px; background: #fff; overflow: hidden; flex: none; }
.bt_tracking_a .tka_fill { position: absolute; inset: 0; background: var(--blue); transform-origin: 0 50%; }
.bt_tracking_a .tka_knob { position: absolute; left: 2px; top: 2px; width: .625rem; height: .625rem; border-radius: 1px; background: #fff; border: 1px solid var(--ink); transform: translateX(.875rem); }
.bt_tracking_a .tka_lab { display: grid; }
.bt_tracking_a .tka_lab b { grid-area: 1 / 1; font: 700 .8125rem/1 'Plus Jakarta Sans', sans-serif; letter-spacing: -.01em; white-space: nowrap; }
.bt_tracking_a .tka_off { color: var(--mute); opacity: 0; }
.bt_tracking_a .tka_trust { font-weight: 500; font-size: .75rem; line-height: 1; letter-spacing: .08em; text-transform: uppercase; color: var(--blue); white-space: nowrap; }

/* hover or tap card : the row's full contract */
.bt_tracking_a .tka_tip {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 6;
  min-width: 14.5rem;
  padding: .625rem .75rem .6875rem;
  background: #fff;
  border: 1px solid var(--ink);
  border-radius: 2px;
  font-size: .75rem;
  line-height: 1.5;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
}
.bt_tracking_a .tka_tip::before { content: ""; position: absolute; inset: 0; transform: translate(5px, 5px); z-index: -1; background: var(--p2); border-radius: 2px; }
.bt_tracking_a .tka_tip::after { content: ""; position: absolute; inset: 0; z-index: -1; background: #fff; border-radius: 2px; }
.bt_tracking_a .tka_tip h4 { display: flex; justify-content: space-between; gap: 1rem; margin: 0 0 .375rem; padding-bottom: .375rem; border-bottom: 1px solid var(--rule); font: 500 .8125rem/1.2 'IBM Plex Mono', monospace; }
.bt_tracking_a .tka_tip h4 span { font-size: .75rem; color: var(--blue); letter-spacing: .08em; }
.bt_tracking_a .tka_tip dl { display: grid; grid-template-columns: auto 1fr; column-gap: .875rem; margin: 0; }
.bt_tracking_a .tka_tip dt { color: var(--mute); }
.bt_tracking_a .tka_tip dd { margin: 0; white-space: nowrap; }
.bt_tracking_a .tka_tip dd s { text-decoration: none; color: var(--blue); }

/* wide tile (half width on desktop) : more air, larger names */
@container (min-width: 30rem) {
  .bt_tracking_a { --cols: minmax(0, 1fr) 4.25rem 6.5rem 1.75rem; --areas: "name dest owner test" "props props . ."; --hareas: "name dest owner test"; padding: 1.125rem 1.75rem 1.25rem; }
  .bt_tracking_a .tka_dest, .bt_tracking_a .tka_head span:nth-child(2) { display: flex; }
  .bt_tracking_a .tka_marks { display: none; }
  .bt_tracking_a .tka_state { margin-left: auto; }
  .bt_tracking_a .tka_row { grid-template-rows: 1.75rem 1.5rem; padding: .625rem .875rem; column-gap: 1rem; }
  .bt_tracking_a .tka_head { padding: 0 .875rem; column-gap: 1rem; }
  .bt_tracking_a .tka_top { padding: 0 .875rem; }
  .bt_tracking_a .tka_clean { font-size: 1.0625rem; }
  .bt_tracking_a .tka_raw i { margin-right: .25rem; }
}
/* phones : tighter gutters, names stay at 14px or more */
@container (max-width: 23rem) {
  .bt_tracking_a { --cols: minmax(0, 1fr) 5.25rem 1.375rem; padding: .875rem .875rem 1rem; }
  .bt_tracking_a .tka_row { column-gap: .5rem; padding: .5rem .5rem; }
  .bt_tracking_a .tka_head { column-gap: .5rem; padding: 0 .5rem; }
  .bt_tracking_a .tka_top { padding: 0 .5rem; gap: .5rem; }
  .bt_tracking_a .tka_state { min-width: 4.75rem; padding-left: .5rem; }
  .bt_tracking_a .tka_clean { font-size: .875rem; }
  .bt_tracking_a .tka_marks { gap: .375rem; }
  .bt_tracking_a .tka_tip { min-width: 0; width: calc(100% - 1.75rem); }
}

/* ---- agents_a ---- */
/* agents_a : "The day, handed over". A working Friday as two calendar rows, you and the agent.
   Default state = END state: every routine job ticked in the agent row, your row one amber
   block of strategy and client time, the clock at 18:00. */
.bt_agents_a {
  --a-ink: #142853;
  --a-blue: #3360FF;
  --a-amber: #FEC84B;
  --a-paper: #EFF4FF;
  --a-paper2: #D6E3FF;
  --a-ok: #027A48;
  position: absolute;
  inset: 0;
  z-index: 2;
  background: #fff;
  color: var(--a-ink);
  touch-action: pan-y;          /* a sideways drag scrubs the day, a vertical one still scrolls */
  -webkit-tap-highlight-color: transparent;
  outline: none;
}
.bt_agents_a:focus-visible { box-shadow: inset 0 0 0 2px var(--a-blue); }
.bt_agents_a .a_svg { display: block; width: 100%; height: 100%; overflow: visible; }

/* frame */
.bt_agents_a .a_lane-you { fill: var(--a-paper); }
.bt_agents_a .a_rule { stroke: var(--a-ink); stroke-opacity: .2; stroke-width: 1; vector-effect: non-scaling-stroke; }
.bt_agents_a .a_grid { stroke: var(--a-ink); stroke-opacity: .1; stroke-width: 1; stroke-dasharray: 2 3; vector-effect: non-scaling-stroke; }
.bt_agents_a .a_hr { font: 500 15px 'IBM Plex Mono', ui-monospace, monospace; fill: var(--a-ink); fill-opacity: .6; text-anchor: middle; }
.bt_agents_a .a_cap { font: 500 15px 'IBM Plex Mono', ui-monospace, monospace; letter-spacing: .08em; fill: var(--a-ink); }
.bt_agents_a .a_clock { font: 700 20px 'Plus Jakarta Sans', system-ui, sans-serif; letter-spacing: -.01em; fill: var(--a-ink); text-anchor: end; font-variant-numeric: tabular-nums; }
.bt_agents_a .a_row { font: 600 15px 'Plus Jakarta Sans', system-ui, sans-serif; fill: var(--a-ink); }

/* row labels: you are ink, the agent is blue */
.bt_agents_a .a_av { fill: #fff; stroke: var(--a-ink); stroke-width: 1.25; vector-effect: non-scaling-stroke; }
.bt_agents_a .a_avh { fill: var(--a-ink); }
.bt_agents_a .a_avb { fill: var(--a-ink); }
.bt_agents_a .a_agent { fill: var(--a-blue); }
.bt_agents_a .a_agentmark { fill: #fff; }

/* the judgement block and its reveal cover */
.bt_agents_a .a_amber { fill: var(--a-amber); }
.bt_agents_a .a_focus-t { font: 700 15px 'Plus Jakarta Sans', system-ui, sans-serif; fill: var(--a-ink); }
.bt_agents_a .a_cover { fill: var(--a-paper); }

/* routine jobs: paper tint in your row, white with a blue edge once the agent has them */
.bt_agents_a .a_job-b { fill: var(--a-paper2); }
.bt_agents_a .a_job-d { fill: #fff; stroke: var(--a-blue); stroke-width: 1; vector-effect: non-scaling-stroke; }
.bt_agents_a .a_job-t { font: 600 15px 'Plus Jakarta Sans', system-ui, sans-serif; fill: var(--a-ink); }
.bt_agents_a .a_mk { fill: var(--a-ink); }
.bt_agents_a .a_mailbox, .bt_agents_a .a_mailflap { fill: none; stroke: var(--a-ink); stroke-width: 1.4; stroke-linejoin: round; }
.bt_agents_a .a_tick circle { fill: var(--a-ok); }
.bt_agents_a .a_tick path { fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* Hex selection handles */
.bt_agents_a .a_hd { fill: #fff; stroke: var(--a-ink); stroke-width: 1.1; vector-effect: non-scaling-stroke; }
.bt_agents_a .a_hds { opacity: 0; }

/* the playhead */
.bt_agents_a .a_head line { stroke: var(--a-blue); stroke-width: 2; vector-effect: non-scaling-stroke; }
.bt_agents_a .a_head rect { fill: var(--a-blue); }
.bt_agents_a .a_hit { fill: transparent; }
.bt_agents_a.is-anim .a_hit { cursor: ew-resize; }
.bt_agents_a.is-scrub .a_head rect { fill: var(--a-ink); }
.bt_agents_a.is-scrub .a_head line { stroke: var(--a-ink); }

/* ---- cdp_b ---- */
/* cdp_b : the deck. Six record cards square up into one profile, which Hightouch deals to four tools.
   Every rule is scoped under .bt_cdp_b. The CSS default is the END state (profile built, rules lit,
   meter full, a copy in every tool), so reduced motion and a failed script show the finished picture. */
.bt_cdp_b {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #FFFFFF;
  color: #142853;
  outline: none;
  cursor: default;
  -webkit-tap-highlight-color: transparent;
}
.bt_cdp_b:focus-visible { box-shadow: inset 0 0 0 2px #3360FF; }
.bt_cdp_b .cb_svg { display: block; width: 100%; height: 100%; overflow: visible; }

/* surfaces */
.bt_cdp_b .cb_box     { fill: #FFFFFF; stroke: rgba(20, 40, 83, 0.22); stroke-width: 1; vector-effect: non-scaling-stroke; }
.bt_cdp_b .cb_hero    { stroke: rgba(20, 40, 83, 0.4); }
.bt_cdp_b .cb_hot     { fill: none; stroke: #3360FF; stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.bt_cdp_b .cb_gold    { fill: #FEC84B; }
.bt_cdp_b .cb_div,
.bt_cdp_b .cb_cdiv    { stroke: rgba(20, 40, 83, 0.12); stroke-width: 1; vector-effect: non-scaling-stroke; }
.bt_cdp_b .cb_av      { fill: #3360FF; }

/* rules panel */
.bt_cdp_b .cb_rbox    { fill: #EFF4FF; }
.bt_cdp_b .cb_rhot    { fill: none; stroke: #3360FF; stroke-width: 1.25; vector-effect: non-scaling-stroke; }
.bt_cdp_b .cb_grip circle { fill: rgba(20, 40, 83, 0.4); }
.bt_cdp_b .cb_rled    { fill: #FFFFFF; stroke: rgba(20, 40, 83, 0.3); stroke-width: 1; vector-effect: non-scaling-stroke; }
.bt_cdp_b .cb_rlit    { fill: #3360FF; }
.bt_cdp_b .cb_seg     { fill: #D6E3FF; }
.bt_cdp_b .cb_segon   { fill: #3360FF; }

/* rail, slots and dealt copies */
.bt_cdp_b .cb_rail    { stroke: #142853; stroke-width: 1.25; vector-effect: non-scaling-stroke; }
.bt_cdp_b .cb_drop    { stroke: rgba(20, 40, 83, 0.3); stroke-width: 1; stroke-dasharray: 2 3; vector-effect: non-scaling-stroke; }
.bt_cdp_b .cb_slotbox { fill: #FFFFFF; stroke: rgba(20, 40, 83, 0.3); stroke-width: 1; stroke-dasharray: 3 3; vector-effect: non-scaling-stroke; }
.bt_cdp_b .cb_minibox { stroke: rgba(20, 40, 83, 0.4); }
.bt_cdp_b .cb_minibar { fill: #3360FF; }
.bt_cdp_b .cb_ln      { fill: #D6E3FF; }
.bt_cdp_b .cb_tick circle { fill: #027A48; }
.bt_cdp_b .cb_tick path { fill: none; stroke: #FFFFFF; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* glyphs and marks */
.bt_cdp_b .cb_glyph { fill: none; stroke: #142853; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.bt_cdp_b .cb_glyph .cb_gfill { fill: #142853; stroke: none; }
.bt_cdp_b .cb_mark  { fill: #142853; overflow: visible; }

/* type : nothing under 13 viewBox units */
.bt_cdp_b text { fill: #142853; }
.bt_cdp_b .cb_type,
.bt_cdp_b .cb_ptitle,
.bt_cdp_b .cb_mlbl,
.bt_cdp_b .cb_k,
.bt_cdp_b .cb_count  { font: 500 13px/1 var(--font-mono, 'IBM Plex Mono', monospace); fill: rgba(20, 40, 83, 0.6); }
.bt_cdp_b .cb_key,
.bt_cdp_b .cb_rkey   { font: 500 13px/1 var(--font-mono, 'IBM Plex Mono', monospace); fill: #3360FF; }
.bt_cdp_b .cb_rkey   { fill: #142853; }
.bt_cdp_b .cb_val,
.bt_cdp_b .cb_v      { font: 500 13px/1 var(--font-mono, 'IBM Plex Mono', monospace); }
.bt_cdp_b .cb_valsans { font: 700 15px/1 var(--font-display, 'Plus Jakarta Sans', sans-serif); letter-spacing: -0.01em; }
.bt_cdp_b .cb_mval   { font: 700 13px/1 var(--font-display, 'Plus Jakarta Sans', sans-serif); }
.bt_cdp_b .cb_name   { font: 700 18px/1 var(--font-display, 'Plus Jakarta Sans', sans-serif); letter-spacing: -0.02em; }
.bt_cdp_b .cb_co     { font: 600 13px/1 var(--font-display, 'Plus Jakarta Sans', sans-serif); fill: rgba(20, 40, 83, 0.62); }
.bt_cdp_b .cb_ini    { font: 700 13px/1 var(--font-display, 'Plus Jakarta Sans', sans-serif); fill: #FFFFFF; letter-spacing: 0.02em; }

/* end state : the deck has become the profile */
.bt_cdp_b .cb_cw,
.bt_cdp_b .cb_hot,
.bt_cdp_b .cb_rhot,
.bt_cdp_b .cb_low { opacity: 0; }

/* ---- pipeline_a ---- */
/* bt_pipeline_a : "The sheet that writes the email".
   Default state = END state: table filled, row 1 picked and ticked, the email written,
   sent from a warmed inbox, and the reply back with a person. scene.js sets the start state. */
.bt_pipeline_a {
  position: relative;
  z-index: 1;
  width: 100%;
  padding: 14px 12px;
  color: #142853;
}
.bt_pipeline_a .pa_svg { display: block; width: 100%; max-width: 30rem; height: auto; margin-inline: auto; overflow: visible; }

/* table */
.bt_pipeline_a .pa_head { fill: #EFF4FF; }
.bt_pipeline_a .pa_frame { fill: none; stroke: rgba(20, 40, 83, .2); stroke-width: 1; }
.bt_pipeline_a .pa_rule { stroke: rgba(20, 40, 83, .2); stroke-width: 1; }
.bt_pipeline_a .pa_htxt { font: 500 12px/1 'IBM Plex Mono', ui-monospace, monospace; fill: #142853; }
.bt_pipeline_a .pa_dim { fill-opacity: .5; }
.bt_pipeline_a .pa_hmark { color: #142853; }
.bt_pipeline_a .pa_acct { font: 400 12px/1 'IBM Plex Mono', ui-monospace, monospace; fill: #142853; }
.bt_pipeline_a .pa_num { font: 400 12px/1 'IBM Plex Mono', ui-monospace, monospace; fill: #142853; }
.bt_pipeline_a .pa_num0 { opacity: 0; }
.bt_pipeline_a .pa_val { font: 600 12.5px/1 'Plus Jakarta Sans', system-ui, sans-serif; fill: #142853; letter-spacing: -.005em; }
.bt_pipeline_a .pa_skel { fill: #D6E3FF; opacity: 0; }
.bt_pipeline_a .pa_flash { fill: #EFF4FF; opacity: 0; }
.bt_pipeline_a .pa_rowtick circle { fill: #027A48; }
.bt_pipeline_a .pa_rowtick path,
.bt_pipeline_a .pa_sentTick path { fill: none; stroke: #fff; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* selection */
.bt_pipeline_a .pa_selF { fill: none; stroke: #3360FF; stroke-width: 1.5; }
.bt_pipeline_a .pa_handle { fill: #fff; stroke: #3360FF; stroke-width: 1.25; }
.bt_pipeline_a .pa_hit { fill: transparent; cursor: pointer; outline: none; }
.bt_pipeline_a .pa_hit:focus-visible { stroke: #3360FF; stroke-width: 1; stroke-dasharray: 3 2; }

/* email card */
.bt_pipeline_a .pa_cardF { fill: #fff; stroke: rgba(20, 40, 83, .2); stroke-width: 1; }
.bt_pipeline_a .pa_lbl { font: 400 12px/1 'IBM Plex Mono', ui-monospace, monospace; fill: #142853; fill-opacity: .56; }
.bt_pipeline_a .pa_to { font: 600 12.5px/1 'Plus Jakarta Sans', system-ui, sans-serif; fill: #142853; }
.bt_pipeline_a .pa_body { font: 600 13px/1 'Plus Jakarta Sans', system-ui, sans-serif; fill: #142853; }
.bt_pipeline_a .pa_chipR { fill: #D6E3FF; }
.bt_pipeline_a .pa_chipT { font: 600 13px/1 'Plus Jakarta Sans', system-ui, sans-serif; fill: #3360FF; }

.bt_pipeline_a .pa_ibBox { fill: #fff; stroke: #142853; stroke-width: 1; }
.bt_pipeline_a .pa_ibFlap { fill: none; stroke: #142853; stroke-width: 1; stroke-linejoin: round; }
.bt_pipeline_a .pa_ibOn { fill: #3360FF; }
.bt_pipeline_a .pa_ib1 .pa_ibBox { fill: #3360FF; stroke: #3360FF; }
.bt_pipeline_a .pa_ib1 .pa_ibFlap { stroke: #fff; }
.bt_pipeline_a .pa_heatBg { fill: #EFF4FF; }
.bt_pipeline_a .pa_heat { fill: #3360FF; }
.bt_pipeline_a .pa_mail, .bt_pipeline_a .pa_inst { color: #142853; }

.bt_pipeline_a .pa_btnBlue { fill: #3360FF; }
.bt_pipeline_a .pa_btnT { font: 500 12px/1 'IBM Plex Mono', ui-monospace, monospace; fill: #fff; }
.bt_pipeline_a .pa_btnSend { opacity: 0; }
.bt_pipeline_a .pa_btnLine { fill: #fff; stroke: rgba(20, 40, 83, .2); stroke-width: 1; }
.bt_pipeline_a .pa_sentTick circle { fill: #027A48; }
.bt_pipeline_a .pa_btnT2 { font: 500 12px/1 'IBM Plex Mono', ui-monospace, monospace; fill: #142853; }
.bt_pipeline_a .pa_fly { opacity: 0; }
.bt_pipeline_a .pa_fly rect { fill: #fff; stroke: #3360FF; stroke-width: 1; }
.bt_pipeline_a .pa_fly path { fill: none; stroke: #3360FF; stroke-width: 1; }

/* the reply: the one amber moment */
.bt_pipeline_a .pa_replyR { fill: #FEC84B; }
.bt_pipeline_a .pa_re { font: 500 12px/1 'IBM Plex Mono', ui-monospace, monospace; fill: #142853; fill-opacity: .7; }
.bt_pipeline_a .pa_replyT { font: 600 12.5px/1 'Plus Jakarta Sans', system-ui, sans-serif; fill: #142853; }
.bt_pipeline_a .pa_person { fill: #142853; }
.bt_pipeline_a .pa_arrow { fill: none; stroke: #142853; stroke-width: 1.25; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 40; stroke-dashoffset: 0; }

/* ---- integrations_a ---- */
/* integrations_a "Run graph": every rule scoped under .bt_integrations_a.
   Default state = END state: all six steps ticked, edges filled, the payload card and the Slack post showing. */
.bt_integrations_a {
  position: absolute; inset: 0; z-index: 1;
  display: flex; align-items: center; justify-content: center;
  background: #FFFFFF;
  -webkit-tap-highlight-color: transparent;
}
.bt_integrations_a .ga_svg { display: block; width: 100%; height: 100%; overflow: hidden; }
.bt_integrations_a text { font-family: "Plus Jakarta Sans", system-ui, sans-serif; fill: #142853; }
.bt_integrations_a .ga_mono { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 12px; font-weight: 500; }

.bt_integrations_a .ga_dot { fill: #D6E3FF; }

/* header and captions: the last caption is the end state */
.bt_integrations_a .ga_live { fill: #3360FF; }
.bt_integrations_a .ga_runlabel { fill: #3360FF; letter-spacing: .04em; }
.bt_integrations_a .ga_capt { font-size: 14px; font-weight: 700; letter-spacing: -.01em; }
.bt_integrations_a .ga_capd { fill: #142853; opacity: .72; }
.bt_integrations_a .ga_ambdot { fill: #FEC84B; stroke: #142853; stroke-width: 1; }
.bt_integrations_a .ga_cap { opacity: 0; }
.bt_integrations_a .ga_cap[data-i="6"] { opacity: 1; }
.bt_integrations_a .ga_caps, .bt_integrations_a .ga_peek { transition: opacity .25s ease; }
.bt_integrations_a .ga_peek { opacity: 0; }
.bt_integrations_a.is-peek .ga_caps { opacity: 0; }
.bt_integrations_a.is-peek .ga_peek { opacity: 1; }

/* edges and ports */
.bt_integrations_a .ga_edge { fill: none; stroke: #142853; stroke-opacity: .22; stroke-width: 1; transition: stroke .25s, stroke-opacity .25s; }
.bt_integrations_a .ga_fill { fill: none; stroke: #3360FF; stroke-width: 1.6; stroke-dasharray: 100; stroke-dashoffset: 0; }
.bt_integrations_a .ga_port { fill: #142853; }

/* nodes */
.bt_integrations_a .ga_n { outline: none; transition: opacity .25s ease; }
.bt_integrations_a .ga_hit { fill: transparent; }
.bt_integrations_a .ga_tile { fill: #FFFFFF; stroke: #142853; stroke-width: 1; }
.bt_integrations_a .ga_logo { color: #142853; }
.bt_integrations_a .ga_step { fill: #142853; }
.bt_integrations_a .ga_q { fill: #FFFFFF; stroke: #142853; stroke-opacity: .4; stroke-width: 1; opacity: 0; }
.bt_integrations_a .ga_spin { opacity: 0; }
.bt_integrations_a .ga_spinbg { fill: #FFFFFF; stroke: #D6E3FF; stroke-width: 1; }
.bt_integrations_a .ga_arc { fill: none; stroke: #3360FF; stroke-width: 1.6; stroke-linecap: round; }
.bt_integrations_a .ga_bad { opacity: 0; }
.bt_integrations_a .ga_bad circle { fill: #FEC84B; stroke: #142853; stroke-width: 1; }
.bt_integrations_a .ga_bad path { stroke: #142853; stroke-width: 1.6; stroke-linecap: round; fill: none; }
.bt_integrations_a .ga_ok circle { fill: #027A48; }
.bt_integrations_a .ga_tk { fill: none; stroke: #FFFFFF; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* the amber moment and the back-off ring */
.bt_integrations_a .ga_chip { opacity: 0; }
.bt_integrations_a .ga_chip rect { fill: #FEC84B; }
.bt_integrations_a .ga_chip text { fill: #142853; font-weight: 600; }
.bt_integrations_a .ga_ring { fill: none; stroke: #3360FF; stroke-width: 1.25; stroke-dasharray: 100; stroke-dashoffset: 0; opacity: 0; stroke-linecap: round; }

/* selection frame (Hex handles) */
.bt_integrations_a .ga_frame { fill: none; stroke: #3360FF; stroke-width: 1; }
.bt_integrations_a .ga_h { fill: #FFFFFF; stroke: #3360FF; stroke-width: 1; }

/* the payload card */
.bt_integrations_a .ga_cardbox { fill: #FFFFFF; stroke: #142853; stroke-width: 1; }
.bt_integrations_a .ga_cardbar { fill: #EFF4FF; stroke: #142853; stroke-width: 1; }
.bt_integrations_a .ga_cardh { fill: #142853; font-weight: 600; }
.bt_integrations_a .ga_key { fill: #142853; opacity: .6; }
.bt_integrations_a .ga_val { fill: #142853; }

/* the Slack post */
.bt_integrations_a .ga_postbox { fill: #FFFFFF; stroke: #142853; stroke-width: 1; }
.bt_integrations_a .ga_posttail { fill: #FFFFFF; stroke: #142853; stroke-width: 1; stroke-linejoin: round; }
.bt_integrations_a .ga_postch { fill: #142853; font-weight: 600; }
.bt_integrations_a .ga_postt { font-size: 12px; font-weight: 600; fill: #142853; }

/* packets */
.bt_integrations_a .ga_pk { opacity: 0; }
.bt_integrations_a .ga_head, .bt_integrations_a .ga_ghost { fill: #3360FF; stroke: #FFFFFF; stroke-width: 1.25; }
.bt_integrations_a .ga_tail1 { fill: #3360FF; opacity: .45; }
.bt_integrations_a .ga_tail2 { fill: #3360FF; opacity: .22; }

/* peek: hover or focus a node to light its path */
.bt_integrations_a.is-peek .ga_n:not(.is-lit) { opacity: .28; }
.bt_integrations_a.is-peek .ga_edge.is-lit { stroke: #3360FF; stroke-opacity: 1; }
.bt_integrations_a.is-peek .ga_fill:not(.is-lit) { stroke-opacity: .18; }
.bt_integrations_a.is-peek .ga_chip, .bt_integrations_a.is-peek .ga_ring { visibility: hidden; }
.bt_integrations_a .ga_n:focus-visible .ga_tile { stroke: #3360FF; stroke-width: 2; }
@media (hover: hover) { .bt_integrations_a .ga_n:hover .ga_tile { stroke-width: 1.75; } }

/* interactive only once the loop is wired (never under reduced motion or without JS) */
.bt_integrations_a.is-wired { cursor: pointer; }

/* ---- web_c ---- */
/* bt_web_c : "Wireframe to live". A builder workspace (Webflow mark, step tabs, navigator, canvas).
   The same page goes wireframe, then content from the CMS (Sanity), then style, then live (Vercel):
   the staging address turns into the real one and the navigator gives way to the redirect map.
   CSS default is the END state: styled page, live address, redirect map, step 04 active. */
.bt_web_c {
  --ink: #142853;
  --blue: #3360FF;
  --amber: #FEC84B;
  --paper: #EFF4FF;
  --tint: #D6E3FF;
  --ok: #027A48;
  --rule: rgba(20, 40, 83, .16);
  --rule2: rgba(20, 40, 83, .28);
  --wire: rgba(20, 40, 83, .14);
  position: absolute;
  inset: 0;
  z-index: 1;
  container: wc / size;
  overflow: hidden;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  color: var(--ink);
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
.bt_web_c *, .bt_web_c *::before, .bt_web_c *::after { box-sizing: border-box; }

/* ---------- the app frame ---------- */
.bt_web_c .wc_app { position: absolute; left: 4cqw; right: 4cqw; top: 7cqh; bottom: -2px; display: flex; flex-direction: column; border: 1px solid var(--rule2); border-radius: 2px; background: var(--paper); overflow: hidden; }
.bt_web_c .wc_top { position: relative; flex: none; display: flex; align-items: center; gap: 10px; height: 36px; padding: 0 8px 0 10px; border-bottom: 1px solid var(--rule2); background: #fff; }
.bt_web_c .wc_brand { flex: none; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 2px; background: var(--ink); }
.bt_web_c .wc_brand svg { width: 14px; height: 14px; fill: #fff; }
.bt_web_c .wc_tabs { position: relative; display: flex; align-items: stretch; height: 100%; margin: 0 auto; }
.bt_web_c .wc_tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0 9px;
  border: 0;
  background: none;
  color: rgba(20, 40, 83, .55);
  font: 500 12px/1 'IBM Plex Mono', monospace;
  white-space: nowrap;
  cursor: pointer;
}
.bt_web_c .wc_tab b { font-weight: 600; color: var(--blue); }
.bt_web_c .wc_tab svg { width: 14px; height: 14px; fill: var(--ink); }
.bt_web_c .wc_tab .wc_short { display: none; }
.bt_web_c .wc_tab.is-on { color: var(--ink); }
.bt_web_c .wc_tab:focus-visible { outline: 2px solid var(--blue); outline-offset: -4px; }
.bt_web_c .wc_mark { position: absolute; left: 0; bottom: -1px; height: 2px; width: 10px; background: var(--blue); transform-origin: 0 0; pointer-events: none; opacity: 0; }
.bt_web_c .wc_tab.is-on::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--blue); }
.bt_web_c.is-anim .wc_tab.is-on::after { display: none; }
.bt_web_c.is-anim .wc_mark { opacity: 1; }
.bt_web_c .wc_pub { flex: none; padding: 6px 9px; border-radius: 2px; background: var(--blue); color: #fff; font: 600 12px/1 'Plus Jakarta Sans', sans-serif; }

.bt_web_c .wc_body { position: relative; flex: 1 1 auto; min-height: 0; display: flex; }

/* ---------- left column : navigator during the build, redirect map once live ---------- */
.bt_web_c .wc_side { position: relative; flex: none; width: 31%; max-width: 200px; border-right: 1px solid var(--rule2); background: #fff; }
.bt_web_c .wc_panel { position: absolute; inset: 0; padding: 9px 8px; display: flex; flex-direction: column; gap: 3px; }
.bt_web_c .wc_h { display: flex; align-items: center; gap: 6px; margin: 2px 0 3px; font-size: 12px; font-weight: 600; letter-spacing: .02em; }
.bt_web_c .wc_h svg { width: 15px; height: 15px; fill: var(--ink); }
.bt_web_c .wc_h + .wc_h, .bt_web_c .wc_row + .wc_h { margin-top: 8px; }
.bt_web_c .wc_row { position: relative; display: flex; align-items: center; gap: 6px; height: 19px; padding: 0 5px; border-radius: 2px; font-size: 12px; line-height: 1; white-space: nowrap; }
.bt_web_c .wc_row i { flex: none; width: 8px; height: 8px; border: 1px solid var(--rule2); border-radius: 1px; }
.bt_web_c .wc_row.is-in { padding-left: 17px; }
.bt_web_c .wc_row .wc_rowbg { position: absolute; inset: 0; z-index: -1; border-radius: 2px; background: var(--paper); border: 0; width: auto; height: auto; }
.bt_web_c .wc_nav { opacity: 0; }
.bt_web_c .wc_redir { gap: 5px; }
.bt_web_c .wc_h .wc_301 { margin-left: auto; padding: 2px 4px; border-radius: 2px; background: var(--paper); font-weight: 600; }
.bt_web_c .wc_map { display: flex; flex-direction: column; gap: 2px; padding: 5px 6px; border: 1px solid var(--rule); border-radius: 2px; font-size: 12px; line-height: 1.2; white-space: nowrap; }
.bt_web_c .wc_map s { display: block; color: rgba(20, 40, 83, .5); text-decoration: none; overflow: hidden; text-overflow: ellipsis; }
.bt_web_c .wc_map span { display: flex; align-items: center; gap: 5px; }
.bt_web_c .wc_map span svg { width: 12px; height: 12px; margin-left: auto; fill: none; stroke: var(--ok); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- canvas : a page inside a browser bar ---------- */
.bt_web_c .wc_canvas { position: relative; flex: 1 1 auto; min-width: 0; padding: 10px 10px 0; }
.bt_web_c .wc_page { position: relative; height: 100%; display: flex; flex-direction: column; border: 1px solid var(--rule2); border-bottom: 0; border-radius: 2px 2px 0 0; background: #fff; overflow: hidden; }
.bt_web_c .wc_bar { position: relative; flex: none; display: flex; align-items: center; gap: 7px; height: 28px; padding: 0 8px; border-bottom: 1px solid var(--rule); }
.bt_web_c .wc_dots { display: inline-flex; gap: 4px; }
.bt_web_c .wc_dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--tint); }
.bt_web_c .wc_url { position: relative; flex: 1 1 auto; min-width: 0; display: grid; height: 19px; border-radius: 2px; background: var(--paper); font-size: 12px; line-height: 1; }
.bt_web_c .wc_url > span { grid-area: 1 / 1; display: flex; align-items: center; gap: 6px; padding: 0 7px; white-space: nowrap; overflow: hidden; }
.bt_web_c .wc_url svg { flex: none; width: 12px; height: 12px; }
.bt_web_c .wc_lock { fill: none; stroke: var(--ink); stroke-width: 1.5; }
.bt_web_c .wc_u-stage { opacity: 0; }
.bt_web_c .wc_badge { flex: none; display: grid; font-size: 12px; line-height: 1; }
.bt_web_c .wc_badge > span { grid-area: 1 / 1; display: inline-flex; align-items: center; justify-content: flex-end; gap: 4px; padding: 3px 5px; border-radius: 2px; white-space: nowrap; }
.bt_web_c .wc_b-stage { background: var(--amber); color: var(--ink); font-weight: 600; opacity: 0; }
.bt_web_c .wc_b-live { color: var(--ok); font-weight: 600; }
.bt_web_c .wc_b-live svg { width: 12px; height: 12px; }
.bt_web_c .wc_b-live svg path { fill: var(--ink); }
.bt_web_c .wc_b-live i { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); }
.bt_web_c .wc_prog { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--blue); transform-origin: 0 0; transform: scaleX(0); }

/* the page, with three skins per cell : wire, raw content, styled */
.bt_web_c .pg { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; padding: 0 12px; font-family: 'Plus Jakarta Sans', system-ui, sans-serif; }
.bt_web_c .cell { position: relative; display: grid; }
.bt_web_c .cell > .sk { grid-area: 1 / 1; min-width: 0; }
.bt_web_c .sk-w, .bt_web_c .sk-r { opacity: 0; }
.bt_web_c .wbox { border: 1px dashed rgba(20, 40, 83, .3); border-radius: 2px; background: var(--paper); }
.bt_web_c .wbar { display: block; height: 6px; border-radius: 1px; background: var(--wire); }
.bt_web_c .raw { font-family: 'IBM Plex Mono', monospace; font-size: 12px; font-weight: 400; color: var(--ink); }
.bt_web_c .raw u { color: var(--blue); text-underline-offset: 2px; }

.bt_web_c .c-nav { flex: none; height: 36px; border-bottom: 1px solid var(--rule); }
.bt_web_c .c-nav .sk { display: flex; align-items: center; gap: 10px; }
.bt_web_c .c-nav .sk-w .wbar { width: 34px; }
.bt_web_c .c-nav .sk-w .wbar.l { width: 22px; height: 5px; }
.bt_web_c .c-nav .sk-w .wbar.l:first-of-type { margin-left: auto; }
.bt_web_c .c-nav .sk-w .wbox { width: 64px; height: 20px; }
.bt_web_c .c-nav .sk-r { gap: 8px; white-space: nowrap; overflow: hidden; }
.bt_web_c .np_logo { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 700; letter-spacing: -.02em; }
.bt_web_c .np_logo svg { width: 14px; height: 14px; fill: var(--blue); }
.bt_web_c .np_links { display: inline-flex; gap: 11px; margin-left: auto; font-size: 12px; font-weight: 600; color: rgba(20, 40, 83, .7); }
.bt_web_c .np_navbtn { padding: 5px 8px; border-radius: 2px; background: var(--ink); color: #fff; font-size: 12px; font-weight: 600; line-height: 1; white-space: nowrap; }

.bt_web_c .c-hero { flex: none; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 14px; padding: 13px 0 11px; }
.bt_web_c .hero_copy { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.bt_web_c .np_kick { align-self: flex-start; padding: 3px 5px; border: 1px solid var(--rule2); border-radius: 2px; font-family: 'IBM Plex Mono', monospace; font-size: 12px; line-height: 1; white-space: nowrap; }
.bt_web_c .np_kick b { color: var(--blue); font-weight: 600; }
.bt_web_c .c-title .sk-s { font-size: clamp(16px, 3.6cqw, 22px); font-weight: 700; line-height: 1.07; letter-spacing: -.035em; }
.bt_web_c .c-title .sk-w { display: flex; flex-direction: column; gap: 6px; justify-content: center; }
.bt_web_c .c-title .sk-w .wbar { height: 12px; width: 92%; }
.bt_web_c .c-title .sk-w .wbar + .wbar { width: 64%; }
.bt_web_c .c-title .sk-r { font-size: 13px; line-height: 1.3; }
.bt_web_c .np_sub { display: flex; flex-direction: column; gap: 4px; }
.bt_web_c .np_sub i { display: block; height: 4px; border-radius: 1px; background: var(--tint); }
.bt_web_c .np_sub i:last-child { width: 70%; }
.bt_web_c .c-cta { justify-self: start; }
.bt_web_c .c-cta .sk { display: flex; gap: 6px; align-items: center; }
.bt_web_c .c-cta .sk-w .wbox { width: 70px; height: 24px; }
.bt_web_c .c-cta .sk-w .wbox + .wbox { width: 62px; }
.bt_web_c .np_btn { padding: 6px 9px; border-radius: 2px; background: var(--blue); color: #fff; font-size: 12px; font-weight: 600; line-height: 1; white-space: nowrap; }
.bt_web_c .np_btn2 { padding: 5px 8px; border: 1px solid var(--rule2); border-radius: 2px; font-size: 12px; font-weight: 600; line-height: 1; white-space: nowrap; }
.bt_web_c .c-media { min-height: 104px; }
.bt_web_c .c-media .sk { position: relative; border-radius: 2px; overflow: hidden; }
.bt_web_c .c-media .sk-s svg { display: block; width: 100%; height: 100%; }
.bt_web_c .c-media .sk-w svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.bt_web_c .c-media .sk-w line { stroke: rgba(20, 40, 83, .25); vector-effect: non-scaling-stroke; }
.bt_web_c .c-media .sk-r { display: grid; place-items: center; background: var(--tint); }
.bt_web_c .c-media .sk-r span { padding: 2px 5px; background: #fff; }
.bt_web_c .c-feats { flex: none; margin-bottom: 10px; }
.bt_web_c .c-feats .sk { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.bt_web_c .np_feat { display: flex; align-items: center; gap: 7px; padding: 8px; border: 1px solid var(--rule); border-radius: 2px; min-width: 0; }
.bt_web_c .np_ico { flex: none; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 2px; background: var(--paper); }
.bt_web_c .np_ico svg { width: 14px; height: 14px; fill: none; stroke: var(--blue); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.bt_web_c .np_feat b { font-size: 12px; font-weight: 700; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bt_web_c .c-feats .sk-w .wbox { display: flex; align-items: center; gap: 6px; padding: 8px; }
.bt_web_c .c-feats .sk-w .wbox::before { content: ""; flex: none; width: 20px; height: 20px; border-radius: 50%; background: var(--wire); }
.bt_web_c .c-feats .sk-w .wbox::after { content: ""; flex: 1 1 auto; height: 5px; background: var(--wire); }
.bt_web_c .c-feats .sk-r span { display: flex; align-items: center; padding: 0 2px; white-space: nowrap; overflow: hidden; }
.bt_web_c .c-band { flex: none; }
.bt_web_c .c-band .sk { display: flex; align-items: center; justify-content: space-between; padding: 10px; border-radius: 2px; }
.bt_web_c .c-band .sk-s { background: var(--ink); color: #fff; }
.bt_web_c .c-band .sk-s b { font-size: 13px; font-weight: 700; letter-spacing: -.02em; }
.bt_web_c .c-band .sk-s span { padding: 5px 8px; border-radius: 2px; background: #fff; color: var(--ink); font-size: 12px; font-weight: 600; line-height: 1; }
.bt_web_c .c-band .sk-w { border: 1px dashed rgba(20, 40, 83, .3); background: var(--paper); }
.bt_web_c .c-band .sk-w .wbar { width: 40%; }
.bt_web_c .c-band .sk-w .wbox { width: 60px; height: 20px; background: #fff; }

/* CMS field chips (Sanity) and the style selection */
.bt_web_c .fchip { position: absolute; z-index: 3; right: -2px; top: -9px; display: inline-flex; align-items: center; gap: 4px; padding: 2px 5px; border-radius: 2px; background: var(--ink); color: #fff; font: 500 12px/1 'IBM Plex Mono', monospace; white-space: nowrap; opacity: 0; pointer-events: none; }
.bt_web_c .c-title .fchip { right: auto; left: -2px; top: -22px; }
.bt_web_c .c-feats .fchip { top: -11px; }
.bt_web_c .csel { position: absolute; z-index: 3; inset: -3px; border: 1px solid var(--blue); border-radius: 2px; opacity: 0; pointer-events: none; }
.bt_web_c .csel > i { position: absolute; width: 6px; height: 6px; border: 1px solid var(--blue); background: #fff; }
.bt_web_c .csel > i:nth-child(1) { left: -3px; top: -3px; }
.bt_web_c .csel > i:nth-child(2) { right: -3px; top: -3px; }
.bt_web_c .csel > i:nth-child(3) { left: -3px; bottom: -3px; }
.bt_web_c .csel > i:nth-child(4) { right: -3px; bottom: -3px; }

/* ---------- narrow tiles ---------- */
@container wc (max-width: 560px) {
  .bt_web_c .wc_app { left: 3cqw; right: 3cqw; top: 6cqh; }
  .bt_web_c .wc_top { height: 32px; gap: 6px; padding: 0 6px; }
  .bt_web_c .wc_tab { padding: 0 5px; gap: 4px; }
  .bt_web_c .wc_tab b, .bt_web_c .wc_tab .wc_long, .bt_web_c .wc_pub { display: none; }
  .bt_web_c .wc_tab .wc_short { display: inline; }
  .bt_web_c .wc_tabs { margin: 0 0 0 auto; }
  .bt_web_c .wc_side { position: absolute; z-index: 4; left: auto; right: 14px; bottom: 10px; top: auto; width: 46%; max-width: 15rem; border: 0; background: none; }
  .bt_web_c .wc_panel { position: relative; padding: 6px; border: 1px solid var(--rule2); border-radius: 2px; background: #fff; }
  .bt_web_c .wc_nav { display: none; }
  .bt_web_c .wc_map:nth-of-type(n + 3) { display: none; }
  .bt_web_c .wc_canvas { padding: 8px 8px 0; }
  .bt_web_c .wc_dots { display: none; }
  .bt_web_c .pg { padding: 0 9px; }
  .bt_web_c .np_links, .bt_web_c .np_kick, .bt_web_c .np_sub, .bt_web_c .np_btn2, .bt_web_c .c-cta .sk-w .wbox + .wbox, .bt_web_c .c-nav .sk-r .x { display: none; }
  .bt_web_c .np_navbtn { margin-left: auto; }
  .bt_web_c .c-hero { padding: 10px 0 9px; gap: 10px; }
  .bt_web_c .c-title .sk-s { font-size: 15px; }
  .bt_web_c .c-media { min-height: 70px; }
}