/* ============================================================
   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. */
  color: #fff;
  margin: 0;
}
/* No blue square before the label (Tim, 2026-09-16). The `gap` above is left
   in place deliberately and now does nothing: an eyebrow has a single child,
   so gap has nothing to space — and keeping it means restoring the square is
   one rule rather than two. Note /90-day-blueprint still loads cad-demo-v2.css
   and keeps its squares; this file is the demo page only. */
.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 HERO DEMO — Tim's real embed, not a replica
   ============================================================
   This slot used to hold a hand-built mock of the assistant. It was a good
   replica and it was still a replica: every design change had to be made twice,
   in the product and here, and the two drifted. Tim asked for 1:1 (2026-09-16),
   and the only way to be 1:1 with the personalised demos is to run the same
   bundle they run — so the mock is gone and this is the real thing.

   ANIMATED, NOT INTERACTIVE, which is the whole trick. The bundle ships an
   automatic tour: omitting `data-auto-advance="false"` turns it on, and it
   cycles the scenarios by itself, switching Customer / Employee / Banking OS as
   it goes. Measured over 7.5 minutes: a card-limit increase through to "Done",
   then the €240 dispute through to case #4821 and a temporary credit, then the
   savings flow — two full resets, no help needed. So there is no loop code
   here, and nothing to keep in sync.

   `pointer-events: none` is what keeps it that way, and it is load-bearing
   rather than cosmetic: the bundle stops the tour the moment a visitor
   interacts, so a single stray hover on a live hero would freeze the animation
   mid-sentence for the rest of that visit. The demo the visitor can actually
   use is the one the form gives them.

   Per the package's INSTALL: up to 500px wide, a black surrounding section,
   and no fixed wrapper height or clipping — the perspective controls sit BELOW
   the 500 x 538.46 canvas and get cropped by an overflow rule. The hero already
   provides the dark ground.

   The bundle pauses itself when offscreen or hidden, so it costs nothing below
   the fold. Its voice runtime is a separate 2.1MB WASM fetched only when voice
   mode opens — which, with pointer events off, is never. */
.cad-hero-demo {
  width: 100%;
  max-width: 500px;
  margin-inline: auto;
  /* See above: this is what stops a hover from ending the tour. */
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
}

.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; }