/* ==========================================================================
   /request-demo/ -- the conversion landing page.

   Everything here is new to this page and prefixed .rd-. The Opportunity Mining system supplies
   the shell, the container, the section rhythm, .om-btn, .om-rating, .om-review-sites,
   .om-eyebrow and .om-card-grid; this file only carries what the two comps
   (BNTouch_Request_Demo_MLO_v9.pdf, BNTouch_Request_Demo_Enterprise_v8.pdf) add on top.

   Loaded after design-om.css and design-om-extras.css (see bnt_page_stylesheets()), so it may
   override them. Neither of those files is edited: design-om.css is generated, and
   design-om-extras.css is shared with every other OM page.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. SHELL

   Both comps drew a cut-down chrome: header with only the logo and the three actions, footer
   replaced by one address line. That was built and flagged for review, because stripping the nav
   off a landing page is a conversion move that trades away every other route into the site.

   Review said no (Yuri, 2026-09-19): this page takes the same header and footer as everywhere
   else. The block that hid .om-site-nav, .om-mega-menu, .om-menu-toggle, .om-mobile-menu and
   .om-site-footer is deleted rather than commented out -- the comps are on record in
   templates/, and a commented-out shell strip is the kind of thing that gets uncommented by
   accident. The page's own .rd-footnote address line went with it; the real footer carries that
   in the footer_brand widget.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   2. HERO
   -------------------------------------------------------------------------- */
.rd-page { background: #fff; }

/* 120px under, not 64. This page is one section: with the "What happens next" band gone the
   footer came up hard against the form card, which on a tall desktop viewport put the site's
   whole nav in view beside a form the reader had not filled in yet. */
.rd-hero { padding: 56px 0 120px; }
.rd-hero--light { background: #f7f9fc; }
.rd-hero--dark  { background: var(--navy, #042854); color: #fff; }

/* Copy column and form card. The comp's card is 45% of the container; the copy column takes
   the rest, and the card is sticky-free because the form has to stay beside its own proof. */
.rd-hero__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 520px;
    gap: 46px;
    align-items: start;
}

.rd-page .rd-hero h1 {
    margin: 0 0 26px;
    font-size: 38px;
    line-height: 1.16;
    /* 600 and the global -.01em tracking, matching .om-hero h1. At 700 and -.015em this was the
       only h1 on the site with its own weight, and read as a different typeface. */
    font-weight: 600;
}
.rd-hero--light h1 { color: var(--navy, #032d60); }

.rd-hero__lead {
    max-width: 440px;
    margin: 0 0 26px;
    font-size: 16px;
    line-height: 1.6;
    color: #c3ccd8;
}

/* The Enterprise eyebrow is an outlined pill, not the plain label .om-eyebrow draws. */
.rd-pill {
    display: inline-block;
    margin-bottom: 18px;
    padding: 7px 16px;
    border: 1px solid #6a5426;
    border-radius: 999px;
    font-size: 11.5px;
    letter-spacing: .14em;
}

/* --- Check list --- */
.rd-checks {
    list-style: none;
    margin: 0 0 30px;
    padding: 0;
    display: grid;
    gap: 14px;
}
.rd-checks li {
    position: relative;
    padding-left: 38px;
    font-size: 15.5px;
    line-height: 1.5;
}
.rd-checks li::before {
    content: "\2713";
    position: absolute;
    left: 0;
    top: 1px;
    display: flex;
    width: 22px;
    height: 22px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #f7941e;
    color: #fff;
    font-size: 12px;
    line-height: 1;
}
.rd-hero--light .rd-checks li { color: #2e3746; }
.rd-hero--dark  .rd-checks li { color: #e6ebf2; }

/* --- Trust row --- */
/* Stacked, not a two-column row: the rating, then the tenure line under it. */
.rd-proof {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    margin-bottom: 22px;
}
.rd-page .rd-proof__since {
    margin: 0;
    font-size: 13px;
    letter-spacing: .04em;
}
/* #8b95a3 measured 2.87:1 on this hero's #f7f9fc. It is the grey the old "MORTGAGE ONLY"
   caption used, which got away with it as 12px uppercase set beside a 22px number; on its own
   line it is just small grey text that has to be read. */
.rd-page .rd-hero--light .rd-proof__since { color: #5b6675; }
.rd-page .rd-hero--dark  .rd-proof__since { color: #9aa7b8; }
.rd-page .rd-proof__item { margin: 0; }
.rd-page .rd-proof__item strong {
    display: block;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.25;
}
.rd-page .rd-proof__item > span {
    display: block;
    font-size: 12px;
    letter-spacing: .07em;
    text-transform: uppercase;
}
.rd-page .rd-hero--light .rd-proof__item strong { color: var(--navy, #032d60); }
.rd-page .rd-hero--light .rd-proof__item > span { color: #8b95a3; }
.rd-page .rd-hero--dark .rd-proof__item strong { color: #fff; }
.rd-page .rd-hero--dark .rd-proof__item > span { color: #9aa7b8; }

/* .om-rating is written for the navy OM hero (24px, pale grey). Here it sits inside the trust
   row and on a light background in the MLO variant, so both are reset. */
.rd-page .rd-proof__rating { font-size: inherit; color: inherit; }
.rd-stars { letter-spacing: .04em; white-space: nowrap; }
.rd-hero--light .rd-proof__rating .rd-stars { color: var(--navy, #032d60); }
.rd-hero--dark  .rd-proof__rating .rd-stars { color: #fff; }

/* --- Award badges. .om-review-sites gives the flex row; the images need sizing. --- */
.rd-page .rd-badges {
    margin: 0;
    gap: 16px;
    justify-content: flex-start;
    height: auto;
}
.rd-badges img { display: block; width: auto; height: 62px; }


/* --------------------------------------------------------------------------
   3. FORM CARD
   -------------------------------------------------------------------------- */
.rd-form-card {
    padding: 28px 28px 26px;
    border: 1px solid #e4e9f0;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 18px 44px rgba(16, 34, 56, .09);
    color: #2e3033;
}
/* The Enterprise comp caps the card with the brand orange; on navy it is what lifts the card
   off the background. */
.rd-hero--dark .rd-form-card { border-top: 4px solid #f7941e; }

.rd-page .rd-form-card__title {
    margin: 0 0 8px;
    font-size: 22px;
    line-height: 1.25;
    font-weight: 700;
    text-align: left;
    color: var(--navy, #032d60);
}
.rd-page .rd-form-card__sub {
    margin: 0 0 18px;
    font-size: 13px;
    line-height: 1.5;
    color: #4d5764;
}

/* --- Progress indicator --- */
.rd-page .rd-progress__steps {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin: 0 0 12px;
    padding: 11px 16px;
    border-radius: 8px;
    background: #f4f6fa;
    font-size: 13.5px;
    color: #8b95a3;
}
.rd-progress__steps b { color: var(--navy, #032d60); font-weight: 700; }
.rd-progress__bar {
    height: 5px;
    border-radius: 3px;
    background: #e4e9f0;
    margin-bottom: 20px;
}
.rd-progress__bar span {
    display: block;
    width: 42%;
    height: 100%;
    border-radius: 3px;
    background: #f7941e;
}

/* --- Steps --------------------------------------------------------------
   One step at a time, once request-demo.js has set data-rd-active on the form. The attribute is
   the switch: without it -- scripting off, or the script failed -- both fieldsets render exactly
   as they did before and the form is still complete and submittable. Nothing below hides
   anything until something is there to un-hide it.

   The dashed rule is the comp's own divider. */
.rd-form[data-rd-active="1"] [data-rd-step="2"],
.rd-form[data-rd-active="2"] [data-rd-step="1"] {
    display: none;
}
/* Step 1's divider is the first thing in the card and has the progress bar directly above it,
   which reads as two rules stacked. Only the second step keeps it. */
.rd-form[data-rd-active] [data-rd-step="1"]::before { display: none; }
.rd-form[data-rd-active] [data-rd-step="1"] { padding-top: 0; }

.rd-progress__bar span { transition: width .3s ease; }
/* The divider is a pseudo-element, not the fieldset's own border: a <legend> is laid out INSIDE
   its fieldset's border box and punches a gap through it, so a real border-top would run straight
   through the "Step 1" label. */
.rd-step {
    position: relative;
    margin: 0;
    padding: 18px 0 0;
    border: 0;
    min-width: 0;
}
.rd-step::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    border-top: 1px dashed #d9dfe8;
}
.rd-page .rd-step__heading {
    margin: -4px 0 14px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #f7941e;
}

/* --- Fields --- */
.rd-page .rd-field { margin: 0 0 16px; }
.rd-field label,
.rd-teamsize legend {
    display: block;
    margin-bottom: 7px;
    padding: 0;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--navy, #032d60);
}
.rd-field input,
.rd-field select {
    width: 100%;
    height: 52px;
    padding: 0 16px;
    border: 1px solid #dde3ec;
    border-radius: 9px;
    background: #fafbfd;
    font-family: inherit;
    font-size: 16px;
    color: #142f50;
}
/* The chevron is a background image rather than the platform arrow: appearance:none strips the
   native control, and without a mark of its own the select is indistinguishable from the text
   fields above it. */
.rd-field select {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 44px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%235b6675' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    background-size: 12px 8px;
}
/* Until something is chosen, the placeholder option reads as placeholder text, not as an answer. */
.rd-field select:invalid { color: #9aa3b0; }
.rd-field input::placeholder { color: #9aa3b0; }
.rd-field input:focus,
.rd-field select:focus {
    outline: 3px solid rgba(247, 148, 30, .35);
    outline-offset: 0;
    border-color: #f7941e;
    background-color: #fff;
}

/* --- Team size pills: real radios, visually replaced by their labels. --- */
.rd-teamsize { margin: 0 0 20px; padding: 0; border: 0; }
.rd-teamsize__options { display: flex; flex-wrap: wrap; gap: 10px; }
.rd-teamsize__options input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}
.rd-teamsize__options label {
    margin: 0;
    padding: 12px 20px;
    border: 1px solid #dde3ec;
    border-radius: 9px;
    background: #fafbfd;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
    color: #2b3442;
    cursor: pointer;
}
.rd-teamsize__options input:checked + label {
    border-color: #f7941e;
    background: #fff6e9;
    color: #032d60;
}
.rd-teamsize__options input:focus-visible + label {
    outline: 3px solid #dd8210;
    outline-offset: 2px;
}

/* --- Buttons. .om-btn is a fixed 56px line-height pill with a 4px radius forced by
       shell-om.css; the comp's form buttons are full-width with a softer corner. --- */
.rd-form .om-btn.rd-btn {
    width: 100%;
    height: 56px;
    /* .om-btn is inline-flex, so the whitespace between "Continue" and its arrow is dropped. */
    gap: .45em;
    margin-bottom: 4px;
    border: 0;
    border-radius: 10px !important;
    font-family: inherit;
    font-size: 17px;
    font-weight: 700;
    cursor: pointer;
}
.rd-back {
    display: block;
    width: 100%;
    margin: 10px 0 0;
    padding: 6px;
    border: 0;
    background: transparent;
    font-family: inherit;
    font-size: 14px;
    color: #8b95a3;
    cursor: pointer;
}

/* --- Legal --- */

/* #9aa3b0 on white measured 2.55:1 -- WCAG wants 4.5 for body text, and this is the paragraph
   that carries the TCPA consent language. Fine print is the last text that should be hard to
   read: it is the part a reader is agreeing to. #5e6874 is 5.66:1 and is the colour the FAQ
   answers already use across the site. */
.rd-page .rd-consent {
    margin: 18px 0 0;
    font-size: 11.5px;
    line-height: 1.5;
    color: #5e6874;
}
.rd-page .rd-consent a { color: #4a5464; text-decoration: underline; }
.rd-page .rd-consent a:hover { color: #032d60; }


/* --------------------------------------------------------------------------
   4. NARROW LAYOUTS

   NOTE: rules that override an :nth-child selector from design-om.css (specificity 0,2,1) are
   repeated with their own :nth-child here -- a plain descendant selector inside a media query
   scores 0,1,1 and loses to it regardless of source order.
   -------------------------------------------------------------------------- */
@media (max-width: 1100px) {
    .rd-hero__inner { grid-template-columns: minmax(0, 1fr) 430px; gap: 36px; }
    .rd-page .rd-hero h1 { font-size: 33px; }
}

@media (max-width: 900px) {
    .rd-hero { padding: 40px 0 72px; }
    /* The form is the page. Above the fold on a phone it goes first. */
    .rd-hero__inner { display: flex; flex-direction: column; gap: 34px; }
    .rd-hero__copy { order: 2; }
    .rd-form-card { order: 1; }
    /* Neither comp draws a tablet. Full-bleed at 900px makes the card look like a page rather
       than a card, so it keeps roughly its desktop measure and centres. */
    .rd-hero__copy,
    .rd-form-card { width: 100%; max-width: 620px; margin-left: auto; margin-right: auto; }
    .rd-page .rd-hero h1 { font-size: 28px; }
    .rd-hero__lead { max-width: none; }

                        }

@media (max-width: 560px) {
    .rd-hero { padding: 28px 0 56px; }
    .rd-page .rd-hero h1 { font-size: 25px; line-height: 1.2; }
    .rd-checks li { font-size: 14.5px; padding-left: 32px; }
    .rd-checks li::before { width: 20px; height: 20px; font-size: 11px; }
    .rd-proof { gap: 6px; }
    .rd-page .rd-proof__item strong { font-size: 19px; }
    .rd-badges img { height: 50px; }

    .rd-form-card { padding: 22px 18px 20px; border-radius: 12px; }
    .rd-page .rd-form-card__title { font-size: 19px; }
    .rd-page .rd-progress__steps { font-size: 12.5px; gap: 7px; padding: 10px 12px; }
    .rd-field input,
    .rd-field select { height: 48px; font-size: 16px; }
    .rd-teamsize__options { gap: 8px; }
    .rd-teamsize__options label { padding: 11px 15px; font-size: 14px; }
    .rd-form .om-btn.rd-btn { height: 52px; font-size: 16px; }

}