/* Request a Demo 2026 — scoped .rd26-. Now rendered with the universal 2026
   header + footer (added in the chrome follow-up); it is no longer a
   standalone/chromeless page. */

/* ── Header — flip the universal 2026 dark/transparent chrome to white/black
   on this page only. Mirrors the identical flip already shipped for
   .blog-archive-2026 / .blog-post-2026 in main_2026.css (lines ~4040-4106);
   same rules, minus the CTA-pill block (not applicable here, see below).

   Where the dark background actually comes from: NOT the "solid dark
   header" list at main_2026.css:1584-1591 naming this template directly —
   rather, page-request-demo.php's body_class filter adds `page-2026-general`
   (alongside `request-demo-2026`) so the fixed header doesn't float
   transparently over this page's own light form panel, and that class IS
   one of the ones in the 1584-1591 list:
     .page-2026-general .header-2026 { background-color: #0C0B0A; }
   Confirmed via computed styles on the live page (backgroundColor:
   "rgb(12, 11, 10)", bodyClass includes "page-2026-general") before this
   file had any header rules.

   Specificity: `.page-2026-general .header-2026` is (0,2,0), same as
   `.request-demo-2026 .header-2026` below — so this relies on source
   order, not a specificity win, exactly like the blog precedent relies on
   source order against the very same line 1591 rule within main_2026.css
   itself. Confirmed via view-source on the live page that
   request-demo-2026-style prints after main-2026-style (inc/scripts.php
   enqueues it in a separate, later `if ($is_request_demo)` block), so this
   file's rules win the cascade without needing !important or extra
   selector weight.

   CTA: template-parts/general-2026/header.php guards `.header-cta-btn` off
   entirely on this template ($rd26_suppress_cta), so unlike the blog
   precedent there is no CTA-pill rule to add here — the element never
   renders.

   Mobile menu: #mobile-menu-2026 / .mobile-nav-list is sibling markup
   *outside* <header> (see the comment at the top of header.php), so it is
   never a descendant of .header-2026 — the blog precedent's
   `.header-2026 .mobile-nav-list a` rule is consequently dead code there
   (never matches anything) and is deliberately not copied here. The mobile
   panel already ships its own hardcoded dark background and white link
   colour in main_2026.css (~2163-2233), entirely independent of the page/
   header background, so it renders identically (and readably) on this page
   as everywhere else on the site — verified visually at 375px, not
   assumed. */
.request-demo-2026 .header-2026 {
  background: #fff;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
}
.request-demo-2026 .header-2026.scrolled {
  background: rgba(255, 255, 255, 0.78);
  -webkit-backdrop-filter: blur(14px) saturate(180%);
  backdrop-filter: blur(14px) saturate(180%);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
}
.request-demo-2026 .header-2026 .header-nav-list a,
.request-demo-2026 .header-2026.scrolled .header-nav-list a {
  color: #000;
  text-shadow: none;
}
.request-demo-2026 .header-2026 .header-nav-list a:hover {
  color: #4739C2;
}
/* Logo: force the white-on-transparent logo_2026 ACF asset to render black
   on the now-white header (otherwise invisible). */
.request-demo-2026 .header-2026 .header-logo-img,
.request-demo-2026 .header-2026.scrolled .header-logo-img {
  filter: brightness(0);
}
/* Mobile burger lines (inside <header>, unlike the mobile menu panel) */
.request-demo-2026 .header-2026 .burger-line {
  background: #000;
}

.rd26 {
  --rd26-ink: #111;
  --rd26-muted: #6b7280;
  --rd26-line: #e5e7eb;
  --rd26-radius: 24px;
  /* #site-header-2026 is position:fixed (out of flow, see main_2026.css),
     so it does not push .rd26 down on its own — without this padding-top
     the fixed header would sit on top of the split screen, and on the
     right (white) column its white nav text would be unreadable against
     the light background. padding-top clears it instead of hiding it with
     CSS. Global reset is box-sizing:border-box (main.css), so min-height
     already counts this padding — the split screen still fills exactly one
     viewport below the header, it does not add 100vh on top of it (which
     would push the footer needlessly far down / create dead scroll).
     92px = 91px measured for #site-header-2026 at 1440 (real browser
     getBoundingClientRect, not read off the stylesheet) + 1px buffer. */
  padding-top: 92px;
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  background: #fff;
  font-family: 'Montserrat', sans-serif;
}

/* Element-level colour: main.css sets a bare p{color:#d7d7d7} site-wide. */
.rd26 p,
.rd26 li {
  color: var(--rd26-ink);
  font-size: 1rem;
  line-height: 1.5;
}

.rd26-proof {
  position: relative;
  margin: 40px;
  border-radius: var(--rd26-radius);
  overflow: hidden;
  background: #2b2b2f;
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 64px 56px;
}

.rd26-proof p,
.rd26-proof li {
  color: rgba(255, 255, 255, .92);
}

.rd26-form {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  /* 48px vertical, not 64px: the live form has 7 fields (one more than the
     reference mock), so full-height content plus 64px top/bottom padding
     pushed the page past 900px tall and forced a page scroll at 1440,
     failing "no page scroll" — trimmed here and in the row/title spacing
     below so the desktop viewport fits without it, confirmed via computed
     scrollHeight. */
  padding: 48px 40px;
}

.rd26-form-inner {
  width: 100%;
  max-width: 580px;
}

@media (max-width: 900px) {
  /* Single column, form before the proof panel: with the full-length proof
     panel (logo/headline/body/trust-logos/security-badges) stacked ahead of
     it, the email field sat ~990px down — well past a 375×812 viewport,
     failing "visible without scrolling". Flex + order swaps the two
     top-level blocks so the form (short: title + 7 fields + button) renders
     first and the proof panel — the trust-building content, not needed to
     start filling out the form — follows beneath it. */
  .rd26 {
    display: flex;
    flex-direction: column;
    /* #site-header-2026 shrinks to 71px measured at both 768 and 375
       (real browser measurement) once its tablet/mobile padding kicks in —
       smaller offset than the 92px used above 900px. */
    padding-top: 72px;
  }

  .rd26-form {
    order: -1;
  }

  .rd26-proof {
    margin: 0;
    border-radius: 0;
    padding: 48px 24px;
  }

  .rd26-form {
    padding: 48px 24px;
  }
}

/* ── Proof panel ── */
.rd26-proof-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  z-index: 0;
}

.rd26-proof-inner {
  position: relative;
  z-index: 1;
  max-width: 560px;
}

.rd26-logo {
  display: inline-block;
  margin-bottom: 48px;
}

.rd26-headline {
  color: #fff;
  font-size: 2.5rem;
  line-height: 1.15;
  font-weight: 600;
  margin: 0 0 32px;
}

/* Body paragraph. Colour is set on the element, not the wrapper — main.css
   ships a bare p{color:#d7d7d7} site-wide that would otherwise win.
   Selector is `.rd26-proof .rd26-body`, not bare `.rd26-body`: two classes
   (0,2,0) beats `.rd26-proof p` below (0,1,1) outright, regardless of
   source order — no !important needed. */
.rd26-proof .rd26-body {
  color: #fff;
  font-size: 1rem;
  line-height: 1.9;
  font-weight: 300;
  margin: 0 0 40px;
  max-width: 30rem;
}

/* Hairline above the logo grid and below the badges. Low-opacity white so it
   reads consistently over both the warm and cool areas of the photo. */
.rd26-trust {
  border-top: 1px solid rgba(255, 255, 255, .18);
  padding-top: 32px;
}

/* Same cascade trap as .rd26-body above: `.rd26-rowhead` alone is (0,1,0),
   and both `.rd26 p` and `.rd26-proof p` are (0,1,1) — either one outranks
   it and the row heading loses its colour/size to the generic paragraph
   rule. Scoped under `.rd26-proof` for (0,2,0), same fix, no !important. */
.rd26-proof .rd26-rowhead {
  color: #fff;
  font-size: .875rem;
  font-weight: 500;
  margin: 0 0 28px;
}

/* Three across, two rows. Fixed columns rather than flex-wrap so the second
   row aligns with the first, as in the design. */
.rd26-logogrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 36px 24px;
  align-items: center;
  max-width: 34rem;
  margin-bottom: 36px;
}

.rd26-logogrid img {
  max-height: 26px;
  max-width: 100%;
  width: auto;
  justify-self: start;
}

.rd26-security {
  display: flex;
  align-items: center;
  gap: 12px;
  border-top: 1px solid rgba(255, 255, 255, .18);
  padding-top: 28px;
}

@media (max-width: 900px) {
  .rd26-headline {
    font-size: 1.875rem;
  }

  .rd26-logogrid {
    gap: 24px 16px;
  }

  .rd26-security {
    flex-wrap: wrap;
  }
}

/* ── Form panel ── */
.rd26-form-title {
  color: #0C0B0A;
  font-size: 2rem;
  font-weight: 400;
  line-height: 1.2;
  margin: 0 0 32px;
}

/* HubSpot embed — restyle to match the design without touching the portal.
   These are tag-level selectors (input[type=...], select, textarea), not
   HubSpot class names, so they keep matching regardless of which markup
   generation HubSpot serves this embed through — confirmed still applying
   under the current hsfc-* "Forms Component" runtime (see the block below). */
#rd26-hubspot input[type="text"],
#rd26-hubspot input[type="email"],
#rd26-hubspot input[type="tel"],
#rd26-hubspot input[type="number"],
#rd26-hubspot select,
#rd26-hubspot textarea {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid #EFEFEF;
  border-radius: 8px;
  background: #FCFCFC;
  color: #0C0B0A;
  font-family: inherit;
  font-size: .9375rem;
  line-height: 1.4;
  transition: border-color .15s ease;
  box-sizing: border-box;
}

#rd26-hubspot input::placeholder,
#rd26-hubspot textarea::placeholder {
  color: #848483;
}

#rd26-hubspot input:focus,
#rd26-hubspot select:focus,
#rd26-hubspot textarea:focus {
  outline: none;
  border-color: #4739C2;
}

/* ── HubSpot "Forms Component" (hsfc-*) markup ──
   Verified on production 2026-07-30/31: this form is served through
   HubSpot's newer Forms Component runtime, not the classic
   hs-form-field/hs-button/form-columns-2/legal-consent-container markup —
   confirmed via DevTools that none of those classic classes ever appear in
   the live DOM, so the classic-class rules that used to sit above this
   block (task 5's inert fallback) were deleted outright in task 8 rather
   than kept dead in the file. The generic input[type=...]/select/textarea
   rules above DO still apply, since they target tags HubSpot uses
   regardless of markup generation. Everything else needs the real classes
   below, confirmed via DevTools computed styles. */
#rd26-hubspot .hsfc-FieldLabel {
  display: block;
  color: #0C0B0A;
  font-size: .875rem;
  font-weight: 400;
  margin-bottom: 8px;
}

#rd26-hubspot .hsfc-FieldLabel__RequiredIndicator {
  color: #FF0000;
  margin-left: 2px;
}

#rd26-hubspot .hsfc-Button {
  width: 100%;
  padding: 18px 24px;
  border: 0;
  border-radius: 8px;
  background: #4739C2;
  color: #fff;
  font-family: inherit;
  font-size: .875rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .2s ease;
  margin-top: 16px;
}

#rd26-hubspot .hsfc-Button:hover {
  background: #3B2EA6;
}

#rd26-hubspot .hsfc-ErrorRow,
#rd26-hubspot .hsfc-ErrorAlert,
#rd26-hubspot [class*="ErrorMessage"] {
  color: #FF0000;
  font-size: .8125rem;
}

/* First Name / Last Name sit side by side in the design, but the portal's
   own form configuration renders each in its own full-width .hsfc-Row (a
   field-grouping decision that lives in the HubSpot form editor, which we
   are not touching). Reflow the two specific rows with CSS instead: make
   the row list a wrap-capable flex container, keep every row full width by
   default, and narrow only the firstname/lastname rows to sit side by side. */
/* HubSpot's Forms Component wrapper applies its own padding here via
   [data-hsfc-id="Renderer"] .hsfc-Step .hsfc-Step__Content { padding:
   var(--hsf-background__padding, ...) } — non-zero on this page since
   nothing here overrode it before. Zero it out, scoped to #rd26-hubspot
   only, so the identical form embedded in the site's demo modal
   (template-parts/modal.php, same form id 7cbda10b, wrapped in
   #default-form-wrapper not #rd26-hubspot) cannot pick this rule up.
   Verified via computed styles in a real browser (not read off this
   stylesheet): 0px here. The modal's copy is unaffected but was already
   0px beforehand too, independent of this rule — modal_2026.css carries
   its own pre-existing `.modal .hsfc-Step .hsfc-Step__Content{padding:0}`,
   confirmed via getMatchedCSSRules that it — not this file — is what
   zeroes the modal's copy. */
#rd26-hubspot .hsfc-Step__Content {
  display: flex;
  flex-wrap: wrap;
  column-gap: 16px;
  padding: 0;
}

/* .hsfc-NavigationRow (wraps the submit button) is a flex item of
   .hsfc-Step__Content too, same as .hsfc-Row, but wasn't included in the
   full-width rule above — so it shrink-wrapped to the button's own natural
   content width (~107px) and `.hsfc-Button{width:100%}` below just filled
   that 107px box instead of the form column. Confirmed via computed styles
   on production 2026-07-31. Giving it the same full-width flex-basis as
   .hsfc-Row is what actually makes the button span the column. */
#rd26-hubspot .hsfc-Row,
#rd26-hubspot .hsfc-NavigationRow {
  flex: 0 0 100%;
  max-width: 100%;
}

/* HubSpot's own row spacing (20px between fields, 40px above the button)
   is part of the same 1440 page-scroll overflow as the .rd26-form padding
   above — trimmed slightly so 7 fields + submit fit one 900px viewport. */
#rd26-hubspot .hsfc-Row {
  margin-bottom: 16px;
}

#rd26-hubspot .hsfc-NavigationRow {
  margin-top: 24px;
}

#rd26-hubspot .hsfc-Row:has(input[name$="/firstname"]),
#rd26-hubspot .hsfc-Row:has(input[name$="/lastname"]) {
  flex: 1 1 calc(50% - 8px);
  max-width: calc(50% - 8px);
}

/* Each Row lays its field out on a HubSpot-owned grid whose first column is
   a fixed 500px — fine at full row width, but it would blow out the 50%-wide
   name rows above, so collapse it to a single fluid column everywhere. */
#rd26-hubspot .hsfc-Row {
  grid-template-columns: 1fr !important;
}

#rd26-hubspot .hsfc-Row > * {
  width: 100% !important;
  max-width: 100% !important;
}