/* ============================================================
   agentic.cad-backbase.cad-com — standalone campaign page
   ============================================================
   Built on the Backbase system already encoded in this repo:
   PP Neue Montreal + PP Supply Mono, blue #3367ff, eyebrow blue #7d9dff,
   deep ground #04101f. Art direction follows the homepage: navy-to-blue
   gradient hero, two-tone sans headline, mono uppercase controls with an
   arrow, and a WHITE assistant panel floating at the right.

   Single visual world on purpose — this is the brand's blue hero with light
   sections beneath, not a document with a theme toggle.
   ============================================================ */

:root {
  /* Brand, from lib/llm-tracker/report-html.cad-ts */
  --bb-blue: #3367ff;
  --bb-blue-300: #7d9dff;
  --bb-amber: #ffac09;

  /* Hero gradient, sampled from the homepage comp */
  --navy-0: #071232;
  --navy-1: #0d1f5c;
  --navy-2: #1b3aa8;
  --navy-3: #2f55d4;

  --ink: #04101f;
  --hair-dark: rgba(255, 255, 255, 0.14);
  --on-blue: #ffffff;
  --on-blue-soft: #c9d6f5;

  /* Light sections */
  --grey-bg: #f1f3f7;
  --grey-line: #dfe3ec;
  --text: #16233c;
  --text-soft: #55637d;

  --sans: "Ppneuemontreal", "PP Neue Montreal", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: "Ppsupplymono", "PP Supply Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --step-1: 1.0625rem;
  --step-2: 1.375rem;
  --step-3: clamp(1.75rem, 2.8vw, 2.5rem);   /* 40px at desktop, per review */
  --step-4: clamp(2.5rem, 4.5vw, 3.5rem);   /* 56px at desktop, per review */

  --gutter: clamp(1.25rem, 4.5vw, 4.5rem);
  color-scheme: dark;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--ink);
  color: var(--on-blue);
  font-family: var(--sans);
  font-size: var(--step-1);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

.cad-wrap { max-width: 82rem; margin: 0 auto; padding-inline: var(--gutter); }

/* Eyebrow: mono caps preceded by a blue square, as on the homepage. */
.cad-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--mono);
  /* 12px per the follow-up review (was 16px in the first Figma round); mono is
     reserved for nav + eyebrows and stays here. */
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  /* White on the dark sections; the square stays blue either way. */
  color: #fff;
  margin: 0;
}
.cad-eyebrow::before {
  content: "";
  width: 8px; height: 8px;
  background: var(--bb-blue);
  flex: none;
}
.cad-eyebrow--dark { color: var(--navy-1); }

h1, h2, h3 { font-family: var(--sans); font-weight: 500; text-wrap: balance; margin: 0; }

/* Controls: square, mono, uppercase, arrow. */
/* Buttons carry four corner brackets sitting FLUSH inside the edge, with no
   inset — the Backbase detail from the homepage. Drawn as eight background
   gradients (two arms per corner) rather than pseudo-elements, because a box only
   has ::before and ::after and this needs four corners; it also leaves the fill
   colour free and works identically on the filled and outline variants. */
.cad-btn {
  --arm: 13px;   /* bracket arm length */
  --hair: 1px;   /* bracket weight */
  --bracket: rgba(255, 255, 255, 0.62);

  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 54px;
  padding-inline: 1.375rem;
  border: 0;
  border-radius: 0;
  font-family: var(--mono);
  font-size: 0.8125rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  touch-action: manipulation;
  transition: background-color 140ms ease, color 140ms ease;

  background-repeat: no-repeat;
  background-image:
    linear-gradient(var(--bracket), var(--bracket)), linear-gradient(var(--bracket), var(--bracket)),
    linear-gradient(var(--bracket), var(--bracket)), linear-gradient(var(--bracket), var(--bracket)),
    linear-gradient(var(--bracket), var(--bracket)), linear-gradient(var(--bracket), var(--bracket)),
    linear-gradient(var(--bracket), var(--bracket)), linear-gradient(var(--bracket), var(--bracket));
  background-size:
    var(--arm) var(--hair), var(--hair) var(--arm),
    var(--arm) var(--hair), var(--hair) var(--arm),
    var(--arm) var(--hair), var(--hair) var(--arm),
    var(--arm) var(--hair), var(--hair) var(--arm);
  background-position:
    left top, left top,
    right top, right top,
    left bottom, left bottom,
    right bottom, right bottom;
}
.cad-btn--primary { background-color: var(--bb-blue); color: #fff; }
.cad-btn--primary:hover { background-color: #1d51e8; }

/* The secondary keeps a faint full border as well as the brackets. */
.cad-btn--outline {
  background-color: rgba(255, 255, 255, 0.07);
  color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16);
}
.cad-btn--outline:hover { background-color: rgba(255, 255, 255, 0.12); }

/* Brackets belong on the dark grounds — the hero and the closing band — where
   they read as a frame drawn on the ground around the fill. On a light band there
   is no dark ground to draw on, so they read as notches cut out of the button
   instead: the filled button there is plain. */
.cad-band--white .cad-btn, .cad-band--grey .cad-btn, .cad-panel .cad-btn { background-image: none; }

.cad-btn[disabled] { opacity: 0.45; cursor: default; }

/* ============================================================
   Top bar
   ============================================================ */
.cad-topbar {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding-block: 1.375rem;
}
.cad-topbar .cad-bb-logo { height: 17px; width: auto; display: block; color: #fff; }
.cad-topbar__sep { flex: 1; }
.cad-topbar__tag {
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--on-blue-soft);
}

/* ============================================================
   Hero — navy to blue, faint engineering grid
   ============================================================ */
.cad-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  /* The Agentic Banking hero treatment: a blue bloom rising off the bottom edge
     of a near-black field, brightest low and to the right, with a hint entering
     at the left. Stops are the designer's — #3366FF on #090909.

     Built from CSS gradients rather than the exported SVG. That export is a
     different composition — a horizontal band of rays across the middle — and no
     amount of background-position turns one into the other; it put the bright
     band straight through the copy, which is what forced the heavy scrim this
     replaces. Gradients also cost nothing: the 11 KB asset goes, and this scales
     to any viewport without resampling.

     Keeping the glow LOW is the whole point. The copy occupies the upper left,
     which is now near-black, so it needs no scrim at all — white body text
     measures far above the 4.5:1 floor on the artwork itself rather than on a
     darkened version of it. */
  background-color: #090909;
  background-image:
    radial-gradient(ellipse 38% 24% at 66% 95%, #b9cdff 0%, rgba(185, 205, 255, 0) 72%),
    radial-gradient(
      ellipse 95% 46% at 52% 108%,
      #3366ff 0%,
      rgba(51, 102, 255, 0.42) 46%,
      rgba(51, 102, 255, 0) 78%
    ),
    radial-gradient(ellipse 50% 80% at -6% 85%, rgba(51, 102, 255, 0.42) 0%, rgba(51, 102, 255, 0) 66%);
}
/* Blue overlay over the artwork (designer request): `color` blend re-hues every
   pixel toward brand blue while keeping the artwork's own light/dark composition,
   so the copy's contrast is untouched. TUNING KNOB: the opacity — higher is bluer.
   Content sits at z-index 1 and is unaffected. */
/* No scrim over the hero any more.

   Two have come and gone here, and the reason each existed matters. The first
   applied `mix-blend-mode: color` to tint a flat webp to brand. The second
   darkened the copy column because the ray artwork put its brightest band
   straight through the lede — white text measured 1.88:1 there, and pulling it
   to 4.93:1 cost more than half the artwork's luminance.

   Placing the bloom LOW removes the need for either. The copy sits on
   near-black, so the artwork stays at full strength and the text is legible on
   it directly rather than on a muted version of it. If the composition ever
   moves back up, measure before assuming this is still true. */

.cad-hero__grid {
  position: relative;
  z-index: 1;
  display: grid;
  /* The screenshot is a fixed 399px, so the copy column takes the slack — the
     steps read on one line each on a laptop. */
  grid-template-columns: minmax(0, 58fr) minmax(0, 42fr);
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: center;
  padding-block: clamp(2.5rem, 5vw, 4.5rem) clamp(3rem, 6vw, 5.5rem);
}

h1 {
  font-size: var(--step-4);
  line-height: 1.02;
  letter-spacing: -0.02em;
  margin-top: 1.5rem;
}
/* Two-tone, as on the homepage: the claim in white, the qualifier softened. */
h1 .cad-soft { color: #ffffff; }

.cad-lede {
  max-width: 42rem;
  color: #ffffff;
  margin-top: 1.5rem;
  font-size: 1.25rem;      /* all body copy 20px, per review */
  line-height: 1.5;
}

/* The steps, per the review sketch: "STEP 1" as a small eyebrow-style label
   (mono is allowed there), the description under it in PP Neue at body size. */
.cad-steps { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; gap: 1.25rem; }
.cad-steps li { display: grid; gap: 0.375rem; }
.cad-steps__n {
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bb-blue-300);
  font-variant-numeric: tabular-nums;
}
.cad-steps__t { color: #fff; font-size: 1.25rem; line-height: 1.4; }
.cad-steps__t span { color: #ffffff; }

/* Email capture */
.cad-capture { margin-top: 2rem; max-width: 33rem; }
.cad-capture__row { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.cad-field {
  flex: 1 1 15rem;
  min-width: 0;
  display: flex;
  align-items: center;
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--hair-dark);
  padding-inline: 1rem;
  transition: border-color 140ms ease, background-color 140ms ease;
}
.cad-field:focus-within { border-color: rgba(255,255,255,0.75); background: rgba(255,255,255,0.1); }
.cad-field input {
  flex: 1 1 auto; min-width: 0;
  background: none; border: 0; outline: none;
  color: #fff;
  font-family: var(--sans);
  font-size: 1rem;
  padding-block: 0.9375rem;
}
.cad-field input::placeholder { color: rgba(255,255,255,0.5); }
.cad-capture__err { min-height: 1.3em; margin: 0.625rem 0 0; font-size: 0.8125rem; color: #ffc7ba; }
.cad-capture__note { margin: 0.375rem 0 0; font-size: 0.8125rem; color: rgba(255,255,255,0.55); }

/* In flight: the label stays, a spinner joins it. */
.cad-btn.cad-is-busy { cursor: default; }
.cad-btn.cad-is-busy svg { display: none; }
.cad-btn.cad-is-busy::after {
  content: "";
  width: 14px; height: 14px;
  border: 2px solid rgba(255,255,255,0.4);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 700ms linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .cad-btn.cad-is-busy::after { animation-duration: 2s; }
}

/* Where the form was, once it has been submitted. */
/* ---- post-submit page (thank-you/index.cad-html) ----------------------------
   A navy band for the confirmation, then a WHITE band for the webinar, so the
   page reads as two things rather than one long blue field.

   Its own section rather than a reuse of .cad-hero: the hero carries the designer's
   full-bleed artwork inlined as base64, and pulling that onto a second page
   would double the site's weight for a background nobody stays to look at.

   ONE measure, declared once and shared, so the confirmation, the video heading
   and the player all keep the same two edges — and all line up with the
   header's logo. Do not duplicate this value into the two rules below; that is
   how it drifts. */
.cad-thanks,
.cad-wait {
  --measure: 44rem;
}

.cad-thanks {
  background: linear-gradient(160deg, var(--navy-0) 0%, var(--navy-1) 55%, var(--navy-2) 100%);
  color: var(--on-blue);
}
/* No min-height: the navy is sized by its content plus this padding, which puts
   the white band's top edge on screen as the scroll cue instead of a full
   viewport of blue. */
/* Centred, both the column and the text inside it. A confirmation page has one
   thing to say and nothing to scan down, so a centred composition reads as
   deliberate where a left-aligned column left dead space to its right.
   .cad-eyebrow is inline-flex, so text-align centres it and its square together. */
.cad-thanks__body {
  max-width: var(--measure);
  margin-inline: auto;
  text-align: center;
  padding-block: 5rem 5.5rem;
}
.cad-thanks__body h1 { margin-block: 0.5rem 1.25rem; }
/* .cad-lede caps itself at 42rem for the landing page's own hero. Here it has to
   give way to --measure, or it sits 32px narrower than the headline above it
   and the video below — visible as a ragged right edge once you look for it. */
.cad-thanks__body .cad-lede { max-width: 100%; }

.cad-wait {
  background: #ffffff;
  color: var(--text);
}
.cad-wait__inner {
  max-width: var(--measure);
  margin-inline: auto;
  text-align: center;
  padding-block: 5rem 6rem;
}
.cad-wait h2 {
  margin-block: 0.5rem 1.75rem;
  font-size: clamp(1.375rem, 2.4vw, 1.875rem);
  line-height: 1.2;
  color: var(--text);
}
/* Rounded and clipped so the player's own corners cannot poke out. The hairline
   is the LIGHT-section line, not --hair-dark: that one is white at 14% and
   vanishes on white. */
.cad-wait wistia-player {
  display: block;
  overflow: hidden;
  border-radius: 12px;
  border: 1px solid var(--grey-line);
  background: var(--grey-bg);
}

/* ============================================================
   The assistant panel — the designer's screenshot, natural size
   ============================================================ */
/* The scripted panel. Keeps the designer's footprint — 399px wide, 399/593 —
   so the hero layout is unchanged.

   The V3 panel's look is reproduced here rather than iframed from GTM OS. That
   is a deliberate duplication: this is a fixed mock, not a live product
   surface, and the landing page's rule is that it must never depend on a GTM OS
   PR or deploy. What it buys is large — no channel token in the page, no
   unmetered inference behind it, no CORS, no turn cap, no scroll trap. The cost
   is that a future V3 design change has to be made twice; the panel is one
   static component, not a renderer, so that is a bounded cost. */
.cad-panel-mock {
  width: 100%;
  max-width: 399px;
  aspect-ratio: 399 / 593;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 12px;
  box-shadow: 0 30px 70px rgba(3, 12, 40, 0.45);
  /* The V3 panel base and its bank-hue wash, at Backbase's own blue. */
  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%);
  font-family: var(--sans);
  color: #0b1e3a;
  text-align: left;
}

.cad-pm__head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 14px;
  height: 48px;
  border-bottom: 1px solid rgba(11, 30, 58, 0.1);
}
.cad-pm__bank { font-size: 12px; font-weight: 500; }
.cad-pm__title { font-size: 14px; }

.cad-pm__log {
  flex: 1 1 auto;
  /* NOT scrollable, on purpose: a scrollable child is what trapped touch
     gestures when this was an iframe. The script is sized to fit. */
  overflow: hidden;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 12.5px;
  line-height: 1.45;
}

/* Rows animate in on opacity and transform only. */
.cad-pm__row {
  /* DO NOT let rows shrink. .cad-pm__log is a column flex, so a row's default
     flex-shrink:1 lets an overfull log squeeze rows instead of overflowing —
     which silently cropped the 156px card faces to a 60px sliver, and, worse,
     meant pmFit's scrollHeight > clientHeight test could never fire. A flex
     container that shrinks its children never reports overflow. Rows keep their
     natural height; pmFit is what removes them. */
  flex: 0 0 auto;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 260ms ease, transform 260ms ease;
}
.cad-pm__row.cad-is-in { opacity: 1; transform: none; }

.cad-pm__user {
  align-self: flex-end;
  max-width: 78%;
  padding: 7px 14px;
  border-radius: 14px 14px 0 14px;
  background: #668dff;
  color: #fff;
}
.cad-pm__bot { max-width: 88%; }

/* The waiting state, with the same shimmer the product uses. */
.cad-pm__think {
  background-image: linear-gradient(100deg, #0b1e3a 20%, #7c8592 40%, #7c8592 55%, #0b1e3a 75%);
  background-size: 200% 100%;
  background-position: 180% 0;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: pmShimmer 1.9s linear infinite;
}
@keyframes pmShimmer { to { background-position: -20% 0; } }

/* Payment card faces, ported from the product's own .cad-cardface rather than
   approximated — same 256x156 geometry, same two gradients, same captions. The
   demo alternates a slate face then a charcoal one off a running counter, so
   the values below are lifted verbatim from demo-page-css.cad-ts. If the product's
   faces change, THIS MUST CHANGE TOO: the mock reproduces the panel, it does
   not import it. */
.cad-pm__cards {
  display: flex;
  gap: 10px;
  /* The real panel is 399px wide and a face is 256px, so the second card is
     clipped there too — you scroll the carousel to reach it. Reproducing the
     clip is faithful; reproducing the SCROLL is not, because a scrollable child
     is what trapped touch gestures before. Hidden, not auto. */
  overflow: hidden;
}
.cad-pm__card {
  position: relative;
  width: 256px;
  min-height: 156px;
  flex: 0 0 auto;
  padding: 14px 16px 16px;
  display: flex;
  flex-direction: column;
  border-radius: 10px;
  color: #fff;
  /* Numerals must not jitter between cards. */
  font-variant-numeric: tabular-nums;
}
.cad-pm__card--a { background: linear-gradient(140deg, #9aa3b0 0%, #838d9b 55%, #6f7987 100%); }
.cad-pm__card--b { background: linear-gradient(140deg, #464f5d 0%, #38404d 55%, #2b323d 100%); }

.cad-pm__cf-label { font-size: 13px; line-height: 1.2; color: rgba(255, 255, 255, 0.95); }
.cad-pm__cf-numrow { margin-top: auto; }
.cad-pm__cf-cap {
  font-family: var(--mono);
  font-size: 8.5px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.62);
}
.cad-pm__cf-num {
  margin-top: 3px;
  font-size: 15px;
  letter-spacing: 0.02em;
  color: #fff;
}
.cad-pm__cf-foot { display: flex; align-items: flex-end; gap: 14px; margin-top: 12px; }
.cad-pm__cf-exp { margin-top: 3px; font-size: 13px; font-weight: 500; color: #fff; }
.cad-pm__cf-status {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.88);
  padding-bottom: 1px;
}
.cad-pm__cf-net {
  margin-left: auto;
  font-size: 13px;
  /* 500 is the heaviest face the page ships; 700 would be synthesised and smear. */
  font-weight: 500;
  font-style: italic;
  letter-spacing: 0.02em;
  color: #fff;
}
/* Mastercard's two interlocking discs, drawn rather than fetched. */
.cad-pm__cf-net--mc { display: inline-flex; align-items: center; font-size: 0; }
.cad-pm__cf-net--mc > span { width: 17px; height: 17px; border-radius: 50%; display: block; }
.cad-pm__cf-net--mc > span:first-child { background: #eb001b; }
.cad-pm__cf-net--mc > span:last-child { background: #f79e1b; margin-left: -6px; }

.cad-pm__confirm-note { font-size: 11.5px; color: #475467; }

/* The confirm card, mirroring the product's sentence-case pills. */
.cad-pm__confirm {
  border-radius: 10px;
  padding: 12px;
  background: rgba(11, 30, 58, 0.04);
  display: grid;
  gap: 10px;
}
.cad-pm__btns { display: flex; gap: 6px; }
.cad-pm__btn {
  font-size: 11.5px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(11, 30, 58, 0.08);
}
.cad-pm__btn--go { background: #0b1e3a; color: #fff; }

.cad-pm__composer {
  flex: 0 0 auto;
  margin: 10px 12px 12px;
  height: 38px;
  padding: 0 8px 0 10px;
  display: flex;
  align-items: center;
  gap: 8px;
  border-radius: 19px;
  background: #fff;
  border: 1px solid rgba(11, 30, 58, 0.3);
  box-shadow: 0 4px 4px rgba(11, 30, 58, 0.05);
  font-size: 12.5px;
}
.cad-pm__plus, .cad-pm__send {
  width: 24px; height: 24px; flex: none;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(11, 30, 58, 0.05);
  color: #7c8592;
  font-size: 13px;
}
.cad-pm__placeholder { flex: 1 1 auto; color: #667085; }

/* Reduced motion gets the finished conversation, immediately and complete —
   never a half-played one. */
@media (prefers-reduced-motion: reduce) {
  .cad-pm__row { opacity: 1; transform: none; transition: none; }
  .cad-pm__think { animation: none; background-image: none; -webkit-text-fill-color: #7c8592; }
}

.cad-panel-shot {
  display: block;
  width: 100%;
  max-width: 399px;          /* layout size; the embedded export is 2x (797px) for Retina */
  height: auto;
  margin-inline: auto;
  /* Corners are baked into the export at 8px; matching them here keeps the
     shadow hugging the rounded shape. */
  border-radius: 8px;
  box-shadow: 0 30px 70px rgba(3, 12, 40, 0.45);
}

/* ============================================================
   Light bands below the fold
   ============================================================ */
.cad-band { padding-block: clamp(3rem, 6vw, 5rem); }
.cad-band--grey { background: var(--grey-bg); color: var(--text); }
.cad-band--white { background: #fff; color: var(--text); }
.cad-band--grey .cad-lede, .cad-band--white .cad-lede { color: var(--text-soft); }

/* Proof and the argument sit side by side, as in the brief. */
.cad-proof {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
.cad-proof__title { font-size: 1.5rem; line-height: 1.3; margin-top: 1rem; max-width: 26rem; }
.cad-proof__logo { height: 38px; width: auto; display: block; margin-top: 1.5rem; }

/* Stats on grey cards, per the Figma reference: centered number over label. */
.cad-stats {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1rem; margin-top: 2rem;
}
.cad-stat {
  background: var(--grey-bg);
  padding: 2rem 1rem;
  text-align: center;
}
.cad-stat__n {
  font-size: clamp(2rem, 3.4vw, 3rem); font-weight: 500; color: var(--text);
  letter-spacing: normal; line-height: 1;
}
.cad-stat__l {
  font-size: 0.9375rem; color: var(--text-soft);
  margin: 0.625rem auto 0; line-height: 1.45;
}

/* Testimonial, Tailwind pattern per review: no box, the quote carries itself,
   attribution row beneath. */
blockquote { margin: 2.25rem 0 0; padding: 0; color: var(--text); }
/* No italic face ships with PP Neue Montreal, and synthesised oblique on a
   geometric sans reads as a rendering fault. The rule and fill mark the quote. */
blockquote p { margin: 0; font-size: 1.25rem; line-height: 1.55; }
blockquote strong { font-weight: 500; }

h2 { font-size: var(--step-3); line-height: 1.12; margin-top: 1rem; }

/* Feature list, Tailwind pattern per review: an icon per item, not a dot. */
.cad-why { list-style: none; margin: 1.75rem 0 0; padding: 0; display: grid; gap: 1.25rem; }
.cad-why li {
  display: grid; grid-template-columns: 1.5rem 1fr; gap: 0.875rem;
  font-size: 1.25rem; line-height: 1.5;
}
.cad-why__ic { color: var(--bb-blue); margin-top: 0.25rem; }
.cad-why__ic svg { display: block; width: 22px; height: 22px; }
.cad-why b { font-weight: 500; }
.cad-why span { color: var(--text-soft); }
.cad-why b { color: var(--text); }
.cad-why__cta { margin-top: 2rem; }

/* The comparison, per review: block width (not full bleed), no fill anywhere,
   rows separated by lines only, checks on the Backbase column and crosses on the
   chatbot column. Headers follow the font rule (PP Neue; mono is nav + eyebrows
   only) — the left one in brand blue, the right one soft. */
/* Two columns, the argument left and the table right. */
.cad-compare {
  display: grid;
  grid-template-columns: minmax(0, 9fr) minmax(0, 16fr);
  gap: clamp(2rem, 4vw, 4rem);
  align-items: start;
}
.cad-tablewrap { overflow-x: auto; overscroll-behavior-x: contain; }
table {
  /* AUTO layout, deliberately: the Backbase column's copy runs longer than the
     chatbot column's, and fixed 50/50 is what folded "Connected to live data,
     policies, and workflows". Auto gives each column its content's width; the
     whole table fits single-line in 40rem, and below that the wrapper scrolls
     sideways rather than folding a row. */
  width: 100%; min-width: 40rem;
  border-collapse: collapse; table-layout: auto;
  color: var(--text);   /* quirks mode makes tables skip colour inheritance */
}
th, td { text-align: left; padding: 1rem 1rem 1rem 0; font-size: 1rem; border-bottom: 1px solid var(--grey-line); }
/* Hanging indent: if a cell ever does wrap, line 2 aligns under the text, not
   flush left of the icon. 1.875rem = icon 1.25 + its 0.625 margin. */
tbody td { padding-left: 1.875rem; text-indent: -1.875rem; }
thead th { font-size: 1.0625rem; font-weight: 500; }
thead th:first-child { color: var(--bb-blue); }
thead th:last-child { color: var(--text-soft); }
tbody td { color: var(--text); }
tbody td:last-child { color: var(--text-soft); }
/* The verdict icons */
td .cad-cmp {
  display: inline-flex; vertical-align: -0.3em;
  width: 1.25rem; height: 1.25rem; margin-right: 0.625rem;
  flex: none;
}
td .cad-cmp--yes { color: var(--bb-blue); }
td .cad-cmp--no { color: #98a2b5; }
td .cad-cmp svg { width: 100%; height: 100%; display: block; }

/* Closing band, back to brand blue */
.cad-close {
  background: linear-gradient(140deg, var(--navy-1), var(--navy-2));
  text-align: center;
  padding-block: clamp(3rem, 7vw, 5.5rem);
  color: #fff;
}
.cad-close h2 { max-width: 34rem; margin-inline: auto; }
.cad-close p { color: var(--on-blue-soft); max-width: 34rem; margin: 1rem auto 2rem; }

footer {
  background: var(--ink);
  padding-block: 2rem;
  font-size: 0.8125rem;
  color: rgba(255,255,255,0.45);
}
footer .cad-row { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; }
footer .cad-bb-logo { height: 14px; width: auto; color: rgba(255,255,255,0.5); }
footer .cad-sep { flex: 1; }

:where(a, button, input):focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.cad-band--grey :where(a, button, input):focus-visible,
.cad-band--white :where(a, button, input):focus-visible,
.cad-panel :where(a, button, input):focus-visible { outline-color: var(--bb-blue); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}
@media (max-width: 62rem) {
  .cad-hero__grid, .cad-proof, .cad-compare { grid-template-columns: minmax(0, 1fr); }
}

/* The live panel is hidden on touch devices.
   
   An iframe captures touch scrolling: a finger landing anywhere on the panel
   scrolls the CONVERSATION, and once that hits its end the gesture stops dead
   rather than passing to the page. On a phone the panel is most of the screen,
   so the page reads as broken.

   Keyed on the POINTER, not the viewport. The trap is a touch behaviour, not a
   narrow one — a desktop window dragged narrow scrolls fine with a wheel and
   would lose the demo for nothing, while a tablet is wide and traps exactly the
   same way. `hover: none` alongside it keeps a touchscreen laptop, which has a
   mouse as well, out of scope. */
/* The mock is KEPT on touch. The scroll trap was the iframe: a finger landing
   on it scrolled the conversation and then stopped dead. Nothing here scrolls —
   the log is sized to its content and the composer is inert — so a gesture
   passes straight through to the page and mobile visitors keep the demo. */
@media (max-width: 34rem) {
  .cad-stats { grid-template-columns: 1fr; }
  .cad-stat { text-align: left; border-bottom: 1px solid var(--grey-line); }
  .cad-stat:last-child { border-bottom: 0; }
}

.cad-sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Honeypot. Moved off-screen rather than display:none, because the cruder form
   fillers skip anything with display:none but happily fill this. Nobody sighted
   sees it, nothing focusable is in the tab order, and screen readers skip the
   whole wrapper via aria-hidden. */
.cad-hp {
  position: absolute; left: -9999px; top: auto;
  width: 1px; height: 1px; overflow: hidden;
}



/* ── native Webflow form, styled to match the LP capture row ───────────────
   The button reproduces .cad-btn exactly, including the corner brackets:
   they are painted with background-image gradients, which apply fine to an
   <input type=submit> where pseudo-element ticks cannot. */
#cad-form-slot { margin-top: 2rem; max-width: 33rem; }
#cad-form-slot .w-form { margin: 0; }
#cad-form-slot form { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: stretch; }
#cad-form-slot input[type='email'],
#cad-form-slot input[type='text'] {
  flex: 1 1 15rem; min-width: 0;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.28);
  color: #fff; font-family: var(--sans); font-size: 1rem;
  min-height: 54px; height: auto;
  padding: 0 1rem; border-radius: 0; margin: 0;
}
#cad-form-slot input:focus { border-color: rgba(255,255,255,0.6); outline: none; }
#cad-form-slot input::placeholder { color: rgba(255,255,255,0.5); }
#cad-form-slot input[type='submit'], #cad-form-slot .w-button {
  --arm: 13px;
  --hair: 1px;
  --bracket: rgba(255, 255, 255, 0.62);
  background-color: #3366ff; color: #fff; border: 0; border-radius: 0; cursor: pointer;
  font-family: var(--mono); font-size: 0.8125rem; text-transform: uppercase;
  letter-spacing: 0.12em; min-height: 54px; padding: 0 1.375rem; margin: 0;
  white-space: nowrap; touch-action: manipulation;
  transition: background-color 140ms ease;
  background-repeat: no-repeat;
  background-image:
    linear-gradient(var(--bracket), var(--bracket)), linear-gradient(var(--bracket), var(--bracket)),
    linear-gradient(var(--bracket), var(--bracket)), linear-gradient(var(--bracket), var(--bracket)),
    linear-gradient(var(--bracket), var(--bracket)), linear-gradient(var(--bracket), var(--bracket)),
    linear-gradient(var(--bracket), var(--bracket)), linear-gradient(var(--bracket), var(--bracket));
  background-size:
    var(--arm) var(--hair), var(--hair) var(--arm),
    var(--arm) var(--hair), var(--hair) var(--arm),
    var(--arm) var(--hair), var(--hair) var(--arm),
    var(--arm) var(--hair), var(--hair) var(--arm);
  background-position:
    left top, left top,
    right top, right top,
    left bottom, left bottom,
    right bottom, right bottom;
}
#cad-form-slot input[type='submit']:hover { background-color: #2b58e0; }
#cad-form-slot .w-form-done { background: rgba(51,102,255,0.15); border: 1px solid rgba(51,102,255,0.4); color: #fff; font-family: var(--sans); padding: 12px; }
#cad-form-slot .w-form-fail { background: rgba(220,60,60,0.15); border: 1px solid rgba(220,60,60,0.4); color: #ffd7d7; font-family: var(--sans); padding: 10px 12px; margin-top: 8px; }
body > .w-form[data-cad-unmoved='true'] { display: none; }