/* ============================================================
   /90-day-blueprint — page-specific additions.
   Loaded AFTER cad-demo-v2.css (the /conversational-ai/demo design system:
   PP Neue Montreal + PP Supply Mono, #3366ff, ink #04101f, mono eyebrows with a
   blue square, square bracketed buttons, light bands below a dark hero).
   Everything here is namespaced bp- so nothing collides with cad- or site CSS.
   ============================================================ */

/* ---- hero additions ---------------------------------------------------- */
.bp-hero-cta { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2.25rem; }
.bp-note { margin: 0.875rem 0 0; font-size: 0.8125rem; color: rgba(255, 255, 255, 0.55); }
.bp-note b { font-weight: 500; color: rgba(255, 255, 255, 0.8); }

/* The document cover: a white sheet in the same footprint as the demo page's
   assistant panel, with two sheets stacked behind it. */
.bp-cover-wrap { position: relative; z-index: 0; max-width: 399px; margin-inline: auto; }
.bp-cover-wrap::before, .bp-cover-wrap::after {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 12px;
  background: #e9f0ff; opacity: 0.5; transform: translate(-12px, 12px);
}
.bp-cover-wrap::after { opacity: 0.22; transform: translate(-24px, 24px); }
.bp-cover {
  position: relative; display: flex; flex-direction: column; gap: 1.125rem;
  padding: 1.625rem 1.625rem 1.375rem; min-height: 540px; width: 100%;
  border-radius: 12px; overflow: hidden; text-align: left;
  color: #0b1e3a; font-family: var(--sans);
  box-shadow: 0 30px 70px rgba(3, 12, 40, 0.45);
  background-color: #f5faff;
  background-image:
    radial-gradient(ellipse 140% 34% at 68% 102%, rgba(131, 162, 255, 0.29) 0%, rgba(131, 162, 255, 0) 100%),
    radial-gradient(ellipse 120% 54% at 132% 109%, rgba(51, 103, 255, 0.29) 0%, rgba(51, 103, 255, 0) 100%);
}
.bp-cover__top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.bp-cover__top .cad-bb-logo { height: 13px; width: auto; display: block; color: #0b1e3a; }
.bp-cover__kicker {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: var(--mono); font-size: 0.625rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--navy-1);
}
.bp-cover__kicker::before { content: ""; width: 7px; height: 7px; background: var(--bb-blue); flex: none; }
.bp-cover__title { margin: 0.75rem 0 0; font-size: 1.625rem; line-height: 1.12; font-weight: 500; letter-spacing: -0.015em; color: #0b1e3a; }
.bp-cover__title span { color: var(--bb-blue); }
.bp-cover__sub { margin: 0; font-size: 0.875rem; line-height: 1.5; color: #475467; }
.bp-cover__rule { height: 1px; background: rgba(11, 30, 58, 0.12); }
.bp-phases { display: grid; gap: 0.875rem; margin-top: auto; }
.bp-phase { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); column-gap: 0.75rem; row-gap: 0.25rem; align-items: center; }
.bp-phase__n { font-family: var(--mono); font-size: 0.625rem; letter-spacing: 0.12em; text-transform: uppercase; color: #475467; white-space: nowrap; }
.bp-phase__bar { position: relative; height: 8px; background: rgba(11, 30, 58, 0.07); }
.bp-phase__bar i { position: absolute; inset: 0 auto 0 0; background: var(--bb-blue); }
.bp-phase--1 .bp-phase__bar i { width: 34%; background: #9ab3ff; }
.bp-phase--2 .bp-phase__bar i { width: 67%; background: #668dff; }
.bp-phase--3 .bp-phase__bar i { width: 100%; }
.bp-phase__t { grid-column: 2; font-size: 0.75rem; line-height: 1.35; color: #475467; }
.bp-cover__foot { display: flex; gap: 1.25rem; padding-top: 0.875rem; border-top: 1px solid rgba(11, 30, 58, 0.12); }
.bp-cover__stat { font-family: var(--mono); font-size: 0.625rem; letter-spacing: 0.12em; text-transform: uppercase; color: #475467; display: flex; align-items: baseline; gap: 0.4rem; }
.bp-cover__stat b { font-family: var(--sans); font-weight: 500; font-size: 1.125rem; color: #0b1e3a; letter-spacing: 0; font-variant-numeric: tabular-nums; }

/* ---- section heads ------------------------------------------------------ */
.bp-head { max-width: 46rem; }
.bp-head .cad-lede { max-width: 100%; margin-top: 1.25rem; }

/* ---- the 90-day plan rail ---------------------------------------------- */
.bp-plan { margin-top: 3rem; }
.bp-plan__label { margin: 0 0 1.5rem; font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-soft); }
.bp-steps { list-style: none; margin: 0; padding: 0; position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.5rem; }
.bp-steps::before { content: ""; position: absolute; left: 0; right: 0; top: 5px; height: 1px; background: var(--grey-line); }
.bp-step { position: relative; padding-top: 1.75rem; }
.bp-step::before { content: ""; position: absolute; left: 0; top: 0; width: 11px; height: 11px; background: var(--bb-blue); }
.bp-step__n { font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--bb-blue); font-variant-numeric: tabular-nums; }
.bp-step h3 { margin: 0.5rem 0 0.625rem; font-size: 1.25rem; line-height: 1.3; color: var(--text); }
.bp-step p { margin: 0; font-size: 1rem; line-height: 1.55; color: var(--text-soft); }
.bp-stats { margin-top: 3rem; }

/* ---- entry-point cards -------------------------------------------------- */
.bp-entries { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; margin-top: 2.75rem; }
.bp-entry { display: flex; flex-direction: column; gap: 1rem; padding: 1.75rem 1.75rem 1.5rem; background: #fff; border: 1px solid var(--grey-line); }
.bp-entry__n { font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--bb-blue); }
.bp-entry h3 { margin: 0; font-size: 1.375rem; line-height: 1.25; color: var(--text); }
.bp-entry__pain { margin: 0; font-size: 1rem; line-height: 1.55; color: var(--text-soft); }
.bp-entry__crawl { border-left: 2px solid var(--bb-blue); padding-left: 1rem; }
.bp-entry__crawl b { display: block; margin-bottom: 0.375rem; font-family: var(--mono); font-weight: 400; font-size: 0.6875rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--navy-1); }
.bp-entry__crawl p { margin: 0; font-size: 1rem; line-height: 1.5; color: var(--text); }
.bp-entry__proof { margin-top: auto; padding-top: 1rem; border-top: 1px solid var(--grey-line); font-size: 0.9375rem; line-height: 1.5; color: var(--text-soft); }
.bp-entry__proof strong { color: var(--text); font-weight: 500; }
.bp-start { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1.25rem; align-items: start; max-width: 56rem; margin-top: 2.5rem; padding-top: 1.75rem; border-top: 1px solid var(--grey-line); }
.bp-start__l { font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--navy-1); padding-top: 0.35rem; white-space: nowrap; }
.bp-start p { margin: 0; font-size: 1.0625rem; line-height: 1.55; color: var(--text-soft); }
.bp-start p strong { color: var(--text); font-weight: 500; }

/* ---- KPI table ----------------------------------------------------------- */
.bp-kpi thead th { font-size: 0.75rem; font-family: var(--mono); font-weight: 400; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-soft); padding-bottom: 0.75rem; }
.bp-kpi thead th:first-child, .bp-kpi thead th:last-child { color: var(--text-soft); }
.bp-kpi tbody td { padding: 1.125rem 1.25rem 1.125rem 0; text-indent: 0; vertical-align: top; font-size: 1rem; line-height: 1.5; }
.bp-kpi tbody td:first-child { color: var(--text); font-weight: 500; }
.bp-kpi tbody td:nth-child(2) { color: var(--text-soft); }
.bp-kpi tbody td:last-child { color: var(--bb-blue); font-weight: 500; font-variant-numeric: tabular-nums; padding-right: 0; }
.bp-kpi tbody td:last-child small { display: block; font-size: 0.8125rem; font-weight: 400; color: var(--text-soft); margin-top: 0.125rem; }

/* ---- asides -------------------------------------------------------------- */
.bp-asides { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; margin-top: 3rem; }
.bp-aside { padding: 1.75rem 2rem; background: var(--grey-bg); }
.bp-aside__l { display: inline-flex; align-items: center; gap: 0.75rem; font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--navy-1); }
.bp-aside__l::before { content: ""; width: 8px; height: 8px; background: var(--bb-blue); flex: none; }
.bp-aside p { margin: 0.875rem 0 0; font-size: 1.0625rem; line-height: 1.55; color: var(--text); }
.bp-aside p strong { font-weight: 500; }
.bp-aside__src { display: block; margin-top: 0.875rem; font-size: 0.8125rem; color: var(--text-soft); }
.bp-aside--ink { background: var(--navy-0); color: #fff; }
.bp-aside--ink .bp-aside__l { color: var(--bb-blue-300); }
.bp-aside--ink p { color: #fff; }
.bp-aside--ink .bp-aside__src { color: var(--on-blue-soft); }

/* ---- close band ---------------------------------------------------------- */
.bp-close-cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; }
.cad-close .cad-btn--outline { background-color: rgba(255, 255, 255, 0.08); }

/* ---- responsive ---------------------------------------------------------- */
@media (max-width: 62rem) {
  .bp-steps, .bp-entries, .bp-asides { grid-template-columns: minmax(0, 1fr); }
  .bp-steps::before { display: none; }
  .bp-cover-wrap { margin-top: 1.5rem; }
  .bp-start { grid-template-columns: minmax(0, 1fr); gap: 0.5rem; }
}
@media (max-width: 34rem) {
  .bp-cover { min-height: 0; }
  .bp-cover__title { font-size: 1.375rem; }
  .bp-hero-cta .cad-btn, .bp-close-cta .cad-btn { width: 100%; }
  .bp-cover-wrap::after { display: none; }
}

/* The KPI table stacks into blocks on a phone rather than side-scrolling.
   The shared `table` rule sets min-width: 40rem, which is right for the demo
   page's two-column comparison but leaves this three-column table scrolling
   sideways at 390px with the benchmark — the column that matters — off screen.
   Reset to block layout and label each cell. */
@media (max-width: 48rem) {
  .bp-kpi { min-width: 0; display: block; }
  .bp-kpi thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .bp-kpi tbody, .bp-kpi tr, .bp-kpi td { display: block; }
  .bp-kpi tbody tr { padding-block: 1.25rem; border-bottom: 1px solid var(--grey-line); }
  .bp-kpi tbody tr:last-child { border-bottom: 0; }
  .bp-kpi tbody td { border: 0; padding: 0; }
  .bp-kpi tbody td:first-child { font-size: 1.125rem; }
  .bp-kpi tbody td:nth-child(2) { margin-top: 0.375rem; }
  .bp-kpi tbody td:last-child { margin-top: 0.625rem; }
  .bp-kpi tbody td:last-child small { display: inline; margin-left: 0.35rem; }
}

/* ---- OneTrust floating cookie button: white outline cookie on ink, the same
   treatment as /conversational-ai/demo and research.backbase.com ---------- */
#ot-sdk-btn-floating.ot-floating-button{width:48px;height:48px;bottom:20px;left:20px}
#ot-sdk-btn-floating .ot-floating-button__front,#ot-sdk-btn-floating .ot-floating-button__back{background-color:#071232 !important;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.7' stroke-linecap='round'%3E%3Cpath d='M21 12.3A9 9 0 1 1 11.7 3 3.3 3.3 0 0 0 15 6.5 3.3 3.3 0 0 0 18.4 10c.9 0 1.8-.3 2.6-.9.1.4 0 2.1 0 3.2z'/%3E%3Ccircle cx='9' cy='9.8' r='1' fill='white' stroke='none'/%3E%3Ccircle cx='13.2' cy='13.8' r='1' fill='white' stroke='none'/%3E%3Ccircle cx='8.3' cy='15' r='1' fill='white' stroke='none'/%3E%3C/svg%3E") !important;background-size:22px 22px !important;background-position:center !important;background-repeat:no-repeat !important;border:1px solid rgba(255,255,255,.22);border-radius:50%;box-shadow:0 8px 28px rgba(7,18,50,.28)}
#ot-sdk-btn-floating .ot-floating-button__back{background-image:none !important}
#ot-sdk-btn-floating .ot-floating-button__back svg g,#ot-sdk-btn-floating .ot-floating-button__svg-fill{fill:#fff !important}