/* ===========================================================================
   RD Health Services - redesign styles
   ===========================================================================

   Everything added in the 2026 redesign, in one file. Loaded on every page
   after css/style.css by rdhs_public_styles() (includes/rdhs-public.php),
   so it can override the theme and Beaver Builder's layout CSS. When the
   redesign is merged, append this file to the end of css/style.css as it is.

   Keep the section order. Shared sections come before page sections, and a
   few page rules only win because they come later at equal weight.

   Contents
     1.  Settings (colour tokens)
     2.  Site header
     3.  Site footer
     4.  Shared components
         4.1  Eyebrows, links, buttons, phone call-to-action
         4.2  Saved-row module components
         4.3  Card title size
         4.4  Layout helpers
         4.5  FAQ accordion and FAQ box
         4.6  Form controls
         4.7  Tables in articles and legal pages
         4.8  Long URLs in body copy
     5.  Home
     6.  Reviews
     7.  How It Works
     8.  Contact Us
     9.  Blog
     10. Single post
     11. Legal pages (Terms of Service, Privacy Policy)
     12. Log in and Lost password
     13. Pricing
     14. Payment page (/select-package/?slots=N)
     15. Registration (/register/)
     16. 404 page

   How the rules are written
   - Page rules hang off body.rdhs-public, which rdhs_public_body_class()
     adds to the public pages only, so dashboards, forms and PDFs are untouched.
   - Header, footer, saved-row components and the Pricing, Payment and
     Registration sections key off their own rdhs-* classes instead, because
     they have to work wherever that markup appears.
   - Beaver Builder node ids (.fl-node-r1b1 and friends) are how Beaver targets
     modules, so they are used here too. They stay stable unless a module is
     deleted and re-added in the builder.
   - Some Beaver values are inline style attributes that no stylesheet can
     outrank; the rules that override them use !important and say why.
   =========================================================================== */


/* ===========================================================================
   1.  SETTINGS
   =========================================================================== */


:root {
    /* CTA green lifted from the TWD site's form button (twdaz theme,
       css/style.css: .gform_footer .gform_button). */
    --rdhs-green: #2d7a60;
    --rdhs-green-dark: #24624d;
    --rdhs-green-border: #256450;

    /* The blue in the R|D logo mark. Already the site's link colour. */
    --rdhs-logo-blue: #2185c5;

    /* Eyebrows move off gold to a neutral dark grey. */
    --rdhs-eyebrow: #222222;
}


/* ===========================================================================
   2.  SITE HEADER
   =========================================================================== */


/* ---- Free Trial pill -------------------------------------------------------
   Was the lime #8fc757 set in style.css. Now TWD's deeper green.
   The theme rule it replaces is `.header .fl-menu .menu>li.free-trial-menu a`,
   same weight, so this only wins because this file is enqueued after
   style.css — keep that dependency in rdhs-public.php intact. */
.header .fl-menu .menu > li.free-trial-menu > a,
.rdhs-header .fl-menu .menu > li.free-trial-menu > a {
    background: var(--rdhs-green);
    border: 1px solid var(--rdhs-green-border);
    color: #ffffff;
}

.header .fl-menu .menu > li.free-trial-menu > a:hover,
.header .fl-menu .menu > li.free-trial-menu > a:focus,
.rdhs-header .fl-menu .menu > li.free-trial-menu > a:hover,
.rdhs-header .fl-menu .menu > li.free-trial-menu > a:focus {
    background: var(--rdhs-green-dark);
    border-color: var(--rdhs-green-dark);
    color: #ffffff;
}

.home-free-guide-section h2 a {
    text-decoration: none;
}

.contact-us-sidebar-box-section .rdhs-callout-chip .fl-callout-text p {
    line-height: 28px;
}
.contact-us-sidebar-box-section .rdhs-callout-chip .fl-callout-text p:last-child {
    padding-bottom: 0 !important;
}


/* ---- Logo size (client, Video 1, 0:38) ------------------------------------
   "Reduce the logo, if needed, to balance the menu at all resolutions -
   1024 should work." At 300px the logo left the menu 30-34px from the right
   edge at 1024 and 1200. Desktop only: below 992px the menu is a hamburger and
   style.css already sizes the logo for it. Covers both headers - the home
   page's own row (.rdhs-header) and the site header template (.header). */

@media (min-width: 1200px) {
    .rdhs-header .rdhs-header-logo img,
    .header .header-left img {
        max-width: 250px;
    }
}

@media (min-width: 992px) and (max-width: 1199px) {
    .rdhs-header .rdhs-header-logo img,
    .header .header-left img {
        max-width: 220px;
    }
}


/* ---- Inner header on phones: hamburger position ---------------------------
   The inner-page header (template 98) now has the home header's height via its
   Beaver row settings. On phones its hamburger still had 28px vertical padding
   - 78px tall in a 67px header, so it sat 6px lower than on the home page, where
   the toggle has 22px/16px. That 28px is set with !important in style.css
   (.header-right .fl-menu-mobile-toggle.hamburger, max-width 991px), so only a
   stronger !important can bring it back to 22px. */
@media (max-width: 767px) {
    .header .header-right .fl-menu-mobile-toggle.hamburger {
        padding-bottom: 22px !important;
        padding-left: 16px;
        padding-right: 16px;
        padding-top: 22px !important;
    }
}


/* ---- Submenu (My Account > Log Out) ---------------------------------------
   Only logged-in visitors see it. The two headers used to draw it differently:
   the home header (.rdhs-header) had a solid logo-blue box with white links and
   a pointer arrow from style.css, while the inner header (.header, template 98)
   fell back to Beaver's plain white box with a grey shadow. Both now share one
   design: a square-cornered white card with the site border and a soft navy
   shadow, an arrow joining it to "My Account", navy links and a light tint on
   hover.
   `.fl-row.<header> .fl-menu .menu > li > ul.sub-menu` outranks style.css's
   `.rdhs-header .fl-menu .menu>li ul.sub-menu` and Beaver's per-node
   `.fl-node-… .fl-menu .sub-menu`, which is printed later in the page. */
.fl-row.header .fl-menu .menu > li > ul.sub-menu,
.fl-row.rdhs-header .fl-menu .menu > li > ul.sub-menu {
    background: #ffffff;
    border: 1px solid var(--fl-global-border, #dbe4f0);
    border-radius: 0;
    box-shadow: 0 24px 48px -28px rgba(18, 48, 92, 0.35);
    padding: 0;
    z-index: 1000;
}

/* style.css draws a blue arrow with ::after on the home header; the desktop
   block below replaces it, and phones get none. */
.fl-row.rdhs-header .fl-menu .menu > li > ul.sub-menu::after {
    content: none;
}

body.single-post .rdhs-post-body .fl-module-fl-post-content thead th {
    min-width: 185px;
}
body.single-post .rdhs-post-body .fl-module-fl-post-content tbody td:first-child {
    white-space: normal !important;
    min-width: 200px;
}


/* Desktop position: the card opens left-aligned under "My Account", a short
   step below the words themselves rather than below the header's bottom line.
   Beaver right-aligns it (.fl-menu-submenu-right) whenever it guesses the card
   might run off screen, so left and right are both restated.
   The two headers need different offsets because their links are padded
   differently: measured at 992-1920, the text ends 39px above the item's bottom
   edge on the home header (34px link padding) and 10px above it on the inner
   header. Both offsets put the card's top 16px below the text.
   Width: "My Account" is the last item, so the card has little room to its
   right - 117px at 992, 137px at 1200. It keeps its natural width (about 105px)
   below 1200 and widens where there is space. */
@media (min-width: 992px) {
    .fl-row.header .fl-menu .menu > li.fl-has-submenu > ul.sub-menu,
    .fl-row.rdhs-header .fl-menu .menu > li.fl-has-submenu > ul.sub-menu {
        left: 0;
        min-width: 0;
        right: auto;
    }

    .fl-row.rdhs-header .fl-menu .menu > li.fl-has-submenu > ul.sub-menu {
        top: calc(100% - 23px);
    }

    .fl-row.header .fl-menu .menu > li.fl-has-submenu > ul.sub-menu {
        top: calc(100% + 6px);
    }

    /* The arrow: a white square turned 45deg, bordered on its two top sides,
       half above the card. It paints over the card's top border, so the card
       and the arrow read as one outline. Centred under "My Account". */
    .fl-row.header .fl-menu .menu > li > ul.sub-menu::after,
    .fl-row.rdhs-header .fl-menu .menu > li > ul.sub-menu::after {
        background: #ffffff;
        border-color: var(--fl-global-border, #dbe4f0);
        border-style: solid;
        border-width: 1px 0 0 1px;
        content: "";
        height: 12px;
        left: 44px;
        position: absolute;
        top: -7px;
        transform: rotate(45deg);
        transition: background-color 0.15s ease;
        width: 12px;
    }

    /* The card has no padding, so the first link's hover tint runs up to the
       top border. The arrow takes the same tint, or it would sit on top of it
       as a separate white diamond. */
    .fl-row.header .fl-menu .menu > li > ul.sub-menu:has(> li:first-child > a:hover)::after,
    .fl-row.header .fl-menu .menu > li > ul.sub-menu:has(> li:first-child > a:focus-visible)::after,
    .fl-row.rdhs-header .fl-menu .menu > li > ul.sub-menu:has(> li:first-child > a:hover)::after,
    .fl-row.rdhs-header .fl-menu .menu > li > ul.sub-menu:has(> li:first-child > a:focus-visible)::after {
        background: var(--fl-global-tint, #e6eef8);
    }

    /* "My Account" keeps its hover colour while the pointer is in its
       submenu, so the open card still reads as belonging to it. */
    .fl-row.header .fl-menu .menu > li.fl-has-submenu:hover > .fl-has-submenu-container > a,
    .fl-row.header .fl-menu .menu > li.fl-has-submenu.focus > .fl-has-submenu-container > a,
    .fl-row.rdhs-header .fl-menu .menu > li.fl-has-submenu:hover > .fl-has-submenu-container > a,
    .fl-row.rdhs-header .fl-menu .menu > li.fl-has-submenu.focus > .fl-has-submenu-container > a {
        color: var(--fl-global-navy-dark, #122c4d);
    }

    /* An invisible strip over the gap between "My Account" and the card, so
       the pointer can move down into the card without it closing. */
    .fl-row.header .fl-menu .menu > li > ul.sub-menu::before,
    .fl-row.rdhs-header .fl-menu .menu > li > ul.sub-menu::before {
        content: "";
        height: 20px;
        left: 0;
        position: absolute;
        right: 0;
        top: -20px;
    }
}

@media (min-width: 1200px) {
    .fl-row.header .fl-menu .menu > li.fl-has-submenu > ul.sub-menu,
    .fl-row.rdhs-header .fl-menu .menu > li.fl-has-submenu > ul.sub-menu {
        min-width: 120px;
    }
}

@media (min-width: 1300px) {
    .fl-row.header .fl-menu .menu > li.fl-has-submenu > ul.sub-menu,
    .fl-row.rdhs-header .fl-menu .menu > li.fl-has-submenu > ul.sub-menu {
        min-width: 180px;
    }
}

.fl-row.header .fl-menu .menu > li > ul.sub-menu > li > a,
.fl-row.rdhs-header .fl-menu .menu > li > ul.sub-menu > li > a {
    border-radius: 0;
    color: var(--fl-global-navy, #1b3a63);
    display: block;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;
    padding: 10px 14px;
    text-decoration: none;
    transition: background-color 0.15s ease, color 0.15s ease;
    white-space: nowrap;
}

/* Hover and keyboard focus: the site's tint (#e6eef8). The lighter #f3f6fb
   used before was 1.1:1 against the white card and hard to see. */
.fl-row.header .fl-menu .menu > li > ul.sub-menu > li > a:hover,
.fl-row.header .fl-menu .menu > li > ul.sub-menu > li > a:focus-visible,
.fl-row.rdhs-header .fl-menu .menu > li > ul.sub-menu > li > a:hover,
.fl-row.rdhs-header .fl-menu .menu > li > ul.sub-menu > li > a:focus-visible {
    background: var(--fl-global-tint, #e6eef8);
    color: var(--fl-global-navy-dark, #122c4d);
}

/* Phones and tablets: the menu is a hamburger list, so the submenu becomes an
   indented block inside it rather than a floating card. */
@media (max-width: 991px) {
    .fl-row.header .fl-menu .menu > li > ul.sub-menu,
    .fl-row.rdhs-header .fl-menu .menu > li > ul.sub-menu {
        background: var(--fl-global-light-bg, #f3f6fb);
        border: 0;
        border-radius: 0;
        box-shadow: none;
        min-width: 0;
        padding: 4px 0;
    }

    .fl-row.header .fl-menu .menu > li > ul.sub-menu > li,
    .fl-row.rdhs-header .fl-menu .menu > li > ul.sub-menu > li {
        border-bottom: 0;
    }

    .fl-row.header .fl-menu .menu > li > ul.sub-menu > li > a,
    .fl-row.rdhs-header .fl-menu .menu > li > ul.sub-menu > li > a {
        border-radius: 0;
        font-size: 16px;
        padding: 12px 20px 12px 36px;
    }
}


/* ---- Active menu item ------------------------------------------------------
   Handled in css/style.css, in the RDHS-REDESIGN-NAV block, because the rule it
   replaces lives there and outranks anything this file could reasonably say:
   `.fl-builder-content-98 .fl-row.header .fl-menu .current-menu-item > a` is
   five classes deep. Keeping both halves of that decision in one place beats
   duplicating it here at a higher weight. */


/* ---- Scroll animations, safety net -----------------------------------------
   The home page fades its sections in as you scroll (client feedback 1.5,
   Beaver Builder's own "fade up"). Beaver hides every animated node with an
   inline `opacity: 0` and only reveals it when its script scrolls it into view,
   so the page would be blank for anyone whose JavaScript never runs. Beaver
   drops the `fl-no-js` body class as soon as its script loads, so keying off
   that class shows everything when it does not.
   The second rule is for visitors who ask their system for less motion: they
   get the page, without anything moving. */
body.fl-no-js .fl-animation:not(.fl-animated) {
    opacity: 1 !important;
}

@media (prefers-reduced-motion: reduce) {
    .fl-animation:not(.fl-animated) {
        opacity: 1 !important;
    }

    .fl-animated {
        animation: none !important;
    }
}


/* ===========================================================================
   3.  SITE FOOTER
   =========================================================================== */


/* Desktop only: below 768px style.css stacks the links as full-width rows
   divided by top borders, and a left border there drew a stray vertical line
   down the side of the stack. */
@media (min-width: 768px) {
    .footer .footer-links .menu li {
        border-left: 1px solid #9fb3cc !important;
    }
}

/* "Web design by HireAWiz" (client, Video 1, 5:03). Its own Text Editor
   module after the footer menu. The divider is drawn on the paragraph, at the
   menu's 14px line height and 14px spacing, so it matches the dividers between
   the menu items; the menu module's 15px right margin is dropped when the
   credit follows it, or the gap before the divider is three times the rest. */
.footer .fl-module.footer-links:has(+ .rdhs-credit) > .fl-module-content {
    margin-right: 0;
}

.footer .copyright .fl-module.rdhs-credit,
.footer .copyright .fl-module.rdhs-credit > .fl-module-content {
    margin: 0;
}

.footer .rdhs-credit p {
    border-left: 1px solid #9fb3cc;
    display: inline-block;
    line-height: 14px;
    padding-left: 14px;
}

.footer .rdhs-credit a {
    color: #ffffff;
    text-decoration: none;
}

.footer .rdhs-credit a:hover,
.footer .rdhs-credit a:focus {
    color: #ffffff !important;
    text-decoration: underline;
}

@media (max-width: 767px) {
    .footer .copyright .fl-module.rdhs-credit {
        display: block;
        margin: 12px 0 0;
    }

    .footer .rdhs-credit p {
        border-left: 0;
        line-height: inherit;
        padding-left: 0;
    }
}


/* ===========================================================================
   4.  SHARED COMPONENTS
   =========================================================================== */


/* ===========================================================================
   4.1  Eyebrows, links, buttons, phone call-to-action
   =========================================================================== */


/* ---- Eyebrows --------------------------------------------------------------
   Every kicker above a heading is an h6 Heading module, gold (#8f6410) and
   uppercased by the global h6 setting. Only the colour changes here — a neutral
   dark grey. The uppercasing, size and tracking are Beaver's and stay Beaver's.

   The Themer layouts (single post) nest the h6 one level deeper inside the
   module and colour the inner .fl-heading-text span rather than the tag, so
   both shapes and the span are listed. */
body.rdhs-public .fl-builder-content h6.fl-module-heading,
body.rdhs-public .fl-builder-content h6.fl-module-heading a,
body.rdhs-public .fl-builder-content .fl-module-heading h6.fl-heading,
body.rdhs-public .fl-builder-content .fl-module-heading h6.fl-heading a,
body.rdhs-public .fl-builder-content .fl-module-heading h6.fl-heading .fl-heading-text {
    color: var(--rdhs-eyebrow);
}

/* The reviews hero eyebrow carries its own BB typography block, so it needs
   the same treatment stated against its node. */
body.rdhs-public .fl-node-rv1m1.fl-module-heading,
body.rdhs-public .fl-node-rv1m1.fl-module-heading :where(a, q, p, span) {
    color: var(--rdhs-eyebrow);
}

/* Eyebrows on navy panels, named by node, for the pages that still have the
   original hand-built modules: "Featured review" on Reviews and "At a glance"
   on HIPAA.
   "With RD Health Services" on Pricing (h6.fl-node-pr3l2) was in this list too,
   until that card stopped being navy (20 Sep 2026, client feedback 2.5). Its
   colour is now the navy set on the module itself, and listing it here would
   out-rank that and leave the label nearly invisible on the pale card. */
body.rdhs-public .fl-builder-content :is(h6.fl-node-rv3m1, h6.fl-node-hp1m4).fl-module-heading,
body.rdhs-public .fl-builder-content :is(h6.fl-node-rv3m1, h6.fl-node-hp1m4).fl-module-heading :where(a, q, p, span) {
    color: #c9d8ec;
}

/* Eyebrows sitting on a navy panel, where dark grey would be invisible. Matched
   on the column's class rather than the heading's node id, so it keeps working
   when the row is rebuilt from a Saved Row and the node ids change. */
body.rdhs-public .fl-builder-content :is(.rdhs-featured-left, .rdhs-panel-dark, .rdhs-contact-panel) h6.fl-module-heading,
body.rdhs-public .fl-builder-content :is(.rdhs-featured-left, .rdhs-panel-dark, .rdhs-contact-panel) .fl-module-heading h6.fl-heading,
body.rdhs-public .fl-builder-content :is(.rdhs-featured-left, .rdhs-panel-dark, .rdhs-contact-panel) .fl-module-heading h6.fl-heading .fl-heading-text {
    color: #c9d8ec;
}

/* Two more kickers are plain paragraphs rather than h6 modules — the "Part 1 ·
   4 min" line above each tutorial and the date above each blog card. The blog
   date sits in its own span, and the Posts module colours both the wrapper and
   the span through four-class selectors, so this has to reach the span too and
   carry the extra weight to get there. */
body.rdhs-public .rdhs-steps .rdhs-vid-meta,
body.rdhs-public .fl-builder-content .rdhs-articles .fl-post-grid-meta,
body.rdhs-public .fl-builder-content .rdhs-articles .fl-post-grid-meta span,
body.rdhs-public .fl-builder-content .rdhs-articles .fl-post-grid-meta a {
    color: var(--rdhs-eyebrow);
}


/* ---- Inline link underlines ------------------------------------------------
   "See How It Works →", "See a completed plan →" and similar are rich-text
   links carrying an inline `border-bottom: 2px solid #e8a53a`. Inline styles
   outrank stylesheets, hence !important — there is no other way to reach them
   short of editing each module's HTML in the builder. */
body.rdhs-public .fl-rich-text a[style*="border-bottom"] {
    border-bottom-color: var(--rdhs-logo-blue) !important;
}

body.rdhs-public .fl-rich-text a[style*="border-bottom"]:hover {
    border-bottom-color: #1a6ba0 !important;
}


/* ---- Buttons ---------------------------------------------------------------
   The gold fill reads as generic and is dropped. Two levels remain:

     primary   solid navy, white text
     secondary light-blue fill, navy text

   inverted on the dark navy CTA rows so they stay legible. BB emits its button
   colours through long selector chains that repeat the node id up to four
   times; matching that with specificity alone makes these rules unreadable, so
   the colour properties are forced. Geometry (radius, padding) is left to BB. */

/* Primary — on light rows. */
body.rdhs-public .fl-node-r1b1 a.fl-button,
body.rdhs-public .fl-node-r10t a.fl-button,
body.rdhs-public .fl-node-hw2btn a.fl-button {
    background: #1b3a63 !important;
    border-color: #1b3a63 !important;
    color: #ffffff !important;
}

body.rdhs-public .fl-node-r1b1 a.fl-button *,
body.rdhs-public .fl-node-r10t a.fl-button *,
body.rdhs-public .fl-node-hw2btn a.fl-button * {
    color: #ffffff !important;
}

body.rdhs-public .fl-node-r1b1 a.fl-button:hover,
body.rdhs-public .fl-node-r1b1 a.fl-button:focus,
body.rdhs-public .fl-node-r10t a.fl-button:hover,
body.rdhs-public .fl-node-r10t a.fl-button:focus,
body.rdhs-public .fl-node-hw2btn a.fl-button:hover,
body.rdhs-public .fl-node-hw2btn a.fl-button:focus {
    background: #122c4d !important;
    border-color: #122c4d !important;
}

/* The hover text colour has to be restated too. Beaver still carries the dark
   ink these buttons used when they were gold, on a `:hover *` selector — with
   the fill now navy that left the label at 1.03:1 against it, i.e. invisible. */
body.rdhs-public .fl-node-r1b1 a.fl-button:hover,
body.rdhs-public .fl-node-r1b1 a.fl-button:hover *,
body.rdhs-public .fl-node-r1b1 a.fl-button:focus,
body.rdhs-public .fl-node-r1b1 a.fl-button:focus *,
body.rdhs-public .fl-node-r10t a.fl-button:hover,
body.rdhs-public .fl-node-r10t a.fl-button:hover *,
body.rdhs-public .fl-node-r10t a.fl-button:focus,
body.rdhs-public .fl-node-r10t a.fl-button:focus *,
body.rdhs-public .fl-node-hw2btn a.fl-button:hover,
body.rdhs-public .fl-node-hw2btn a.fl-button:hover *,
body.rdhs-public .fl-node-hw2btn a.fl-button:focus,
body.rdhs-public .fl-node-hw2btn a.fl-button:focus * {
    color: #ffffff !important;
}

/* Primary — on the dark navy CTA rows, where navy-on-navy would vanish. */
body.rdhs-public .fl-node-r12b1 a.fl-button,
body.rdhs-public .fl-node-hw5b1 a.fl-button,
body.rdhs-public .fl-node-rv4b1 a.fl-button,
body.rdhs-public .fl-node-pr5b1 a.fl-button,
body.rdhs-public .fl-node-hp4b1 a.fl-button {
    background: #ffffff !important;
    border-color: #ffffff !important;
    color: #1b3a63 !important;
}

body.rdhs-public .fl-node-r12b1 a.fl-button *,
body.rdhs-public .fl-node-hw5b1 a.fl-button *,
body.rdhs-public .fl-node-rv4b1 a.fl-button *,
body.rdhs-public .fl-node-pr5b1 a.fl-button *,
body.rdhs-public .fl-node-hp4b1 a.fl-button * {
    color: #1b3a63 !important;
}

body.rdhs-public .fl-node-r12b1 a.fl-button:hover,
body.rdhs-public .fl-node-r12b1 a.fl-button:focus,
body.rdhs-public .fl-node-hw5b1 a.fl-button:hover,
body.rdhs-public .fl-node-hw5b1 a.fl-button:focus,
body.rdhs-public .fl-node-rv4b1 a.fl-button:hover,
body.rdhs-public .fl-node-rv4b1 a.fl-button:focus,
body.rdhs-public .fl-node-pr5b1 a.fl-button:hover,
body.rdhs-public .fl-node-pr5b1 a.fl-button:focus,
body.rdhs-public .fl-node-hp4b1 a.fl-button:hover,
body.rdhs-public .fl-node-hp4b1 a.fl-button:focus {
    background: #e6eef8 !important;
    border-color: #e6eef8 !important;
}

/* No secondary treatment. The white/outline buttons (See a Completed Service
   Plan, View All Reviews, Watch the Full Walkthrough, See How It Works) keep
   whatever Beaver Builder gives them — removed at the user's request. */


/* ---- Phone CTA -------------------------------------------------------------
   "Call (623) 300-5581" was a second solid button competing with Start Free
   Trial. It becomes a plain underlined link sitting next to it. Matching on
   href keeps this working wherever a phone CTA is added later.

   The leading "Or " is copy, not styling — see the Beaver Builder notes handed
   over with this change.

   The Pricing page's "Larger homes & groups" band is excluded: its Call button
   is meant to look like a button, and its colours are the module's own settings
   (23 Sep). Anything inside .rdhs-large-homes keeps what Beaver gives it. */
body.rdhs-public a.fl-button[href^="tel:"]:not(.rdhs-large-homes a) {
    background: transparent !important;
    border-color: transparent !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    color: #ffffff !important;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
}

body.rdhs-public a.fl-button[href^="tel:"]:not(.rdhs-large-homes a) * {
    color: #ffffff !important;
}

body.rdhs-public a.fl-button[href^="tel:"]:not(.rdhs-large-homes a):hover {
    background: transparent !important;
    border-color: transparent !important;
    text-decoration-thickness: 2px;
}

/* Both phone CTAs currently sit in their own column, right-aligned against the
   Start Free Trial button. Without the button box that gap reads as too wide.
   Keyed off the node alone, because these are no longer Button modules. */
body.rdhs-public .fl-node-r12b2,
body.rdhs-public .fl-node-hw5b2,
body.rdhs-public .fl-node-pr5b2 {
    display: flex;
    align-items: center;
    min-height: 50px;
}


/* ---- The phone CTA itself ---------------------------------------------------
   These four were Button modules with a tel: href. They are now .call-num spans,
   the same pattern as templates/account-locked.php: plain text on desktop, and
   js/custom.js rewrites the span's contents as <a href="tel:..."> on mobile user
   agents. A Button could not carry .call-num — a Button is already an <a>, and
   the script injects its anchor inside whatever it matches, nesting one anchor
   inside another.

   Type and colour are Lato 700 16px white, with a transparent 2px border and
   13px of vertical padding - what the buttons computed to before the change.

   The underline belongs to the link, not to the text. On desktop the number is
   plain text and nothing can be clicked, so underlining it would promise
   something that is not there; on mobile the script wraps it in an anchor and
   the underline appears with it. */
body.rdhs-public .rdhs-call-btn,
body.rdhs-public .rdhs-call-btn a {
    color: #ffffff;
    font-family: Lato, sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 18px;
    text-decoration: none;
}

body.rdhs-public .rdhs-call-btn {
    border: 2px solid transparent;
    display: inline-block;
    padding: 13px 0;
}

/* Only once it is a link. */
body.rdhs-public .rdhs-call-btn a {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
}

body.rdhs-public .rdhs-call-btn a:hover,
body.rdhs-public .rdhs-call-btn a:focus {
    color: #ffffff;
    text-decoration-thickness: 2px;
}


/* ===========================================================================
   4.2  Saved-row module components

   Everything the Callout and List modules CAN express through their own
   settings now is — icon and text colours, typography, the circular avatar
   crop and its border, the List icon gap, and the light eyebrow colour on navy
   panels. Those travel inside the row and need nothing from this file.

   What is left below is the residue Beaver has no setting for. It is not
   scoped to body.rdhs-public, because the rows have to look right on any
   page they are dropped onto — including new pages and the builder preview.
   Every selector keys off a class the module carries in its own
   Advanced -> Class field, so nothing else on the site can match it.

   If a row is ever exported to another site, this block has to go with it —
   paste it into Beaver Builder -> Tools -> Global Settings -> CSS there. It is
   reproduced in docs/beaver-builder-module-audit.md for that purpose.
   =========================================================================== */


/* ---- Star Rating alignment -------------------------------------------------
   The module's Alignment setting writes `margin-inline` onto its ::after, which
   is inline — so it cannot centre. The stars inherit text-align instead, which
   the module has no setting for. */
.rdhs-stars-center {
    text-align: center;
}

/* ---- Callout icon chips ----------------------------------------------------
   Beaver sizes an icon's background as font-size x 1.75 and always draws it as
   a circle (modules/icon/includes/frontend.css.php hard-codes
   border-radius: 100%). Neither the 40px rounded square nor the larger discs
   the design uses can be reached from the module settings. */
.rdhs-callout-chip .fl-icon i {
    width: 40px;
    line-height: 40px;
    border-radius: 10px;
}

.rdhs-callout-step .fl-icon i {
    width: 44px;
    line-height: 44px;
}

/* ---- Numbered step badge --------------------------------------------------
   The step number used to be a Font Awesome glyph (fa-1 … fa-4), whose numerals
   are a different letterform to the rest of the site — which is what the client
   spotted. It is drawn as a CSS counter instead, so it renders in Lora like the
   original did, and the steps renumber themselves if a card is added or removed.

   Scoped to .rdhs-stepnums, a class on the row, so it cannot reach any other
   Callout that happens to carry .rdhs-callout-step. */
/* With the Icon field cleared Beaver still prints an empty <i class="">, and the
   sizing rule above holds it open as a 44px block. Hidden only inside a counter
   row, so a step card placed from an older Saved Row keeps its icon. */
.rdhs-stepnums .rdhs-callout-step .fl-icon {
    display: none;
}

.rdhs-stepnums {
    counter-reset: rdhs-step;
}

.rdhs-stepnums .rdhs-callout-step {
    counter-increment: rdhs-step;
}

.rdhs-stepnums .rdhs-callout-step .fl-callout::before {
    content: counter(rdhs-step);
    display: block;
    width: 44px;
    height: 44px;
    margin: 0 auto 18px;
    border-radius: 50%;
    background: #1b3a63;
    color: #ffffff;
    font-family: Lora, Georgia, serif;
    font-size: 20px;
    line-height: 44px;
    text-align: center;
}

.rdhs-callout-badge .fl-icon i {
    width: 28px;
    line-height: 28px;
}

:is(.rdhs-callout-chip, .rdhs-callout-step, .rdhs-callout-badge) .fl-icon i::before {
    line-height: inherit;
}

/* ---- Callout reviewer credit -----------------------------------------------
   The circle crop and border are set in the module. What is not reachable is
   the layout: Beaver lays photo-left callouts out as a table and gives the
   photo cell `width: 50%` and `padding-right: 30px`, which pushes the name away
   from the avatar and squeezes it into half the card. Both cells are reset to
   blocks so a flex row can do the spacing. */
.rdhs-callout-person .fl-callout {
    display: flex;
    align-items: center;
    gap: 14px;
}

.rdhs-callout-person .fl-callout-photo {
    display: block;
    flex: none;
    width: auto;
    margin: 0;
    padding: 0;
}

.rdhs-callout-person .fl-callout-content {
    display: block;
    width: auto;
    min-width: 0;
}

.rdhs-callout-person .fl-callout-title {
    margin: 0 0 2px;
}

.rdhs-callout-person .fl-callout-text p {
    margin: 0;
}

/* ---- List module ----------------------------------------------------------
   The gap between a List icon and its heading is set per module now
   (icon_padding_right). This is the same value expressed in CSS, kept only for
   List modules placed from an earlier version of the Saved Rows. Remove it once
   every placed copy has been refreshed. */
.fl-module-list .fl-list-item-heading-icon {
    margin-right: 4px;
}

.rdhs-list-without-rdhs .fl-list-item-heading-icon {
    margin-right: 2px;
}


/* ===========================================================================
   4.3  Card title size, independent of heading level
   ===========================================================================

   The card titles were <h4> sitting directly under an <h2> section heading, so
   every one of these pages skipped a level. Sighted visitors see nothing wrong;
   someone navigating by heading hears a level that isn't there.

   The tags are now <h3>. The badge, person and stat cards already set their own
   title size, so they were unaffected — but the chip and step cards took theirs
   from the global h4 rule (19px), and h3 is 30px. Pinning the size here keeps
   them looking exactly as they did, and means the heading level can change again
   later without moving anything on screen.
   =========================================================================== */
body.rdhs-public .rdhs-callout-chip .fl-callout-title,
body.rdhs-public .rdhs-callout-step .fl-callout-title {
    font-family: Lora, Georgia, serif;
    font-size: 19px;
    font-weight: 600;
    line-height: 1.3;
}


/* ===========================================================================
   4.4  Layout helpers: segmented strips, stacking and halving
   ===========================================================================

   Seven rows across Home, Pricing, How It Works and Reviews are built as one
   horizontal strip cut into segments: every column carries a top, bottom and
   left border, the last one adds the right border to close the strip, and the
   radius rounds only the two outer ends.

   That is right while they sit side by side. Stacked on a phone, each card is
   left open on its right-hand edge and the rounding lands on the wrong corners,
   so the group reads as a set of ragged, mismatched boxes.

   Below Beaver's mobile breakpoint the strip is simply re-formed vertically:
   every card closed on all four sides, sharing an edge with the one below it,
   and the rounding moved to the top of the first card and the bottom of the
   last. The marker sits on each column, because Beaver Builder does not render
   a custom class on a column group. No !important — one class more than the
   node CSS it overrides. */
@media (max-width: 767px) {

    body.rdhs-public .rdhs-strip-col > .fl-col-content {
        border-bottom-width: 0;
        border-left-width: 1px;
        border-radius: 0;
        border-right-width: 1px;
        border-top-width: 1px;
    }

    body.rdhs-public .rdhs-strip-col:first-child > .fl-col-content {
        border-radius: 14px 14px 0 0;
    }

    body.rdhs-public .rdhs-strip-col:last-child > .fl-col-content {
        border-bottom-width: 1px;
        border-radius: 0 0 14px 14px;
    }
}

/* Four-across strips need to stack a breakpoint earlier than the two-across
   ones. At 768px a quarter column is 127px, which is narrower than the words in
   it - "AZDHS-aligned documentation" overflowed its own card. The two-across
   strips have around 360px at the same width and are fine as they are. */
@media (min-width: 768px) and (max-width: 991px) {

    body.rdhs-public .rdhs-strip-col--quarter {
        clear: both;
        flex: 0 0 100%;
        float: none;
        max-width: 100%;
        width: 100%;
    }

    body.rdhs-public .rdhs-strip-col--quarter > .fl-col-content {
        border-bottom-width: 0;
        border-left-width: 1px;
        border-radius: 0;
        border-right-width: 1px;
        border-top-width: 1px;
    }

    body.rdhs-public .rdhs-strip-col--quarter:first-child > .fl-col-content {
        border-radius: 14px 14px 0 0;
    }

    body.rdhs-public .rdhs-strip-col--quarter:last-child > .fl-col-content {
        border-bottom-width: 1px;
        border-radius: 0 0 14px 14px;
    }
}


/* ---- Rows of three at tablet ------------------------------------------------
   Beaver stacks columns below 768px, but between 768 and 991 a row of three is
   still three across. At 768 that leaves 230px a column, which is narrower than
   the sentences in it — the home testimonials came out as a column of two-word
   lines with the attribution broken over four.

   rdhs-stack-md is a plain marker: stack below 992px. Add it to any column in a
   row of three or more that has more than a few words in it. */
@media (min-width: 768px) and (max-width: 991px) {

    body.rdhs-public .rdhs-stack-md {
        clear: both;
        flex: 0 0 100%;
        float: none;
        margin-left: auto;
        margin-right: auto;
        max-width: 100%;
        width: 100%;
    }

    body.rdhs-public .rdhs-stack-md + .rdhs-stack-md {
        margin-top: 20px;
    }
}


/* ---- Rows of three or more that only need halving --------------------------
   Six short cards three-across at 768px leaves 230px each and wraps every title.
   Two-across gives 345px and reads cleanly, without the page length that
   stacking all six would add. Use rdhs-half-md where rdhs-stack-md would be
   overkill.

   flex-basis as well as width: Beaver lays these groups out with flexbox when
   the columns are equal-height, and a floated width alone leaves the last card
   in a row free to grow to the full width. */
@media (min-width: 768px) and (max-width: 991px) {

    body.rdhs-public .rdhs-half-md {
        clear: none;
        flex: 0 0 50%;
        float: left;
        max-width: 50%;
        width: 50%;
    }
}

/* ---- Tablet card alignment (23 Oct) -----------------------------------------
   Stacked, the rdhs-stack-md cards kept the 12px side margins that make the
   desktop gutter (Beaver writes them on .fl-col-content), so each card sat
   12px off the one above it. Stacked cards take the full column instead. */
@media (min-width: 768px) and (max-width: 991px) {

    body.rdhs-public .rdhs-stack-md > .fl-col-content {
        margin-left: 0;
        margin-right: 0;
    }
}

/* rdhs-half-md cards come in Beaver groups of three, so halving each group gave
   2 + 1, 2 + 1: a lone card and a hole per group, with the second group butted
   against the first. At tablet the groups are dissolved into one two-across
   grid with a single 20px gap; any full-width column in the same row (the
   section heading) spans both tracks. Beaver's clearfix pseudo-elements would
   become grid items, so they are switched off. */
@media (min-width: 768px) and (max-width: 991px) {

    body.rdhs-public .fl-row-content:has(> .fl-col-group > .rdhs-half-md) {
        display: grid;
        gap: 20px;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body.rdhs-public .fl-row-content:has(> .fl-col-group > .rdhs-half-md)::before,
    body.rdhs-public .fl-row-content:has(> .fl-col-group > .rdhs-half-md)::after,
    body.rdhs-public .fl-row-content:has(> .fl-col-group > .rdhs-half-md) > .fl-col-group::before,
    body.rdhs-public .fl-row-content:has(> .fl-col-group > .rdhs-half-md) > .fl-col-group::after {
        display: none;
    }

    body.rdhs-public .fl-row-content:has(> .fl-col-group > .rdhs-half-md) > .fl-col-group {
        display: contents;
    }

    body.rdhs-public .fl-row-content:has(> .fl-col-group > .rdhs-half-md) > .fl-col-group > .fl-col:not(.rdhs-half-md) {
        grid-column: 1 / -1;
        width: auto;
    }

    body.rdhs-public .fl-row-content > .fl-col-group > .rdhs-half-md {
        flex: none;
        float: none;
        max-width: none;
        width: auto;
    }

    body.rdhs-public .fl-row-content > .fl-col-group > .rdhs-half-md > .fl-col-content {
        height: 100%;
        margin: 0;
    }
}


/* ===========================================================================
   4.5  FAQ accordion and FAQ box (Home, Pricing)
   =========================================================================== */


/* ---- FAQ accordions --------------------------------------------------------
   Redrawn after the Hireawiz FAQ (hireawiz theme, .cm-haw-faq): no card, no
   radius, no gap — each question is a row separated by a single hairline, with
   the +/− pushed to the right edge. BB's own card styling for these nodes is
   .fl-node-r11a0 .fl-accordion-item (0,2,0); .rdhs-faq .fl-accordion-item under
   body is (0,3,1) and wins outright. */
body.rdhs-public .rdhs-faq .fl-accordion-item {
    margin: 0;
    border: 0;
    border-bottom: 1px solid #dbe4f0;
    border-radius: 0;
    background: transparent;
    overflow: visible;
}

body.rdhs-public .rdhs-faq .fl-accordion-button,
body.rdhs-public .rdhs-faq .fl-accordion-item.fl-accordion-item-active .fl-accordion-button {
    padding: 20px 0;
    background: transparent;
    border: 0;
}

body.rdhs-public .rdhs-faq .fl-accordion-button,
body.rdhs-public .rdhs-faq .fl-accordion-button-label {
    font-size: 19px;
    line-height: 1.4;
}

/* The icon is BB's fa-plus / fa-minus. Thinned down and set apart from the
   question so the row reads as one line of type plus an affordance. */
body.rdhs-public .rdhs-faq .fl-accordion-button-icon-right {
    margin-left: 24px;
    opacity: 0.55;
    font-size: 15px;
}

body.rdhs-public .rdhs-faq .fl-accordion-content {
    padding: 0 0 22px;
    background: transparent;
}

/* BB reserves the icon's width on the content too; without the card there is
   nothing to line up with. */
body.rdhs-public .rdhs-faq .fl-accordion-content p:last-child {
    margin-bottom: 0;
}


/* ---- FAQ box (team's choice from the round-2 references, option A) ---------
   Home (r11) and Pricing (pr4): no row background; the heading, a phone line
   and the question rows sit in one white box. The box is the column itself -
   background, border, radius, shadow and padding are Beaver column settings
   (.rdhs-faq-box). Here: its width cap, the short blue rule under the heading
   (.rdhs-heading-rule) and the phone number's weight. The question rows keep
   the rules above. */
body.rdhs-public .rdhs-faq-box {
    float: none;
    margin-left: auto;
    margin-right: auto;
    max-width: 980px;
}

/* Two markup shapes: on Home and Pricing the class sits on the heading element
   itself; in the Log in layout and on Lost password Beaver wraps the heading in
   a module div that carries the class. Only the heading element gets the rule,
   or the wrapped version draws it twice. */
body.rdhs-public .fl-builder-content .rdhs-heading-rule.fl-heading::after,
body.rdhs-public .fl-builder-content .rdhs-heading-rule .fl-heading::after {
    background: var(--rdhs-logo-blue);
    border-radius: 3px;
    content: "";
    display: block;
    height: 3px;
    margin: 18px auto 0;
    width: 56px;
}

body.rdhs-public .rdhs-faq-help .call-num,
body.rdhs-public .rdhs-faq-help .call-num a {
    color: #1b3a63;
    font-weight: 700;
}


body .rdhs-faq.rdhs-faq-last .fl-accordion .fl-accordion-item:last-child {
    border-bottom: none;
}


/* ===========================================================================
   4.6  Form controls
   ===========================================================================

   Four public forms, four different lineages: Theme My Login on /login/ and
   /lostpassword/ (.tml-field / .tml-button), the custom registration template
   on /register/ (.form-control, #register-submit) and Gravity Forms inside
   .pps-form on /pay-per-service-plan/. Each arrived with its own field height,
   border and submit colour — the Gravity one was still the flat 2018 blue in
   uppercase Open Sans.

   One declaration covers all of them so the forms read as the same product.
   Nothing here is !important: the selectors carry body.rdhs-public, which is
   a class more than the theme rules they override, and the application forms
   outside the marketing pages are untouched.
   =========================================================================== */

/* ---- Fields ---------------------------------------------------------------- */
body.rdhs-public .tml .tml-field,
body.rdhs-public .row-payment-form .form-control,
body.rdhs-public .pps-form .gform_wrapper input[type="text"],
body.rdhs-public .pps-form .gform_wrapper input[type="email"],
body.rdhs-public .pps-form .gform_wrapper input[type="tel"],
body.rdhs-public .pps-form .gform_wrapper input[type="number"],
body.rdhs-public .pps-form .gform_wrapper input[type="password"],
body.rdhs-public .pps-form .gform_wrapper select,
body.rdhs-public .pps-form .gform_wrapper textarea {
    background: #f7fafd;
    border: 1px solid var(--rdhs-input-border, #c9d8ec);
    border-radius: 4px;
    box-shadow: none;
    color: #3d4a5c;
    font-family: Lato, sans-serif;
    font-size: 16px;
    line-height: 1.4;
    padding: 12px 14px;
    width: 100%;
}

/* Selects: style.css turns the native arrow off and draws its own as a
   background image, which the background shorthand above removes. The arrow is
   drawn again here (also on focus, whose shorthand removes it too), with room
   on the right for it. */
body.rdhs-public .row-payment-form select.form-control,
body.rdhs-public .pps-form .gform_wrapper select,
body.rdhs-public .row-payment-form select.form-control:focus,
body.rdhs-public .pps-form .gform_wrapper select:focus {
    padding-right: 38px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%231b3a63' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-position: right 14px center;
    background-repeat: no-repeat;
    background-size: 12px 8px;
}

/* A visible focus ring on every field, not just the ones whose plugin shipped
   with one. */
body.rdhs-public .tml .tml-field:focus,
body.rdhs-public .row-payment-form .form-control:focus,
body.rdhs-public .pps-form .gform_wrapper input:focus,
body.rdhs-public .pps-form .gform_wrapper select:focus,
body.rdhs-public .pps-form .gform_wrapper textarea:focus {
    background: #ffffff;
    border-color: #1b3a63;
    box-shadow: 0 0 0 3px rgba(27, 58, 99, 0.12);
    outline: none;
}

/* ---- Primary submit --------------------------------------------------------
   Matched to the Contact Us button, which is the one the client has already
   signed off: a navy pill, 15px/30px, Lato 700 16px, no letter-spacing.
   The Gravity button on /pay-per-service-plan/ also has to have its uppercase,
   its letter-spacing and its Open Sans unset, because .pps-form sets all three. */
body.rdhs-public .tml .tml-button,
body.rdhs-public #register-submit,
body.rdhs-public .row-payment-form .btn.btn-primary,
body.rdhs-public .pps-form .gform_wrapper .gform_footer .gform_button,
body.rdhs-public .pps-form .gform_wrapper .gform-footer .gform_button {
    background: #1b3a63;
    border: 1px solid #1b3a63;
    border-radius: 999px;
    color: #ffffff;
    font-family: Lato, sans-serif;
    font-size: 16px;
    font-weight: 700;
    height: auto;
    letter-spacing: 0;
    line-height: 1.2;
    margin: 0;
    padding: 15px 30px;
    text-shadow: none;
    text-transform: none;
    transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
    width: auto;
}

/* Restated on hover and focus: without it the label falls back to the link
   colour and all but disappears into the navy. */
body.rdhs-public .tml .tml-button:hover,
body.rdhs-public .tml .tml-button:focus,
body.rdhs-public #register-submit:hover,
body.rdhs-public #register-submit:focus,
body.rdhs-public .row-payment-form .btn.btn-primary:hover,
body.rdhs-public .row-payment-form .btn.btn-primary:focus,
body.rdhs-public .pps-form .gform_wrapper .gform_footer .gform_button:hover,
body.rdhs-public .pps-form .gform_wrapper .gform_footer .gform_button:focus,
body.rdhs-public .pps-form .gform_wrapper .gform-footer .gform_button:hover,
body.rdhs-public .pps-form .gform_wrapper .gform-footer .gform_button:focus {
    background: #122c4d;
    border-color: #122c4d;
    color: #ffffff;
}

/* ---- Gravity Forms validation errors ---------------------------------------
   Contact Us (.rdhs-form) and Pay per Service Plan (.pps-form). The long
   selectors are needed: they have to outrank Gravity's own !important rules and
   the !important tint on .pps-form in css/style.css. */

/* The summary banner: each field already says what is wrong. */
body.rdhs-public .rdhs-form .gform_wrapper .gform_validation_errors,
body.rdhs-public .rdhs-form .gform_wrapper .validation_error,
body.rdhs-public .pps-form .gform_wrapper .gform_validation_errors,
body.rdhs-public .pps-form .gform_wrapper .validation_error {
    display: none;
}

/* readyclass.min.css shrinks a gf_left_third field to 33% once it has an error,
   which squeezed Name and Email into 75px inside their grid cells. */
body.rdhs-public .rdhs-form .gform_wrapper li.gfield.gfield_error.gf_left_third,
body.rdhs-public .rdhs-form .gform_wrapper li.gfield.gfield_error.gf_middle_third {
    margin-right: 0 !important;
    width: auto !important;
}

/* formsmain.min.css takes 16px off every field with an error, so on Contact they
   stopped short of the card's right edge. Pay per Service Plan is left alone:
   its fields have that same 16px gutter before the error, so they don't move. */
body.rdhs-public .rdhs-form .gform_wrapper.gform_validation_error .gform_body ul li.gfield.gfield_error:not(.gf_left_half):not(.gf_right_half) {
    max-width: none !important;
}

/* Same label-to-field gap as before the error, so nothing shifts. */
body.rdhs-public .rdhs-form .gform_wrapper li.gfield.gfield_error.gfield_contains_required label.gfield_label {
    margin-top: 0;
}

body.rdhs-public .rdhs-form .gform_wrapper li.gfield.gfield_error.gfield_contains_required div.ginput_container {
    margin-top: 8px;
}

/* The field keeps its normal look: only the message below it shows the error.
   These restate each form's own field colours, because the Contact page's Beaver
   CSS and css/style.css both colour error fields with !important. */
body.rdhs-public .rdhs-form .gform_wrapper li.gfield_error input:not([type="radio"]):not([type="checkbox"]):not([type="submit"]):not([type="button"]):not([type="image"]):not([type="file"]),
body.rdhs-public .rdhs-form .gform_wrapper li.gfield_error textarea,
body.rdhs-public .rdhs-form .gform_wrapper li.gfield_error select {
    background-color: #ffffff !important;
    border: 1px solid #c9d8ec !important;
}

body.rdhs-public .pps-form .gform_wrapper li.gfield_error input:not([type="radio"]):not([type="checkbox"]):not([type="submit"]):not([type="button"]):not([type="image"]):not([type="file"]),
body.rdhs-public .pps-form .gform_wrapper li.gfield_error textarea,
body.rdhs-public .pps-form .gform_wrapper li.gfield_error select {
    background-color: #f7fafd !important;
    border: 1px solid #c9d8ec !important;
}

body.rdhs-public .rdhs-form .gform_wrapper li.gfield_error input:not([type="radio"]):not([type="checkbox"]):not([type="submit"]):not([type="button"]):not([type="image"]):not([type="file"]):focus,
body.rdhs-public .rdhs-form .gform_wrapper li.gfield_error textarea:focus,
body.rdhs-public .rdhs-form .gform_wrapper li.gfield_error select:focus,
body.rdhs-public .pps-form .gform_wrapper li.gfield_error input:not([type="radio"]):not([type="checkbox"]):not([type="submit"]):not([type="button"]):not([type="image"]):not([type="file"]):focus,
body.rdhs-public .pps-form .gform_wrapper li.gfield_error textarea:focus,
body.rdhs-public .pps-form .gform_wrapper li.gfield_error select:focus {
    background-color: #ffffff !important;
    border-color: #1b3a63 !important;
    box-shadow: 0 0 0 3px rgba(27, 58, 99, 0.12);
}

/* Gravity turns the Address sub-labels dark red on error. */
body.rdhs-public .pps-form .gform_wrapper li.gfield_error div.ginput_complex.ginput_container label {
    color: inherit;
}

/* The required asterisk, in the error colour. !important because the Contact
   page's Beaver CSS sets its own colour that way. */
body.rdhs-public .rdhs-form .gform_wrapper .gfield_required,
body.rdhs-public .pps-form .gform_wrapper .gfield_required {
    color: #ff0000 !important;
}

/* The message. !important because css/style.css also sets its colour that way. */
body.rdhs-public .rdhs-form .gform_wrapper li.gfield.gfield_error.gfield_contains_required div.validation_message,
body.rdhs-public .rdhs-form .gform_wrapper li.gfield.gfield_error div.validation_message,
body.rdhs-public .pps-form .gform_wrapper li.gfield.gfield_error.gfield_contains_required div.validation_message,
body.rdhs-public .pps-form .gform_wrapper li.gfield.gfield_error div.validation_message,
body.rdhs-public .pps-form .gform_wrapper li.gfield div.rdhs-ppsp-error {
    background: none;
    border: 0;
    color: #ff0000 !important;
    font-family: Lato, sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.4;
    margin: 6px 0 0;
    max-width: none;
    padding: 0;
    width: auto;
}


/* ===========================================================================
   4.7  Tables in articles and legal pages
   ===========================================================================

   The single-post layout styles paragraphs, headings, lists, links, images and
   blockquotes, but nothing had ever put a table in a post, so `td` inherited a
   font and nothing else — no borders, no header, columns sized by content.

   Scoped to the post body and the legal pages, which are the two places that
   render author-written HTML.
   =========================================================================== */

body.rdhs-public .rdhs-post-body .fl-module-fl-post-content table,
body.rdhs-public .rdhs-legal .fl-rich-text table {
    border: 1px solid var(--rdhs-border, #dbe4f0);
    border-collapse: separate;
    border-radius: 12px;
    border-spacing: 0;
    margin: 0 0 28px;
    overflow: hidden;
    width: 100%;
}

body.rdhs-public .rdhs-post-body .fl-module-fl-post-content thead th,
body.rdhs-public .rdhs-legal .fl-rich-text thead th {
    background: var(--rdhs-light-bg, #f3f6fb);
    color: #1b3a63;
    font-family: Lato, sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-align: left;
    text-transform: uppercase;
}

body.rdhs-public .rdhs-post-body .fl-module-fl-post-content th,
body.rdhs-public .rdhs-post-body .fl-module-fl-post-content td,
body.rdhs-public .rdhs-legal .fl-rich-text th,
body.rdhs-public .rdhs-legal .fl-rich-text td {
    border-bottom: 1px solid var(--rdhs-border, #dbe4f0);
    padding: 13px 18px;
    vertical-align: top;
}

/* The first column is the label the row is read by, so it carries the weight. */
body.rdhs-public .rdhs-post-body .fl-module-fl-post-content tbody td:first-child,
body.rdhs-public .rdhs-legal .fl-rich-text tbody td:first-child {
    color: #1b3a63;
    font-weight: 700;
}

/* Article tables label rows with a short term ("Personal Care"), so keeping it
   on one line reads better. The legal exhibits use full sentences as labels, so
   they are left to wrap - forcing them wide squeezes the column beside them. */
body.rdhs-public .rdhs-post-body .fl-module-fl-post-content tbody td:first-child {
    white-space: nowrap;
}

/* No rule under the last row — the container's own border closes it. */
body.rdhs-public .rdhs-post-body .fl-module-fl-post-content tbody tr:last-child td,
body.rdhs-public .rdhs-legal .fl-rich-text tbody tr:last-child td {
    border-bottom: 0;
}

/* Narrow screens: the tables here have two or three columns, so they stay a
   real table at full width and the cells wrap. (They used to switch to
   display:block to scroll sideways, but a block table sizes its rows to their
   content, so the header and row rules stopped short of the right border.) */
@media (max-width: 767px) {
    body.rdhs-public .rdhs-post-body .fl-module-fl-post-content th,
    body.rdhs-public .rdhs-post-body .fl-module-fl-post-content td,
    body.rdhs-public .rdhs-legal .fl-rich-text th,
    body.rdhs-public .rdhs-legal .fl-rich-text td {
        overflow-wrap: anywhere;
        padding: 12px 14px;
    }

    body.rdhs-public .rdhs-post-body .fl-module-fl-post-content tbody td:first-child,
    body.rdhs-public .rdhs-legal .fl-rich-text tbody td:first-child {
        white-space: normal;
    }
}


/* ===========================================================================
   4.8  Long URLs in body copy
   ===========================================================================

   The Privacy Policy prints a full Google policy URL as its own link text. It
   is 410px wide with no break opportunity, so on a 375px screen it pushed the
   document to 446px and the whole page could be dragged sideways.

   Applied to the places that carry author-written prose rather than globally:
   a link in a nav or a button should still never wrap mid-word.
   =========================================================================== */
body.rdhs-public .rdhs-legal .fl-rich-text a,
body.rdhs-public .rdhs-post-body .fl-module-fl-post-content a {
    overflow-wrap: anywhere;
    word-break: break-word;
}


/* ===========================================================================
   5.  HOME
   =========================================================================== */


/* ---- Hero call-to-action pair ----------------------------------------------
   The two hero buttons sit in a nested 38/62 split. That is comfortable on a
   desktop, but at 768px it leaves 123px and 201px, and "Start Free Trial" broke
   onto three lines inside its own pill. They stack until there is room. */
@media (max-width: 991px) {

    body.rdhs-public .rdhs-cta-col {
        clear: both;
        flex: 0 0 100%;
        float: none;
        max-width: 100%;
        width: 100%;
    }

    /* Stacked, the two buttons were still sized to their own labels — 186px
       above 270px, left aligned, which reads as unfinished rather than as a
       pair. Once they are one above the other they take the full column, the
       way the pricing calculator's buttons already do on a phone. */
    body.rdhs-public .rdhs-cta-col .fl-button-wrap {
        width: 100%;
    }

    body.rdhs-public .rdhs-cta-col a.fl-button {
        display: block;
        text-align: center;
        width: 100%;
    }
}


/* ---- Hero screenshot: padding, then the shadow (client, Video 2, 0:57) ------
   "Since there is no padding, it doesn't look well, so maybe add some padding
   and then apply the styling." The hero image ran to the edge of its box; it
   now sits in a white card with the same shadow as the styled feature images.
   Photo module r1m4 carries .rdhs-shot. */
body.rdhs-public .rdhs-shot .fl-photo-content {
    background: #ffffff;
    border: 1px solid #e2e9f4;
    border-radius: 16px;
    box-shadow: 0 24px 48px -28px rgba(18, 48, 92, .35);
    padding: 18px;
}

body.rdhs-public .rdhs-shot .fl-photo-content img {
    border-radius: 8px;
    display: block;
}


/* ---- "Not generic software": option A (client, Video 1, 1:08) --------------
   "I think this can look nicer." Chosen from the reference images: the same
   split card with a soft shadow and the clinician named on the photo. The list
   uses the same plain check list as the Free guide section (its Beaver List
   settings were copied from that module). Row r4 carries .rdhs-partner; the
   caption is a Text Editor module (.rdhs-photo-caption) under the photo. */
body.rdhs-public .rdhs-partner .fl-col-group {
    border-radius: 16px;
    box-shadow: 0 34px 64px -44px rgba(27, 58, 99, .45);
}

body.rdhs-public .rdhs-partner .rdhs-strip-col:first-child > .fl-col-content {
    overflow: hidden;
    position: relative;
}

body.rdhs-public .fl-builder-content .rdhs-photo-caption {
    background: linear-gradient(180deg, rgba(18, 44, 77, 0), rgba(18, 44, 77, .9));
    bottom: 0;
    left: 0;
    margin: 0;
    padding: 90px 32px 28px;
    position: absolute;
    right: 0;
}

body.rdhs-public .fl-builder-content .rdhs-photo-caption p {
    color: #dbe7f5;
    font-size: 14px;
    line-height: 1.45;
    margin: 0;
    text-align: left;
}

body.rdhs-public .fl-builder-content .rdhs-photo-caption strong {
    color: #ffffff;
    display: block;
    font-family: Lora, Georgia, serif;
    font-size: 21px;
    font-weight: 600;
    line-height: 1.3;
    margin-bottom: 2px;
}

/* The name is already a block; the editor's line break would add a blank line. */
body.rdhs-public .fl-builder-content .rdhs-photo-caption br {
    display: none;
}

@media (max-width: 767px) {

    body.rdhs-public .fl-builder-content .rdhs-photo-caption {
        padding: 70px 24px 22px;
    }

    body.rdhs-public .fl-builder-content .rdhs-photo-caption strong {
        font-size: 18px;
    }
}


/* ---- Full application demo (home, "Want to see it in action?") -----------
   A Beaver Video module (r7vv, .rdhs-video) embedding "R|D Health Services -
   FULL application demo" replaces the placeholder graphic. Rounded to match
   the placeholder it replaces and the How It Works tutorial player. */
body.rdhs-public .rdhs-video .fl-embed-video {
    border-radius: 12px;
    overflow: hidden;
}


/* ---- Closing call-to-action: concept 7B stats card (client, Video 2) --------
   Video 1 (1:40): the 97%+ · 300+ · 10+ yrs stats sat on the same navy as the
   heading and buttons, so the two blended into one block. Concept 7B lifts the
   stats into a white card that overlaps a rounded navy panel.

   Only the stats card follows the concept. The heading, the paragraph and the
   two actions keep their original look - white pill and phone link - and the
   navy band stays full width, at the user's request (11 Sep 2026).

   Built in Beaver as two rows. Row r12 is white and holds only the card
   (.rdhs-cta-stats): background, border, radius, shadow and padding are column
   settings, and the three Callouts sit in a nested group. Row r12p is the
   original full-width navy row, pulled up under the card by its -58px top
   margin. Only what Beaver has no setting for is here: the card's width cap
   and stacking order (so it paints over the next row), and the dividers
   between stats.

   Home page only - Pricing, How It Works and Reviews still close with the
   previous block. */
body.rdhs-public .rdhs-cta-stats {
    float: none;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    z-index: 2;
}

body.rdhs-public .rdhs-cta-stats .fl-col-group > .fl-col > .fl-col-content {
    padding: 0 16px;
}

body.rdhs-public .rdhs-cta-stats .fl-col-group > .fl-col + .fl-col > .fl-col-content {
    border-left: 1px solid #e6ebf3;
}

/* The callout title carries 10px of bottom padding from the theme's
   h3.fl-callout-title rule, and the label paragraph the theme's 16px/29px body
   type plus 10px of !important padding - together about twice the concept's
   number-to-label gap. The label size is Beaver's (14px) once the paragraph
   stops overriding it. */
body.rdhs-public .rdhs-cta-stats .fl-callout-title {
    margin: 0 0 8px;
    padding: 0;
}

body.rdhs-public .rdhs-cta-stats .fl-callout-text p {
    font-size: 14px;
    line-height: 1.5;
    margin: 0;
    padding: 0 !important;
}

/* Tablets: four stats side by side leave about 160px each, which clipped
   "12,000+" and broke "10+ yrs" across two lines. Two per row instead, with the
   divider only between the pairs. Beaver floats the columns, so the group is
   made a grid to place them. */
@media (min-width: 768px) and (max-width: 991px) {

    body.rdhs-public .rdhs-cta-stats .fl-col-group {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        row-gap: 20px;
    }

    /* Beaver clears its floated columns with ::before and ::after on the group.
       In a grid those two become grid items of their own and take the first
       cell, which pushed every stat one place along and left a gap. */
    body.rdhs-public .rdhs-cta-stats .fl-col-group::before,
    body.rdhs-public .rdhs-cta-stats .fl-col-group::after {
        display: none;
    }

    body.rdhs-public .rdhs-cta-stats .fl-col-group > .fl-col {
        width: auto;
        float: none;
    }

    body.rdhs-public .rdhs-cta-stats .fl-col-group > .fl-col:nth-child(odd) > .fl-col-content {
        border-left: 0;
    }
}

/* Three stats side by side do not fit a phone; stacked, the dividers turn
   horizontal. */
@media (max-width: 767px) {

    body.rdhs-public .rdhs-cta-stats .fl-col-group > .fl-col + .fl-col > .fl-col-content {
        border-left: 0;
        border-top: 1px solid #e6ebf3;
        margin-top: 16px;
        padding-top: 16px;
    }
}


/* ---- Footer CTA on a phone (23 Oct) -----------------------------------------
   The button and the phone link sit in a 50/50 pair, right- and left-aligned
   so they meet in the middle on desktop. Stacked, the button is centred by its
   own Beaver setting; the phone link is an HTML module with no alignment
   setting, so it is centred here. */
@media (max-width: 767px) {

    body.rdhs-public .fl-module-html:has(> .rdhs-call-btn) {
        text-align: center;
    }

    /* The link is display:block at its own width, so text-align alone does not
       move it. */
    body.rdhs-public .fl-module-html > .rdhs-call-btn {
        margin-left: auto;
        margin-right: auto;
    }
}

/* ---- Contact form on small phones (23 Oct) ----------------------------------
   Google's reCAPTCHA is a fixed 304px. Below 400px the form card has about
   264px inside it, and the captcha widened the form's one-column grid, so every
   field ran 17px out of the card. The captcha cell may shrink and the widget is
   scaled to fit; the fields keep the card width. */
@media (max-width: 399px) {

    body.rdhs-public .rdhs-form .gfield--type-captcha {
        min-width: 0;
    }

    body.rdhs-public .rdhs-form .gfield--type-captcha .ginput_container {
        transform: scale(0.86);
        transform-origin: left top;
        height: 68px;
    }
}

/* ---- Client logo carousel ("Trusted by" band) ---------------------------------
 * Client logo carousel — sits on the homepage "Trusted by" band.
 * The theme already loads owl.carousel.min.css and owl.theme.default.min.css;
 * this only skins the track and the arrows to the design system.
 */

.rdhs-logos {
    position: relative;
    padding: 0 44px;
}

.rdhs-logo-carousel .item {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 96px;
}

.rdhs-logo-carousel .item img {
    display: block;
    width: auto;
    max-width: 100%;
    max-height: 96px;
    height: auto;
    object-fit: contain;
}

/* Owl adds .owl-item widths inline; keep images from stretching. */
.rdhs-logo-carousel.owl-carousel .owl-item img {
    width: auto;
    margin: 0 auto;
}

/* ---- Arrows ------------------------------------------------------------- */
/* Owl sets position:relative on .owl-carousel, which would anchor the absolutely
   positioned arrows to the track and overlap the first and last logo. Making the
   track static hands that job to .rdhs-logos, so the arrows sit in its padding. */
.rdhs-logos .owl-carousel {
    position: static;
}

.rdhs-logos .owl-nav {
    margin: 0;
}

.rdhs-logos .owl-nav button.owl-prev,
.rdhs-logos .owl-nav button.owl-next {
    position: absolute;
    top: 50%;
    /* style.css:5095 rotates .owl-prev 180deg, because the theme's legacy Owl
       skin reuses one right-arrow sprite for both directions. That selector is
       `.owl-theme .owl-nav [class*=owl-].owl-prev` — four classes deep, so it
       outranks this one and flipped the real left chevron back to facing right.
       Forced, since raising specificity past it would make this unreadable. */
    transform: translateY(-50%) !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    margin: 0;
    padding: 0;
    border: 1px solid #c9d8ec;
    border-radius: 50%;
    /* The theme paints its own arrow sprite as a background-image on Owl nav
       buttons, which doubled up with the glyph. */
    background: #ffffff !important;
    background-image: none !important;
    color: #1b3a63;
    font-size: 22px;
    line-height: 1;
    text-indent: 0;
    overflow: visible;
    transition: border-color .15s ease, background .15s ease;
}

.rdhs-logos .owl-nav button.owl-prev { left: 0; }
.rdhs-logos .owl-nav button.owl-next { right: 0; }

.rdhs-logos .owl-nav button.owl-prev:hover,
.rdhs-logos .owl-nav button.owl-next:hover {
    border-color: #1b3a63;
    background: #e6eef8 !important;
    background-image: none !important;
    color: #1b3a63;
}

.rdhs-logos .owl-nav button.owl-prev:focus-visible,
.rdhs-logos .owl-nav button.owl-next:focus-visible {
    outline: 3px solid #e6eef8;
    outline-offset: 2px;
}

.rdhs-logos .owl-nav button span[aria-hidden] {
    display: block;
    margin-top: -3px;
}

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

@media (max-width: 767px) {
    .rdhs-logos {
        padding: 0 38px;
    }

    .rdhs-logo-carousel .item,
    .rdhs-logo-carousel .item img {
        height: 72px;
        max-height: 72px;
    }

    .rdhs-logos .owl-nav button.owl-prev,
    .rdhs-logos .owl-nav button.owl-next {
        width: 32px;
        height: 32px;
        font-size: 19px;
    }
}


/* ===========================================================================
   6.  REVIEWS
   =========================================================================== */


/* ---- Initial fallback ------------------------------------------------------
   Seven of the reviewers have no photo. cpt_listing_testimonial() now prints a
   .testimonial-initial span with the first letter of the name instead of an
   empty tinted disc. The disc geometry already exists on .testimonial-image in
   the page's own CSS; this only fills it. */
body.rdhs-public .rdhs-reviews .testimonial-initial,
body.rdhs-public .rdhs-featured-initial {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-family: Lora, Georgia, serif;
    font-size: 20px;
    font-weight: 600;
    line-height: 1;
    color: #1b3a63;
    text-transform: uppercase;
}

/* ---- Rating stars ----------------------------------------------------------
   The review cards draw their stars as a ::before glyph in the page's own
   Beaver CSS, at #8f6410, while every Star Rating module on the site uses the
   brand gold #e8a53a. Two golds for the same thing; this settles them on one. */
body.rdhs-public .rdhs-reviews .testimonial-description::before {
    color: #e8a53a;
}

/* ---- Body copy -------------------------------------------------------------
   the_content() already wraps each review in <p>, and the shortcode wrapped it
   again, so browsers closed the outer paragraph early and left empty <p>
   siblings padding every card out. The shortcode no longer double-wraps; this
   tightens what is left and makes the paragraph rhythm consistent whether a
   review is one paragraph or three. */
body.rdhs-public .rdhs-reviews .testimonial-description p {
    margin: 0 0 14px;
}

body.rdhs-public .rdhs-reviews .testimonial-description p:last-child {
    margin-bottom: 0;
}

body.rdhs-public .rdhs-reviews .testimonial-description p:empty {
    display: none;
}


/* ===========================================================================
   7.  HOW IT WORKS (/support/)
   =========================================================================== */


.rdhs-steps .fl-tabs-labels.fl-clearfix:before {
    display: none !important;
}


/* ---- Step selector ---------------------------------------------------------
   Was: number in a disc on the left, title and subtitle stacked beside it.
   Now: the title sits on the number's line and the subtitle drops underneath,
   which is what the client asked for and also stops long titles wrapping into
   a two-line column beside a 36px disc.

   The page's own CSS makes .fl-tabs-label a flex row; a grid replaces it.

   Scoped to .fl-tabs-labels — the standalone list — on purpose. Beaver also
   renders a .fl-tabs-panel-label inside every panel, which carries the same
   .fl-tabs-label class but is display:none until the module flips to accordion
   mode below 992px. Setting display on it here would force all three of those
   labels visible on desktop, stacked beside the video. The accordion label
   already has its own treatment in the page's CSS. */
body.rdhs-public .rdhs-steps .fl-tabs-labels .fl-tabs-label {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr);
    column-gap: 16px;
    align-items: center;
}

body.rdhs-public .rdhs-steps .fl-tabs-labels .rdhs-step-n {
    grid-column: 1;
    grid-row: 1;
}

body.rdhs-public .rdhs-steps .fl-tabs-labels .rdhs-step-t {
    grid-column: 2;
    grid-row: 1;
}

body.rdhs-public .rdhs-steps .fl-tabs-labels .rdhs-step-s {
    grid-column: 2;
    grid-row: 2;
    margin-top: 6px;
}

/* ---- Chapter time on each step (client feedback 1.4, 23 Sep) ---------------
   The three tutorials became one walkthrough, and each step now opens it at
   that chapter. The time sits at the right-hand end of the step's first line,
   so the title and subtitle keep the width they had. The label grid gains a
   third column for it; on the accordion label below 992px Beaver lays the
   label out as a flex row and the time simply follows the text. */
body.rdhs-public .rdhs-steps .fl-tabs-labels .fl-tabs-label {
    grid-template-columns: 36px minmax(0, 1fr) auto;
}

/* The title keeps the full width beside the number, or a third column would
   push two of the three titles onto a second line. The time sits at the end of
   the subtitle's line instead. */
body.rdhs-public .rdhs-steps .fl-tabs-labels .rdhs-step-t {
    grid-column: 2 / span 2;
}

body.rdhs-public .rdhs-steps .fl-tabs-labels .rdhs-step-time {
    grid-column: 3;
    grid-row: 2;
    align-self: end;
    margin-top: 6px;
    padding-left: 12px;
}

body.rdhs-public .rdhs-steps .rdhs-step-time {
    font-family: Lato, sans-serif;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--rdhs-logo-blue);
    white-space: nowrap;
}

/* The active card is white with a navy outline (see "Active step" below), so
   the time takes the same navy as its title rather than the logo blue. */
body.rdhs-public .rdhs-steps .fl-tab-active .rdhs-step-time {
    color: #1b3a63;
}


/* ---- Tablets 768-991px: the steps were missing entirely --------------------
   The page CSS hides the standalone step list below 992px and expects Beaver's
   accordion labels to take over, but Beaver only switches the Tabs module into
   accordion mode below its own 768px breakpoint. Between the two, neither set
   of labels was on the page: no step titles, and now no way to reach a chapter.
   The standalone list comes back for that range, stacked above the video (the
   column grid is already dropped to a block below 992px). The list keeps the
   flex column and 12px gap the page CSS gives it, so only display is restated -
   with !important, because that is how the page CSS hides it. */
@media (min-width: 768px) and (max-width: 991px) {
    body.rdhs-public .rdhs-steps .fl-tabs-labels {
        display: flex !important;
        margin-bottom: 24px;
    }
}


/* ---- Tutorial column: no gap under the steps (client, Video 1, 2:49) --------
   The page CSS places the step list, the runtime note and Start Free Trial in
   rows 1-3 of a grid, with the video spanning all three rows on the right.
   With auto rows the grid shares the video's extra height out across every
   row, which opened a ~65px gap under the steps and another above the button.
   Making only the last row flexible keeps the note directly under the steps
   and the button directly under the note; the spare height goes below it. */
body.rdhs-public .fl-node-hw2c > .fl-col-content {
    grid-template-rows: auto auto 1fr;
}

/* Start Free Trial above the runtime note (team, 11 Sep). The modules were
   swapped in Beaver, which sets the order below 992px; on desktop the page CSS
   places them by grid row, so the rows are swapped here too. */
body.rdhs-public .fl-node-hw2btn {
    grid-row: 2;
}

body.rdhs-public .fl-node-hw2note {
    grid-row: 3;
}

/* "See a completed plan ->" in the runtime note. Its look used to be an inline
   style on the link; it is now this class, same result: navy, bold, no text
   underline, a 2px logo-blue rule under it. .fl-builder-content is needed to
   outrank the Text Editor module's own colour rule, which Beaver writes as
   .fl-builder-content .fl-node-x.fl-module-rich-text *:not(b, strong). */
body.rdhs-public .fl-builder-content .fl-rich-text a.rdhs-read-link {
    border-bottom: 2px solid var(--rdhs-logo-blue);
    color: #1b3a63;
    font-weight: 700;
    text-decoration: none;
}

body.rdhs-public .fl-builder-content .fl-rich-text a.rdhs-read-link:hover,
body.rdhs-public .fl-builder-content .fl-rich-text a.rdhs-read-link:focus {
    border-bottom-color: #1a6ba0;
    color: #1b3a63;
}

/* ---- Active step: outlined, not filled (client, Video 1, 3:28) -------------
   A solid navy step read as the same thing as the navy Start Free Trial below
   it. The active step is now white with a navy outline, and the number disc
   inverts to navy with a white numeral so the selection still reads at a
   glance. The outline is 2px - the 1px border plus a 1px inset shadow - so the
   card does not move when it becomes active.

   The Tabs module's own active colours were changed to match (text navy,
   background white). The page CSS still carries the old navy fill on a
   stronger selector than Beaver's, so it is restated here. Covers the desktop
   step list (.fl-tabs-label) and the accordion labels below 992px
   (.fl-tabs-panel-label). */
body.rdhs-public .rdhs-steps .fl-tabs-label.fl-tab-active,
body.rdhs-public .rdhs-steps .fl-tabs-panel-label.fl-tab-active {
    background: #ffffff;
    border-color: #1b3a63 !important;
    box-shadow: inset 0 0 0 1px #1b3a63;
    color: #1b3a63;
}

/* Beaver's vertical tabs remove the active tab's right border
   (.fl-tabs-vertical .fl-tabs-label.fl-tab-active { border-right: none
   !important }) so it joins the panel beside it. These steps are separate
   cards, so that left the outline 2px on three sides and 1px on the right.
   Restored on both the desktop step list and the accordion labels. */
body.rdhs-public .rdhs-steps .fl-tabs-label.fl-tab-active,
body.rdhs-public .rdhs-steps .fl-tabs-panel-label.fl-tab-active {
    border-right: 1px solid #1b3a63 !important;
}

/* Below 992px the steps become an accordion, and the Tabs module's 2px border
   setting draws a #dbe4f0 line under every panel. With the step cards touching,
   that line sat directly under each card like a second border. The cards get
   the same 12px gap as the desktop list instead, and no divider. */
@media (max-width: 991px) {

    body.rdhs-public .rdhs-steps .fl-tabs-panel {
        border-bottom: 0;
        border-top: 0;
        margin-bottom: 12px;
    }

    body.rdhs-public .rdhs-steps .fl-tabs-panel:last-child {
        margin-bottom: 0;
    }
}

body.rdhs-public .rdhs-steps .fl-tab-active .rdhs-step-n {
    background: #1b3a63;
    color: #ffffff;
}

body.rdhs-public .rdhs-steps .fl-tab-active .rdhs-step-s {
    color: #5a6779;
}

/* ---- "Ready when you are" panel (design option B, 23 Sep) ------------------
   The HTML module under the step list (.support-btn-wrapper) becomes a navy
   panel: title, runtime note with a clock, a white pill Start Free Trial and
   the "Prefer to read?" link beside it. It sits in row 2 of the tutorial
   grid, under the steps. The actions wrap when the 320px column is too narrow
   for the button and the link side by side. */
body.rdhs-public .fl-builder-content .support-btn-wrapper {
    grid-column: 1;
    grid-row: 2;
    margin: 0 0 0;
    padding: 20px 20px 25px;
    border-radius: 16px;
    background: #1b3a63;
    color: #ffffff;
    font-family: Lato, sans-serif;
}

body.rdhs-public .support-btn-wrapper .support-title {
    margin: 0 0 6px;
    font-family: Lora, Georgia, serif;
    font-size: 22px;
    font-weight: 600;
    line-height: 1.25;
    color: #ffffff;
}

body.rdhs-public .support-btn-wrapper .support-txt {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 20px;
    font-size: 14px;
    line-height: 1.4;
    color: #c9d8ec;
}

body.rdhs-public .support-btn-wrapper .support-ico {
    flex: none;
}

body.rdhs-public .support-btn-wrapper .support-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px 15px;
}

body.rdhs-public .support-btn-wrapper .support-btn a {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 13px 13px;
    border-radius: 999px;
    background: #ffffff;
    color: #1b3a63;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
    transition: background-color .15s ease;
}

body.rdhs-public .support-btn-wrapper .support-btn a:hover,
body.rdhs-public .support-btn-wrapper .support-btn a:focus {
    background: #e6eef8;
    color: #1b3a63;
}

body.rdhs-public .support-btn-wrapper .support-read {
    font-size: 13px;
    line-height: 1.5;
    color: #c9d8ec;
}

body.rdhs-public .support-btn-wrapper .support-read span {
    display: block;
}

body.rdhs-public .support-btn-wrapper .support-read a.rdhs-read-link {
    border-bottom: 1px solid #ffffff;
    color: #ffffff;
    font-weight: 700;
    text-decoration: none;
}

body.rdhs-public .support-btn-wrapper .support-read a.rdhs-read-link:hover,
body.rdhs-public .support-btn-wrapper .support-read a.rdhs-read-link:focus {
    border-bottom-color: #e8a53a;
    color: #ffffff;
}


/* ---- Step accordion below 992px (23 Oct) ------------------------------------
   Below 992px the Tabs module turns into an accordion and the step cards are
   its labels. The module's own CSS (10px 15px, no margin) outranked the page
   CSS, so the cards were cramped and the open video sat against its label.
   Beaver 2.11 also wraps the label markup in a span, which stacked the number
   above the title. Same arrangement as the desktop step list: number beside
   the title, subtitle under the title. */
@media (max-width: 991px) {

    body.rdhs-public .rdhs-steps .fl-tabs-panel .fl-tabs-panel-label {
        margin: 0 0 12px;
        padding: 16px 20px;
    }

    body.rdhs-public .rdhs-steps .fl-tabs-panel-label > span:first-child {
        display: grid;
        grid-template-columns: 36px minmax(0, 1fr);
        column-gap: 14px;
        align-items: center;
        text-align: left;
    }

    body.rdhs-public .rdhs-steps .fl-tabs-panel-label .rdhs-step-n {
        grid-column: 1;
        grid-row: 1 / span 2;
    }

    body.rdhs-public .rdhs-steps .fl-tabs-panel-label .rdhs-step-t {
        grid-column: 2;
        grid-row: 1;
    }

    body.rdhs-public .rdhs-steps .fl-tabs-panel-label .rdhs-step-s {
        grid-column: 2;
        grid-row: 2;
        margin-top: 4px;
    }
}

/* ---- Video facades (29 Sep) -------------------------------------------------
   All four steps play one YouTube video from different start times. An embed
   with ?start= shows a blurry upscaled poster, so each step renders a sharp
   poster (maxresdefault.jpg) and a play button instead; the page's Layout JS
   swaps in the player, at its start time, on click. Same frame as the old
   iframe: 16:9, radius 16, 1px border, panel shadow. */
body.rdhs-public .rdhs-steps .rdhs-yt {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border: 1px solid #c9d8ec;
    border-radius: 16px;
    background: #0f2440;
    box-shadow: 0 24px 48px -24px rgba(27, 58, 99, .35);
    cursor: pointer;
}

body.rdhs-public .rdhs-steps .rdhs-yt img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    margin: 0;
    border-radius: 0;
}

/* The player inside the frame: the frame already draws the border and shadow. */
body.rdhs-public .rdhs-steps .fl-tabs-panel-content .rdhs-yt iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

body.rdhs-public .rdhs-steps .rdhs-yt-play {
    position: absolute;
    top: 50%;
    left: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    margin: -36px 0 0 -36px;
    padding: 0 0 0 3px;
    border: 0;
    border-radius: 50%;
    background: #1b3a63;
    color: #ffffff;
    box-shadow: 0 10px 24px -8px rgba(15, 36, 64, .6);
    cursor: pointer;
    transition: background-color .15s ease, transform .15s ease;
}

body.rdhs-public .rdhs-steps .rdhs-yt:hover .rdhs-yt-play,
body.rdhs-public .rdhs-steps .rdhs-yt-play:focus-visible {
    background: #e8a53a;
    color: #1b2a3d;
    transform: scale(1.06);
}

body.rdhs-public .rdhs-steps .rdhs-yt-play:focus-visible {
    outline: 3px solid #ffffff;
    outline-offset: 3px;
}

@media (max-width: 767px) {
    body.rdhs-public .rdhs-steps .rdhs-yt-play {
        width: 56px;
        height: 56px;
        margin: -28px 0 0 -28px;
    }
}

/* ===========================================================================
   8.  CONTACT US
   =========================================================================== */


/* ---- Contact form submit ---------------------------------------------------
   The gold fill is set in the page's own Beaver CSS with !important, so this
   needs to out-specify it and force the same properties. Same navy primary as
   every other page. */
body.rdhs-public .rdhs-form .gform_wrapper .gform_footer button.gform_button,
body.rdhs-public .rdhs-form .gform_wrapper .gform_footer input[type=submit] {
    background: #1b3a63 !important;
    color: #ffffff !important;
}

body.rdhs-public .rdhs-form .gform_wrapper .gform_footer button.gform_button:hover,
body.rdhs-public .rdhs-form .gform_wrapper .gform_footer input[type=submit]:hover {
    background: #122c4d !important;
}

/* ---- "Prefer to talk?" panel -----------------------------------------------
   The panel used to be a single Text Editor holding three paragraphs, each with
   its font, size and colour set in a style attribute — so nothing about it could
   be edited in Beaver Builder without hand-editing HTML, and the eyebrow's gold
   had to be overridden from here by node id.

   It is now three modules: a Heading for the eyebrow, a Heading carrying the
   tel: link for the number, and a Text Editor for the line beneath. The two
   headings hold their own colour and type in module settings; this styles the
   paragraph, which the Text Editor has no colour setting for. */
body.rdhs-public .rdhs-contact-panel .fl-rich-text,
body.rdhs-public .rdhs-contact-panel .fl-rich-text p {
    color: #c9d8ec;
    font-family: Lato, sans-serif;
    font-size: 15px;
    line-height: 1.55;
    margin: 0;
}

/* The number is a link, so it would otherwise take the link colour and
   underline rather than the white it is set to. Keyed off the module rather
   than the heading level, so the tag can change for the sake of the document
   outline without the styling following it. */
body.rdhs-public .rdhs-contact-panel .fl-module-heading a,
body.rdhs-public .rdhs-contact-panel .fl-module-heading a:hover,
body.rdhs-public .rdhs-contact-panel .fl-module-heading a:focus {
    color: #ffffff;
    text-decoration: none;
}

/* ---- Contact detail cards --------------------------------------------------
   The three rows used to be one Text Editor separated by hairlines. As three
   Callouts they need the rule drawn between them instead. */
body.rdhs-public .fl-node-ct2sc2 .fl-col-content > .fl-module-callout + .fl-module-callout {
    border-top: 1px solid #e6ecf4;
    padding-top: 18px;
}

body.rdhs-public .fl-node-ct2sc2 .fl-col-content > .fl-module-callout {
    margin-bottom: 18px;
}

body.rdhs-public .fl-node-ct2sc2 .fl-col-content > .fl-module-callout:last-child {
    margin-bottom: 0;
}


/* ===========================================================================
   9.  BLOG
   =========================================================================== */


/* ---- Article cards ---------------------------------------------------------
   Six of the eight posts have a featured image and two do not, so the grid
   ran ragged. The client's call was to drop images from the archive entirely
   and let the cards be title, date and excerpt until images are used
   consistently. Hiding them here keeps the module's settings untouched, so
   restoring them later is a one-line revert. */
body.rdhs-public .rdhs-articles .fl-post-grid-image {
    display: none;
}

/* Without an image the card's top edge is the padding, which read as cramped
   against the 16px radius. */
body.rdhs-public .rdhs-articles .fl-post-grid-text {
    padding: 32px 28px;
}

/* "Read article →" carried the gold underline. */
body.rdhs-public .rdhs-articles .fl-post-grid-more {
    border-bottom-color: var(--rdhs-logo-blue);
}

body.rdhs-public .rdhs-articles .fl-post-grid-more:hover {
    border-bottom-color: #1a6ba0;
}


.fl-builder-pagination ul.page-numbers {
    border: none !important;
}

.fl-builder-pagination ul li {
    border: none !important;
}

/* Blog post grid pagination: no divider and no spacing of its own (team,
   11 Sep). The Blog page's builder CSS gave it a 1px #e6ecf4 top border, 40px
   margin and 32px/30px padding, and style.css a #ddd border with 30px padding;
   the section's own padding and the grid's gutter already space it. */
body.rdhs-public .rdhs-articles .fl-builder-pagination {
    border-top: 0;
    margin-bottom: 0;
    margin-top: 0;
    padding-bottom: 0;
    padding-top: 0;
}


/* ===========================================================================
   10. SINGLE POST
   =========================================================================== */


/* ---- Comments --------------------------------------------------------------
   Comments are switched off in PHP (rdhs_public_disable_post_comments), but
   the Themer layout still has a Comments module in it, and with the thread
   closed all it renders is the words "Comments are closed." — which advertises
   the very thing the client wanted gone. Hidden rather than deleted so the
   module and its styling survive if comments are ever turned back on; deleting
   it from the "Blog Details" Themer layout is the permanent version. */
body.rdhs-public.single-post .rdhs-comments,
body.rdhs-public.single-post .fl-module-fl-comments,
body.rdhs-public.single-post #comments,
body.rdhs-public.single-post #respond,
body.rdhs-public.single-post .comments-area,
body.rdhs-public.single-post #wpdcom {
    display: none;
}

/* ---- Article links ---------------------------------------------------------
   The gold underline again, this time from the post layout's own CSS rather
   than an inline style, so plain specificity is enough. */
body.rdhs-public .rdhs-post-body .fl-module-fl-post-content a {
    border-bottom-color: var(--rdhs-logo-blue);
}

body.rdhs-public .rdhs-post-body .fl-module-fl-post-content a:hover {
    border-bottom-color: #1a6ba0;
}


/* ---- Single post: article and sidebar start at the section padding ---------
   style.css (line ~3412) gives both columns of the single-post layout a 20px
   top padding, by node id, from the old design. With the section padding now
   set in Beaver, that pushed the article 20px lower than every other page's
   first content. Both columns lose it, so they stay aligned with each other. */
body.rdhs-public .fl-col-group .fl-col.rdhs-post-body,
body.rdhs-public .fl-col-group .fl-col.rdhs-post-side {
    padding-top: 0;
}


/* ===========================================================================
   11. LEGAL PAGES (Terms of Service, Privacy Policy)
   =========================================================================== */


/* ---- Legal body links -------------------------------------------------------
   Privacy Policy and Terms of Service carry their own page CSS in Beaver
   Builder, and it underlines body links in gold (#e8a53a) — the colour the
   client asked to drop everywhere else. Overridden here rather than in the page
   CSS because that lives in the database and is regenerated; one class more
   than the rule it beats is enough. */
body.rdhs-public .rdhs-legal .fl-rich-text a {
    border-bottom-color: var(--rdhs-logo-blue);
}

body.rdhs-public .rdhs-legal .fl-rich-text a:hover,
body.rdhs-public .rdhs-legal .fl-rich-text a:focus {
    border-bottom-color: #1a6ba0;
}


/* ---- Legal document structure ----------------------------------------------

   Terms of Service, rebuilt to the structure in terms-of-service-mockup.html.

   Everything here keys off ELEMENTS, not classes. An earlier version used
   rdhs-doc__* classes on every paragraph, which meant the design only held for
   as long as nobody edited the page: strip a class in the Text editor, or paste
   a paragraph without one, and that clause fell out of the design.

   So the document is plain markup and the rules describe what the elements mean
   in it:

       h2       the document title, and each Exhibit
       h3       a numbered section
       p        a clause
       strong   the clause's label ("a. Specific Services.")
       em       a note
       table    an exhibit table

   Nothing an editor can do to a class will break it, and text pasted without a
   <p> still inherits the body styling from the container. The one thing carried
   by structure rather than markup is the sub-clause indent, and losing it is
   cosmetic - the document still reads correctly.
   =========================================================================== */

/* Bare text pasted straight into a module still reads as body copy. */
body.rdhs-public .rdhs-legal .fl-rich-text {
    color: #4a5872;
    font-family: Lato, sans-serif;
    font-size: 15px;
    line-height: 1.7;
}

body.rdhs-public .rdhs-legal .fl-rich-text p {
    color: #4a5872;
    font-family: Lato, sans-serif;
    font-size: 15px;
    line-height: 1.7;
    margin: 0 0 8px;
}

/* The document title and the Exhibits. Each Exhibit is its own Text module, so
   the rule above it comes from the module boundary below - which means the
   title, first on the page, correctly has none. */
body.rdhs-public .rdhs-legal .fl-rich-text h2 {
    color: #1b3a63;
    font-family: Lora, Georgia, serif;
    font-size: 22px;
    font-weight: 600;
    line-height: 1.25;
    margin: 0 0 14px;
}

/* Numbered sections: small, and close to the clause beneath, so the document
   reads as one continuous contract rather than a series of articles. */
body.rdhs-public .rdhs-legal .fl-rich-text h3 {
    color: #1b3a63;
    font-family: Lora, Georgia, serif;
    font-size: 17px;
    font-weight: 600;
    line-height: 1.35;
    margin: 30px 0 8px;
}

body.rdhs-public .rdhs-legal .fl-rich-text strong {
    color: #14213a;
    font-weight: 700;
}

body.rdhs-public .rdhs-legal .fl-rich-text em {
    font-size: 14px;
}

/* Sub-clauses sit in from their section heading. Structural on purpose: every
   paragraph following a numbered section is a clause of it, and paragraphs
   before the first one - the preamble, and the Exhibit lead-ins - are not. */
body.rdhs-public .rdhs-legal .fl-rich-text h3 ~ p {
    margin-left: 22px;
}

/* The Exhibits are the document's real divisions, so they carry the rule. */
body.rdhs-public .rdhs-legal .fl-module-rich-text + .fl-module-rich-text {
    border-top: 2px solid var(--rdhs-border, #dbe4f0);
    margin-top: 44px;
    padding-top: 34px;
}

@media (max-width: 767px) {
    body.rdhs-public .rdhs-legal .fl-rich-text h3 ~ p {
        margin-left: 12px;
    }

    body.rdhs-public .rdhs-legal .fl-rich-text h2 { font-size: 20px; }
}


/* ---- Legal page title band: eyebrow spacing -------------------------------
   Terms of Service and Privacy Policy carry page CSS (stored in the builder)
   with `.rdhs-legal-hero .fl-heading { margin: 0 }`, which also cancels the
   "Legal" eyebrow's 12px bottom margin, so it sat directly on the title. Every
   other page's title band has 12px there. Restated here so it survives a
   builder save. */
body.rdhs-public .rdhs-legal-hero h6.fl-heading {
    margin-bottom: 12px;
}


/* ===========================================================================
   12. LOG IN AND LOST PASSWORD
   =========================================================================== */


/* ---- Log in and Lost password: title and form in one box ------------------
   Team's choice from the references (option A), with the form's own fields,
   button and links left exactly as they were, and nothing under the box. Both
   pages lost their pale title band: the heading moved into the form's column,
   and that column is the box - white, 1px border, 20px radius, shadow and
   padding are its Beaver settings (.rdhs-auth-box), the same look as the FAQ
   box. The heading carries .rdhs-heading-rule for the short blue rule.

   Here: the box's width cap, and the lost-password intro. Theme My Login prints
   that intro as p.message, a grey notice with a green bar; inside the box it is
   set as plain text under the title. */
body.rdhs-public .rdhs-auth-box {
    float: none;
    margin-left: auto;
    margin-right: auto;
    max-width: 520px;
}

/* style.css pads the lost-password container 70px top and bottom for the old
   open layout; inside the box that is empty space above the intro and below
   the button. */
body.rdhs-public .rdhs-auth-box .tml {
    max-width: 100%;
    padding-bottom: 0;
    padding-top: 0;
}

/* The bottom margin stays at the 20px Theme My Login forces with !important. */
body.rdhs-public .rdhs-auth-box .tml p.message {
    background: none;
    border: 0;
    box-shadow: none;
    color: #5a6779;
    font-size: 16px;
    line-height: 1.6;
    margin: 0 0 20px;
    padding: 0;
    text-align: center;
}


/* ---- Log in and Lost password below 480px (23 Oct) ------------------------
   On a phone the box is about 300px wide inside, so the button runs the full
   width and the Register / Forgot Password links sit centred under it.
   Theme My Login floats the button's wrapper left and the links right, so
   both floats are cleared here. */
@media (max-width: 479px) {
    body.rdhs-public .rdhs-auth-box .tml.tml-login .tml-submit-wrap {
        float: none;
    }

    body.rdhs-public .rdhs-auth-box .tml .tml-button {
        width: 100%;
    }

    body.rdhs-public .rdhs-auth-box .tml ul.tml-links {
        clear: both;
        float: none;
        margin: 16px 0 0;
        display: flex;
        flex-wrap: wrap;
        gap: 6px 20px;
        justify-content: center;
        text-align: center;
    }

    body.rdhs-public .rdhs-auth-box .tml .tml-links li {
        float: none;
        margin: 0;
    }
}


/* ---- Log in and Lost password: box centred between header and footer -------
   style.css stretches .content-push to the window height (less the footer
   strip) so short pages keep the footer at the bottom. All of that extra height
   used to fall below the box: 80px above it, 193px below on a 900px-tall window
   and 593px on a 1300px one. The page's Beaver content now fills that area and
   centres its row, and the row's top and bottom padding are equal, so the space
   above and below the box match at any window height. Scoped with :has() to
   the pages that contain the auth box. */
body.rdhs-public .content-push:has(.rdhs-auth-box) {
    display: flex;
    flex-direction: column;
}

body.rdhs-public .content-push:has(.rdhs-auth-box) > .fl-builder-content:has(.rdhs-auth-box) {
    display: flex;
    flex: 1 0 auto;
    flex-direction: column;
    justify-content: center;
}

/* In a flex column a fixed-width Beaver row (auto side margins) shrinks to its
   content. That includes the header's rows: the header layout is display:
   contents, so its rows are flex items here too, and without this the menu
   wrapped "Free Trial" onto a second line. */
body.rdhs-public .content-push:has(.rdhs-auth-box) > .fl-builder-content > .fl-row {
    width: 100%;
}


/* ---- Log in and Lost password: error and notice panels -----------------------
   Theme My Login's errors ("The email field is empty.") arrived as a grey
   #f1f1f1 box with a red bar and pure #ff0000 text at 15px - about 4:1 on the
   grey, and nothing like the box around it. Inside the box they are a soft red
   panel with the box's rounded corners and dark red text (7:1). Success notices
   from the same plugin (for example after requesting a new password) get the
   matching green panel. The markup is the plugin's: ul.tml-errors / li.tml-error
   and ul.tml-messages / li.tml-message inside .tml-alerts. */
body.rdhs-public .rdhs-auth-box .tml-alerts .tml-errors,
body.rdhs-public .rdhs-auth-box .tml-alerts .tml-messages {
    border: 1px solid #f1c4c4;
    border-radius: 10px;
    box-shadow: none;
    background: #fdf3f3;
    color: #9f1c1c;
    list-style: none;
    margin: 0 0 20px;
    padding: 12px 16px;
}

body.rdhs-public .rdhs-auth-box .tml-alerts .tml-messages {
    background: #eff7f2;
    border-color: #bfdfcb;
    color: #1f5c3d;
}

body.rdhs-public .rdhs-auth-box .tml-alerts .tml-errors .tml-error,
body.rdhs-public .rdhs-auth-box .tml-alerts .tml-messages .tml-message {
    background: none;
    border: 0;
    box-shadow: none;
    color: inherit;
    font-size: 15px;
    line-height: 1.5;
    margin: 0;
    padding: 0;
}

body.rdhs-public .rdhs-auth-box .tml-alerts li + li {
    margin-top: 6px;
}

body.rdhs-public .rdhs-auth-box .tml-alerts strong {
    color: inherit;
    font-weight: 700;
}


/* ===========================================================================
   13. PRICING
   =========================================================================== */


/*
 * RDHS pricing page — calculator card and supporting blocks.
 * Colours follow the shared design tokens (navy #1b3a63, gold #e8a53a).
 */

/* ---- Calculator card ---------------------------------------------------- */
.rdhs-calc {
    max-width: 1060px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 420px minmax(0, 1fr);
    background: #ffffff;
    border: 1px solid #dbe4f0;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 24px 48px -28px rgba(27, 58, 99, .4);
    text-align: left;
}

.rdhs-calc__left {
    padding: 40px;
    border-right: 1px solid #dbe4f0;
}

.rdhs-calc__right {
    padding: 40px;
}

.rdhs-calc__label {
    margin: 0 0 15px;
    font-family: Lato, sans-serif;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.4;
    color: #1b3a63;
}

/* Ten tiles now: 2-10 plus "11+" (client brief, Sep 2026). */
.rdhs-caps {
    display: grid;
    grid-template-columns: repeat(10, minmax(0, 1fr));
    gap: 6px;
    margin: 15px 0 15px;
}

/* "11+" needs room for two characters and a plus, so it keeps its own size. */
.rdhs-cap-btn--more {
    font-size: 14px;
    letter-spacing: -0.2px;
}

/* The nine numbers share the row evenly and "11+" takes the width its three
   characters need, so all ten stay on one line however wide the column is
   (client screenshots, 23 Sep). */
.rdhs-caps {
    grid-template-columns: repeat(9, minmax(0, 1fr)) auto;
}

/* Beaver's layout CSS sizes every button inside the builder content
   (.fl-builder-content button:not(.fl-content-ui-button), 16px), which outranks
   a lone class. These match its weight so the tiles keep their own size. */
.fl-builder-content button.rdhs-cap-btn {
    font-size: 15px;
}

.fl-builder-content button.rdhs-cap-btn--more {
    padding: 0 8px;
    font-size: 14px;
}

.rdhs-cap-btn {
    height: 44px;
    padding: 0;
    border: 1px solid #c9d8ec;
    border-radius: 10px;
    background: #ffffff;
    font-family: Lato, sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: #1b3a63;
    cursor: pointer;
    transition: background .12s ease, border-color .12s ease, color .12s ease;
}

.rdhs-cap-btn:hover {
    border-color: #1b3a63;
    background: #f3f6fb;
}

.rdhs-cap-btn.is-active {
    background: #1b3a63;
    border-color: #1b3a63;
    color: #ffffff;
}

.rdhs-cap-btn:focus-visible {
    outline: 3px solid #e6eef8;
    outline-offset: 2px;
}

.rdhs-calc__more {
    margin: -5px 0 10px;
    font-family: Lato, sans-serif;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.5;
    color: #1b3a63;
}

.rdhs-calc__more a {
    color: #1b3a63;
    text-decoration: underline;
}

.rdhs-calc__more a:hover,
.rdhs-calc__more a:focus {
    color: #2185c5;
}

.rdhs-calc__note {
    margin: 0 0 20px;
    font-family: Lato, sans-serif;
    font-size: 13px;
    line-height: 1.5;
    color: #5a6779;
}

.rdhs-price {
    background: #f3f6fb;
    border-radius: 14px;
    padding: 24px;
    text-align: center;
}

.rdhs-price__label {
    margin: 0 0 6px;
    font-family: Lato, sans-serif;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0;
    text-transform: none;
    color: #1b3a63;
}

.rdhs-price__amount {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 4px;
    margin: 0 0 6px;
}

.rdhs-price__value {
    font-family: Lora, Georgia, serif;
    font-size: 60px;
    font-weight: 700;
    line-height: 1;
    color: #1b3a63;
}

.rdhs-price__per {
    font-family: Lato, sans-serif;
    font-size: 20px;
    color: #5a6779;
}

.rdhs-price__line {
    margin: 0;
    text-wrap: pretty;
    font-family: Lato, sans-serif;
    font-size: 14px;
    line-height: 1.5;
    color: #5a6779;
}

.rdhs-calc__actions {
    display: grid;
    gap: 20px;
    margin-top: 20px;
}

.rdhs-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 15px 30px;
    border-radius: 999px;
    font-family: Lato, sans-serif;
    font-size: 16px;
    font-weight: 700;
    text-decoration: none;
    transition: background .12s ease, color .12s ease;
}

/* Green, as the client's design has it. The class name is Beaver's original
   "gold" from the first build and is left alone: js/rdhs-payments.js falls back
   to it when it looks for the calculator's button. */
.rdhs-btn--gold {
    background: var(--rdhs-green);
    color: #ffffff;
    border: 0;
}

.rdhs-btn--gold:hover {
    background: var(--rdhs-green-dark);
    color: #ffffff;
}

/* ---- Under the button ------------------------------------------------------
   "Talk to Us" used to sit here. The client's design puts the reassurance line
   and the phone number in its place; Contact Us moved to the navy band below. */
.rdhs-calc__trust {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: -6px 0 0;
    font-family: Lato, sans-serif;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.4;
    color: #1b3a63;
}

.rdhs-calc__trust svg {
    flex: none;
    color: var(--rdhs-green);
}

.rdhs-calc__questions {
    margin: 0;
    padding-top: 18px;
    border-top: 1px solid #dbe4f0;
    text-align: center;
    font-family: Lato, sans-serif;
    font-size: 15px;
    line-height: 1.5;
    color: #5a6779;
}

.rdhs-calc__questions a {
    color: #1b3a63;
    font-weight: 700;
    text-decoration: none;
    border-bottom: 2px solid var(--rdhs-logo-blue);
}

.rdhs-calc__questions a:hover {
    border-bottom-color: #1a6ba0;
    color: #122c4d;
}

.rdhs-btn--outline {
    padding: 13px 28px;
    border: 2px solid #1b3a63;
    color: #1b3a63;
    background: transparent;
}

.rdhs-btn--outline:hover {
    background: #1b3a63;
    color: #ffffff;
}

/* ---- "Every plan includes" --------------------------------------------- */
.rdhs-calc__eyebrow {
    margin: 0 0 16px;
    font-family: Lato, sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #222222;
}

.rdhs-includes {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 12px;
}

.rdhs-includes li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-family: Lato, sans-serif;
    font-size: 15px;
    line-height: 1.5;
    color: #1b3a63;
}

.rdhs-includes li::before {
    /* The Font Awesome check, matching the trust badges and every other tick on
       the site. This used to be the Unicode \2713, which is a noticeably lighter
       glyph in the body font — the two ticks did not look like the same mark.
       The stack covers both Font Awesome builds loaded here: 7 from Beaver, and
       4.7 from header.php, whose family is just "FontAwesome". */
    content: "\f00c";
    font-family: "Font Awesome 7 Free", "Font Awesome 5 Free", FontAwesome;
    font-weight: 900;
    -webkit-font-smoothing: antialiased;
    flex: none;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #2d7a60;
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
}

.rdhs-calc__divider {
    height: 1px;
    background: #e6ecf4;
    margin: 22px 0;
}

.rdhs-calc__extras {
    display: grid;
    gap: 10px;
    margin: 0;
    font-family: Lato, sans-serif;
    font-size: 14px;
    line-height: 1.5;
    color: #5a6779;
}

.rdhs-calc__extras strong {
    color: #1b3a63;
}

/* Grid items keep their margins, so the theme's paragraph margin would add to the gap. */
.rdhs-calc__extras p {
    margin: 0;
}

.rdhs-calc-footnote {
    margin: 22px 0 0;
    text-align: center;
    font-family: Lato, sans-serif;
    font-size: 15px;
    line-height: 1.6;
    color: #3d4a5c;
}

.rdhs-calc-footnote a {
    color: #1b3a63;
    font-weight: 700;
    text-decoration: none;
    border-bottom: 2px solid #2185c5;
}

/* ---- Pricing page card (Beaver Builder modules) ---------------------------
   The same card as .rdhs-calc above, assembled from builder modules so the copy
   is edited in Beaver Builder: an outer column (.rdhs-pricing-card) holds a
   nested pair of columns, [rdhs_pricing_calculator] fills the left one, and
   Heading / List / Separator / Text Editor modules fill the right.

   This section loads after Beaver's layout CSS and the shared sections above,
   so several selectors below match the weight of the rule they replace rather
   than outranking it - keep it after them. */
.fl-col.rdhs-pricing-card {
    float: none;
    max-width: 1060px;
    margin: 0 auto;
}

.rdhs-pricing-card > .fl-col-content {
    background: #ffffff;
    border: 1px solid #dbe4f0;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 24px 48px -28px rgba(27, 58, 99, .4);
    text-align: left;
}

/* The two halves are laid out as a flex row so they match in height and the
   divider between them runs the full way down. Their WIDTHS are Beaver's own
   column settings (Column > Width, 50% and 50% today) - this file no longer
   sets them, so the split can be changed in the builder without touching CSS.
   flex-basis: auto keeps whatever percentage Beaver writes for each column. */
.rdhs-pricing-card .fl-col-group-nested {
    display: flex;
    align-items: stretch;
}

/* Beaver's clearfix pseudo-elements would show up as flex items. */
.rdhs-pricing-card .fl-col-group-nested::before,
.rdhs-pricing-card .fl-col-group-nested::after {
    content: none;
}

/* Floats and Beaver's 400px cap on narrow columns are dropped; the width Beaver
   sets on each column is left alone. */
.rdhs-pricing-card .fl-col.rdhs-pricing-card__left,
.rdhs-pricing-card .fl-col.rdhs-pricing-card__right {
    flex: 0 0 auto;
    float: none;
    max-width: none;
    min-width: 0;
    margin: 0;
}

/* Beaver zeroes column side padding at phone width with
   `.fl-col[data-node] .fl-col-content`, so these carry more weight than that. */
.rdhs-pricing-card .fl-col.rdhs-pricing-card__left > .fl-col-content,
.rdhs-pricing-card .fl-col.rdhs-pricing-card__right > .fl-col-content {
    height: 100%;
    padding: 40px;
}

.rdhs-pricing-card .fl-col.rdhs-pricing-card__left > .fl-col-content {
    border-right: 1px solid #dbe4f0;
}

/* This kicker is the card's own dark label, set apart from the shared eyebrow rule.
   The 29px line-height is the theme paragraph's, which the label used to be. */
/* "Every Plan Includes" is a serif heading with a rule under it, not the small
   uppercase kicker it used to be (client screenshots, 23 Sep). */
body .fl-builder-content .rdhs-pricing-card h6.rdhs-pricing-card__eyebrow,
body .fl-builder-content .rdhs-pricing-card .rdhs-pricing-card__eyebrow h6.fl-heading,
body .fl-builder-content .rdhs-pricing-card .rdhs-pricing-card__eyebrow h6.fl-heading .fl-heading-text {
    margin: 0;
    font-family: Lora, Georgia, serif;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: 0;
    text-transform: none;
    color: #1b3a63;
}

.rdhs-pricing-card__eyebrow {
    margin-bottom: 20px;
    padding-bottom: 14px;
    border-bottom: 1px solid #dbe4f0;
}

/* "Every plan includes": a List module. The tick is the list icon, drawn as the
   same green disc as the trust badges. */
.rdhs-pricing-includes .fl-list {
    display: grid;
    gap: 5px;
}

/* Font size, line-height and the 15px after each item are what the theme gave the
   <li> elements this list replaced. */
.rdhs-pricing-includes .fl-list .fl-list-item {
    margin-bottom: 10px;
    padding: 0;
    font-size: 15px;
    line-height: 1.5;
}

.rdhs-pricing-includes .fl-list-item-heading {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

/* Flex, not Beaver's inline-block, so no text baseline space is added under the disc. */
.rdhs-pricing-includes .fl-list-item-heading .fl-list-item-heading-icon {
    display: flex;
    flex: none;
    margin: 0;
}

.fl-row .fl-col .rdhs-pricing-includes .fl-list-item-heading-icon .fl-list-item-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    padding: 0;
    border-radius: 50%;
    background: #2d7a60;
    color: #ffffff;
    font-size: 11px;
}

.rdhs-pricing-includes .fl-list-item-heading .fl-list-item-heading-text {
    display: block;
    font-family: Lato, sans-serif;
    font-size: 16px;
    line-height: 1.3;
    color: #1b3a63;
}

.rdhs-pricing-card__divider {
    margin: 22px 0;
}

.rdhs-pricing-card__extras .fl-rich-text {
    display: grid;
    gap: 10px;
    font-family: Lato, sans-serif;
    font-size: 14px;
    line-height: 1.5;
    color: #5a6779;
}

/* The theme's paragraph size and colour apply here, as they did in the old card;
   only the spacing between paragraphs belongs to this card. */
.rdhs-pricing-card__extras .fl-rich-text p {
    margin: 0;
}

.rdhs-calc-footnote p {
    margin: 0;
    font: inherit;
    color: inherit;
}

.rdhs-pricing-card__extras strong {
    color: #1b3a63;
}

.rdhs-pricing-card__extras + .rdhs-pricing-card__extras {
    margin-top: 10px;
}

/* "Sign up for pay-per-plan →" (node pr1kx3, logged-out visitors only). It sits
   straight under the pay-as-you-go line and opens the Gravity Forms sign-up on
   /pay-per-service-plan/ that emails David - the live site's "Sign up now"
   button. Styled like the site's other inline text links: navy, bold, with the
   logo-blue underline. The module is a single .fl-module.fl-rich-text element,
   so the link is reached from the module class directly. */
.rdhs-pricing-card__extras.rdhs-pricing-card__extras.rdhs-pricing-card__ppsp {
    margin-top: 4px;
}

.rdhs-pricing-card__ppsp a {
    border-bottom: 2px solid var(--rdhs-logo-blue);
    color: #1b3a63;
    font-weight: 700;
    text-decoration: none;
}

.rdhs-pricing-card__ppsp a:hover,
.rdhs-pricing-card__ppsp a:focus-visible {
    border-bottom-color: #1a6ba0;
    color: #122c4d;
}

@media (max-width: 991px) {
    .fl-col.rdhs-pricing-card {
        max-width: 760px;
    }

    /* Beaver stacks the two columns itself below this width; the flex row
       would fight that, so it is dropped. */
    .rdhs-pricing-card .fl-col-group-nested {
        display: block;
    }

    .rdhs-pricing-card .fl-col.rdhs-pricing-card__left > .fl-col-content {
        border-right: 0;
        border-bottom: 1px solid #dbe4f0;
    }
}

@media (max-width: 767px) {
    .rdhs-pricing-card .fl-col.rdhs-pricing-card__left > .fl-col-content,
    .rdhs-pricing-card .fl-col.rdhs-pricing-card__right > .fl-col-content {
        padding: 28px;
    }
}


/* ---- Responsive --------------------------------------------------------- */
@media (max-width: 991px) {
    .rdhs-calc {
        max-width: 760px;
        grid-template-columns: 1fr;
    }

    .rdhs-calc__left {
        border-right: 0;
        border-bottom: 1px solid #dbe4f0;
    }
}

@media (max-width: 767px) {
    .rdhs-calc {
        grid-template-columns: 1fr;
    }

    .rdhs-calc__left {
        border-right: 0;
        border-bottom: 1px solid #dbe4f0;
        padding: 28px;
    }

    .rdhs-calc__right {
        padding: 28px;
    }

    .rdhs-caps {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }

    .rdhs-price__value {
        font-size: 48px;
    }
}

.rdhs-calc-panel.is-call-for-pricing .rdhs-price__value {
    font-size: 40px;
    line-height: 1.15;
}

.rdhs-calc-panel.is-call-for-pricing .rdhs-price__per {
    display: none;
}

.rdhs-calc-panel.is-call-for-pricing .rdhs-price__line {
    margin-top: 10px;
}

.rdhs-calc-panel.is-call-for-pricing .rdhs-btn--gold,
.rdhs-calc-panel.is-call-for-pricing .rdhs-calc__trust {
    display: none;
}

/* Without the button above it the rule over the phone line has nothing to
   separate, so it goes. */
.rdhs-calc-panel.is-call-for-pricing .rdhs-calc__questions {
    padding-top: 0;
    border-top: 0;
}


/* ---- Flexible Options panel (client brief, Sep 2026) -----------------------
   Rush review, pay-as-you-go and multiple homes were three paragraphs under the
   includes list. They are now one bordered panel of rows, each with its price
   or action on the right, which is what the client's file shows. */
.rdhs-pricing-card__flex {
    margin-top: 4px;
}

.rdhs-flex-panel__head svg {
    flex: none;
    box-sizing: content-box;
    width: 16px;
    height: 16px;
    padding: 5px;
    background: #ffffff;
    border: 1px solid #dbe4f0;
    border-radius: 7px;
}

.rdhs-flex-panel__head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 20px;
    background: linear-gradient(180deg, #eef3fa, #f5f8fc);
    border: 1px solid #dbe4f0;
    border-bottom: 0;
    border-radius: 14px 14px 0 0;
    font-family: Lora, Georgia, serif;
    font-size: 17px;
    font-weight: 600;
    color: #1b3a63;
}

.rdhs-flex-panel__rows {
    background: #ffffff;
    border: 1px solid #dbe4f0;
    border-radius: 0 0 14px 14px;
    overflow: hidden;
}

.rdhs-flex-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 14px 20px;
}

.rdhs-flex-row + .rdhs-flex-row {
    border-top: 1px solid #e6ecf4;
}

.rdhs-flex-row__title,
.rdhs-flex-row__desc,
.rdhs-flex-row__value {
    margin: 0;
    font-family: Lato, sans-serif;
    line-height: 1.45;
}

.rdhs-flex-row__title {
    font-size: 15px;
    font-weight: 700;
    color: #1b3a63;
}

.rdhs-flex-row__desc {
    font-size: 14px;
    color: #5a6779;
}

.rdhs-flex-row__value {
    flex: none;
    font-size: 17px;
    font-weight: 700;
    color: #1b3a63;
    text-align: right;
    white-space: nowrap;
}

.rdhs-flex-row__unit {
    font-size: 13px;
    font-weight: 400;
    color: #5a6779;
}

.rdhs-flex-row__link {
    color: #1b3a63;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    border-bottom: 2px solid var(--rdhs-logo-blue);
}

.rdhs-flex-row__link:hover {
    border-bottom-color: #1a6ba0;
    color: #122c4d;
}

/* Everyone sees "Sign up ->", customers included: a customer can take a
   pay-per-plan home too, and the client's own file shows the link to all
   visitors (23 Sep). It used to be hidden for signed-in users, a leftover from
   the logged-out-only module it replaced. */


/* ---- "Larger homes & groups" band ------------------------------------------
   The single grey footnote under the card became the navy band from the
   client's design: the 10+ question on the left, phone and Contact Us on the
   right. Built from ordinary Beaver modules - two columns, two Headings, a Text
   Editor and two Buttons - so every part is editable in the builder. The navy
   fill, radius, padding and the gap above it are column settings; only the type
   and the button colours are here.
   The capacity picker's "11+" tile scrolls here and flashes the band - see
   js/rdhs-payments.js. */
.rdhs-large-homes {
    /* Same width as the pricing card above it. Beaver floats its columns, and a
       floated box ignores auto margins, hence float: none as well. */
    box-sizing: border-box;
    float: none;
    max-width: 1060px;
    margin-left: auto;
    margin-right: auto;
    transition: box-shadow .4s ease;
}

/* The navy fill and the gap above it are on .fl-col-content (Beaver puts a
   column's background and margins there), so the flash has to be on that box
   too, or the ring sits around the column and floats above the band. */
.rdhs-large-homes > .fl-col-content {
    transition: box-shadow .4s ease;
}

.rdhs-large-homes.is-flash > .fl-col-content {
    box-shadow: 0 0 0 4px rgba(33, 133, 197, .55);
}

/* Text and buttons side by side, buttons centred against the whole text block. */
.rdhs-large-homes .fl-col-group-nested {
    display: flex;
    align-items: center;
}

.rdhs-large-homes .fl-col-group-nested::before,
.rdhs-large-homes .fl-col-group-nested::after {
    content: none;
}

.rdhs-large-homes .fl-col.rdhs-large-homes__text,
.rdhs-large-homes .fl-col.rdhs-large-homes__actions {
    flex: 0 0 auto;
    float: none;
    max-width: none;
    min-width: 0;
}

/* Beaver stacks a column's modules (.fl-col-content is a flex column), so the
   two buttons need the row direction to sit side by side. */
.rdhs-large-homes .rdhs-large-homes__actions > .fl-col-content {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
}

/* ---- Type ---- */
body .fl-builder-content .rdhs-large-homes h6.rdhs-large-homes__eyebrow {
    margin: 0;
    font-family: Lato, sans-serif;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: .3px;
    text-transform: none;
    color: #9db8da;
}

body .fl-builder-content .rdhs-large-homes h3.rdhs-large-homes__title {
    margin: 6px 0 0;
    padding: 0;
    font-family: Lora, Georgia, serif;
    font-size: 24px;
    font-weight: 600;
    line-height: 1.25;
    color: #ffffff;
}

.rdhs-large-homes .rdhs-large-homes__desc {
    margin-top: 8px;
}

body .fl-builder-content .rdhs-large-homes .rdhs-large-homes__desc p {
    margin: 0;
    font-family: Lato, sans-serif;
    font-size: 15px;
    line-height: 1.6;
    color: #c9d8ec;
}

/* ---- The two buttons -------------------------------------------------------
   Colours, padding and the outline are the Button modules' own settings, so
   they can be changed in the builder. Only the pill shape and the type are
   here, since Beaver has no radius field on this module. */
.rdhs-large-homes .fl-module-button,
.rdhs-large-homes .fl-button-wrap {
    margin: 0;
}

/* Beaver's "transparent" button style draws its border in the background colour
   at the background opacity, which on this band is invisible. The outline is
   set here; the colours either side of it are still the module's settings. */
.rdhs-large-homes .rdhs-large-homes__contact a.fl-button {
    border: 2px solid rgba(255, 255, 255, .6);
}

.rdhs-large-homes .rdhs-large-homes__contact a.fl-button:hover {
    border-color: rgba(255, 255, 255, .85);
}

.rdhs-large-homes a.fl-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    font-family: Lato, sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
}

/* Tablets and phones: the band stacks. Side by side under 992px left the
   question 245px wide and broke it across two lines beside the buttons. */
@media (max-width: 991px) {
    .rdhs-large-homes .fl-col-group-nested {
        display: block;
    }

    .rdhs-large-homes .rdhs-large-homes__actions > .fl-col-content {
        justify-content: flex-start;
        margin-top: 18px;
    }
}

@media (max-width: 767px) {
    .rdhs-large-homes .rdhs-large-homes__actions > .fl-col-content {
        display: grid;
    }

    .rdhs-flex-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .rdhs-flex-row__value {
        text-align: left;
    }
}


/* ===========================================================================
   14. PAYMENT PAGE (/select-package/?slots=N)
   =========================================================================== */


/*
 * Payment page - /select-package/?slots=N (page 216).
 *
 * The add-home payment step in the site's current design: a white card on the
 * page band, like the Pricing card, with the registration page's fields and
 * buttons. The markup and IDs are the original package page's, because
 * custom.js (coupons) and card.js (card choice, Make Payment) depend on them, so
 * the old rules in style.css are overridden here rather than removed. Every
 * selector starts from .pkg-confirm-container.rdhs-payment-panel, one class
 * more than the style.css rule it replaces.
 *
 * Two things are left to the scripts on purpose:
 * - the saved-card list and the new-card form are shown and hidden by card.js
 *   with inline display styles, so neither is given a display value here;
 * - the price rows keep style.css's floats, because custom.js reveals the
 *   discount row with .show(), which forces display: block on it.
 */

.pkg-confirm-container.rdhs-payment-panel {
    max-width: 640px;
    margin: 36px auto 0;
    padding: 36px 40px;
    background: #ffffff;
    border: 1px solid #dbe4f0;
    border-radius: 16px;
    box-shadow: 0 24px 48px -28px rgba(27, 58, 99, .4);
    color: #3d4a5c;
    font-family: Lato, sans-serif;
    text-align: left;
}

/* ---- "Have a coupon?" ------------------------------------------------------
   The toggle is a link, not a button. style.css paints every <button> inside
   .payment-form-wrap solid green, uppercase and 44px tall, which beats the
   plain .rdhs-coupon-toggle rule further down this file - so it is restated
   here with the panel's own specificity. */
.pkg-confirm-container.rdhs-payment-panel .payment-form-wrap .rdhs-coupon-toggle {
    display: inline-block;
    width: auto;
    height: auto;
    margin: 0 0 20px;
    padding: 0;
    background: none;
    border: none;
    border-radius: 0;
    color: #2185c5;
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    text-align: left;
    text-transform: none;
    text-decoration: underline;
    cursor: pointer;
}

.pkg-confirm-container.rdhs-payment-panel .payment-form-wrap .rdhs-coupon-toggle:hover,
.pkg-confirm-container.rdhs-payment-panel .payment-form-wrap .rdhs-coupon-toggle:focus {
    background: none;
    color: #1b6ea3;
}

.pkg-confirm-container.rdhs-payment-panel .payment-form-wrap .rdhs-coupon-toggle:focus-visible {
    outline: 2px solid #2185c5;
    outline-offset: 3px;
}

/* The box starts closed. The grid rule below is one class longer than
   .rdhs-hidden, so the hidden state has to be restated at the same weight or
   the coupon field is always on show. */
.pkg-confirm-container.rdhs-payment-panel .payment-form-wrap .coupon-blk.rdhs-hidden {
    display: none;
}

/* ---- Coupon ----------------------------------------------------------------
   Label and loader on the first line, field and button on the second, message
   below. Placed explicitly because the loader sits between them in the markup. */
.pkg-confirm-container.rdhs-payment-panel .payment-form-wrap .coupon-blk {
    position: static;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 12px;
    margin: 0 0 24px;
    padding: 0;
    background: none;
    border-radius: 0;
    color: inherit;
}

.pkg-confirm-container.rdhs-payment-panel .payment-form-wrap .coupon-blk label {
    grid-row: 1;
    grid-column: 1;
    margin: 0 0 8px;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.4;
    color: #1b3a63;
}

.pkg-confirm-container.rdhs-payment-panel .payment-form-wrap .coupon-blk .ajax-loader {
    grid-row: 1;
    grid-column: 2;
    justify-self: end;
    position: static;
    width: 16px;
    height: 16px;
    margin: 0 0 8px;
}

.pkg-confirm-container.rdhs-payment-panel .payment-form-wrap .coupon-blk #coupon {
    grid-row: 2;
    grid-column: 1;
}

.pkg-confirm-container.rdhs-payment-panel .payment-form-wrap .coupon-blk .btn-apply-discount {
    grid-row: 2;
    grid-column: 2;
}

.pkg-confirm-container.rdhs-payment-panel .payment-form-wrap .coupon-blk #coupon-msg {
    grid-row: 3;
    grid-column: 1 / -1;
    font-size: 14px;
    line-height: 1.4;
}

/* Fields: the registration page's look. style.css gives both a fixed height and
   pins the coupon field's padding to 0 15px with !important, so the height is set
   outright here and there is no vertical padding - a single-line field centres
   its own text. Named by ID because style.css sizes them by ID too. */
.pkg-confirm-container.rdhs-payment-panel .payment-form-wrap .coupon-blk #coupon,
.pkg-confirm-container.rdhs-payment-panel .add-card-name #cardholder-name {
    box-sizing: border-box;
    width: 100%;
    height: 48px;
    margin: 0;
    padding: 0 14px;
    background: #f7fafd;
    border: 1px solid #c9d8ec;
    border-radius: 4px;
    box-shadow: none;
    color: #3d4a5c;
    font-family: Lato, sans-serif;
    font-size: 16px;
    line-height: 1.4;
}

.pkg-confirm-container.rdhs-payment-panel .payment-form-wrap .coupon-blk #coupon:focus,
.pkg-confirm-container.rdhs-payment-panel .add-card-name #cardholder-name:focus {
    background: #ffffff;
    border-color: #1b3a63;
    box-shadow: 0 0 0 3px rgba(27, 58, 99, .12);
    outline: none;
}

/* custom.js locks the field once a coupon is applied. */
.pkg-confirm-container.rdhs-payment-panel .payment-form-wrap .coupon-blk #coupon:disabled {
    background: #eef2f7;
    border-color: #dbe4f0;
    color: #5a6779;
    cursor: default;
}

/* Buttons and fields share one 48px height on this page. The buttons get it as
   a fixed height with the label centred by flex, instead of from padding plus
   line height - that gave Apply Coupon 44px (42px on a phone, where style.css
   narrows it) and Make Payment 51px, against the 48px fields. */
.pkg-confirm-container.rdhs-payment-panel .payment-form-wrap .coupon-blk .btn-apply-discount {
    position: static;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    height: 48px;
    margin: 0;
    padding: 0 22px;
    background: #ffffff;
    border: 1px solid #1b3a63;
    border-radius: 999px;
    color: #1b3a63;
    font-family: Lato, sans-serif;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .3px;
    line-height: 1.2;
    text-transform: none;
    white-space: nowrap;
    cursor: pointer;
}

.pkg-confirm-container.rdhs-payment-panel .payment-form-wrap .coupon-blk .btn-apply-discount:not(:disabled):hover,
.pkg-confirm-container.rdhs-payment-panel .payment-form-wrap .coupon-blk .btn-apply-discount:not(:disabled):focus {
    background: #1b3a63;
    color: #ffffff;
}

.pkg-confirm-container.rdhs-payment-panel .payment-form-wrap .coupon-blk .btn-apply-discount:disabled {
    background: #e6ecf4;
    border-color: #e6ecf4;
    color: #8a97a8;
    cursor: default;
}

.pkg-confirm-container.rdhs-payment-panel .payment-form-wrap .coupon-blk #coupon-msg:not(:empty) {
    margin-top: 8px;
}

.pkg-confirm-container.rdhs-payment-panel .payment-form-wrap .coupon-blk #coupon-msg.success {
    color: #2d7a60;
}

.pkg-confirm-container.rdhs-payment-panel .payment-form-wrap .coupon-blk #coupon-msg.error {
    color: #b42318;
}

/* ---- Price summary --------------------------------------------------------- */
.pkg-confirm-container.rdhs-payment-panel .custom-confirm-box {
    margin: 0 0 28px;
    padding: 4px 20px;
    background: #f3f6fb;
    border-radius: 12px;
}

.pkg-confirm-container.rdhs-payment-panel .custom-confirm-box .confirm-row {
    margin: 0;
    padding: 14px 0;
    border-bottom: 1px solid #dbe4f0;
}

.pkg-confirm-container.rdhs-payment-panel .custom-confirm-box .confirm-row:last-child {
    border-bottom: 0;
}

/* style.css fixes every label at 70%, which pushed a short "Total" amount onto
   its own line on a phone. Labels size to their text, up to a limit that leaves
   the amount room. */
.pkg-confirm-container.rdhs-payment-panel .custom-confirm-box .confirm-row .pkg-label {
    width: auto;
    max-width: 62%;
    font-size: 15px;
    line-height: 1.5;
    color: #3d4a5c;
}

.pkg-confirm-container.rdhs-payment-panel .custom-confirm-box .confirm-row .pkg-amt {
    font-size: 16px;
    font-weight: 700;
    line-height: 1.5;
    color: #1b3a63;
    white-space: nowrap;
}

.pkg-confirm-container.rdhs-payment-panel .custom-confirm-box .confirm-row .pkg-total-label,
.pkg-confirm-container.rdhs-payment-panel .custom-confirm-box .confirm-row .pkg-total {
    font-size: 17px;
    font-weight: 700;
    color: #1b3a63;
}

.pkg-confirm-container.rdhs-payment-panel .custom-confirm-box #is-discount .pkg-label,
.pkg-confirm-container.rdhs-payment-panel .custom-confirm-box #is-discount .pkg-amt {
    color: #2d7a60;
}

/* ---- Payment method --------------------------------------------------------
   Laid out like the existing Change Payment Method panel on the group home page
   (templates/add-home.php): the two choices as plain radio lines, then the saved
   cards as one bordered list with a divider between cards. The picked card is
   marked the way that page marks the current card - a tint and a bar down its
   left edge - in the site's navy rather than the old #2571b0 blue. */
.pkg-confirm-container.rdhs-payment-panel .payment-form-details .card-type-method {
    display: grid;
    gap: 12px;
    margin: 0 0 18px;
}

/* Radio on the label's first line, so it stays put when the label wraps on a
   phone: (16px x 1.4 line height - 16px radio) / 2 = 3px down. */
.pkg-confirm-container.rdhs-payment-panel .card-type-method .card-type-method-column {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0;
    padding: 0;
    background: none;
    border: 0;
}

.pkg-confirm-container.rdhs-payment-panel .payment-form-details input[type="radio"] {
    flex: none;
    position: static;
    top: auto;
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: #1b3a63;
    cursor: pointer;
}

.pkg-confirm-container.rdhs-payment-panel .card-type-method .card-type-method-column label {
    flex: 1;
    width: auto;
    margin: 0;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.4;
    color: #1b3a63;
    cursor: pointer;
}

.pkg-confirm-container.rdhs-payment-panel .card-type-method .card-type-method-column input[type="radio"] {
    margin-top: 3px;
}

/* Saved cards: card.js shows this list when "existing" is chosen. */
.pkg-confirm-container.rdhs-payment-panel .payment-form-details .saved-card-list {
    margin: 0 0 16px;
    padding: 0;
    background: #f7fafd;
    border: 1px solid #dbe4f0;
    border-radius: 0;
}

.pkg-confirm-container.rdhs-payment-panel .payment-form-details .saved-card-list .saved-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: transparent;
    border-left: 3px solid transparent;
    font-size: 15px;
    color: #3d4a5c;
    transition: background-color .12s ease, border-color .12s ease;
}

/* style.css stripes every second card grey; the list has one colour now. */
.pkg-confirm-container.rdhs-payment-panel .payment-form-details .saved-card-list .saved-card:nth-child(even) {
    background: transparent;
}

.pkg-confirm-container.rdhs-payment-panel .payment-form-details .saved-card-list .saved-card + .saved-card {
    border-top: 1px solid #dbe4f0;
}

.pkg-confirm-container.rdhs-payment-panel .payment-form-details .saved-card-list .saved-card:hover {
    background: #f3f6fb;
}

.pkg-confirm-container.rdhs-payment-panel .payment-form-details .saved-card-list .saved-card:has(input:checked) {
    background: #e6eef8;
    border-left-color: #1b3a63;
}

.pkg-confirm-container.rdhs-payment-panel .payment-form-details .saved-card-list .saved-card label {
    flex: 1;
    width: auto;
    margin: 0;
    line-height: 1.4;
    color: #3d4a5c;
    cursor: pointer;
}

.pkg-confirm-container.rdhs-payment-panel .payment-form-details .saved-card-list .saved-card label img {
    position: static;
    top: 0;
    margin: 0 6px 0 0;
    vertical-align: middle;
}

/* New card: card.js shows this form when "new" is chosen. */
.pkg-confirm-container.rdhs-payment-panel .payment-form-details .add-to-card-inline {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    align-items: start;
    gap: 12px;
    padding: 0;
    background: none;
    border: 0;
}

.pkg-confirm-container.rdhs-payment-panel .payment-form-details .add-to-card-inline .add-card-name,
.pkg-confirm-container.rdhs-payment-panel .payment-form-details .add-to-card-inline .add-card-form {
    float: none;
    width: auto;
    margin: 0;
    padding: 0;
}

/* Stripe draws the card number inside an iframe; this is the frame around it.
   style.css fixes it at 40px - 48px matches the Name field beside it, and
   Stripe's iframe is about 17px tall, so a 14px top inset centres it. */
.pkg-confirm-container.rdhs-payment-panel .add-card-form #card-element {
    box-sizing: border-box;
    height: 48px;
    padding: 14px 14px 0;
    background: #f7fafd;
    border: 1px solid #c9d8ec;
    border-radius: 4px;
    transition: background-color .12s ease, border-color .12s ease, box-shadow .12s ease;
}

.pkg-confirm-container.rdhs-payment-panel .add-card-form #card-element.StripeElement--focus {
    background: #ffffff;
    border-color: #1b3a63;
    box-shadow: 0 0 0 3px rgba(27, 58, 99, .12);
}

.pkg-confirm-container.rdhs-payment-panel .add-card-form #card-element.StripeElement--invalid {
    border-color: #b42318;
}

.pkg-confirm-container.rdhs-payment-panel .payment-form-details #name-result,
.pkg-confirm-container.rdhs-payment-panel .payment-form-details #card-result,
.pkg-confirm-container.rdhs-payment-panel .payment-form-details #payment-method-error {
    font-size: 14px;
    line-height: 1.4;
}

.pkg-confirm-container.rdhs-payment-panel .payment-form-details #name-result:not(:empty),
.pkg-confirm-container.rdhs-payment-panel .payment-form-details #card-result:not(:empty),
.pkg-confirm-container.rdhs-payment-panel .payment-form-details #payment-method-error:not(:empty) {
    margin: 6px 0 0;
}

.pkg-confirm-container.rdhs-payment-panel .payment-form-details .error {
    color: #b42318;
}

.pkg-confirm-container.rdhs-payment-panel .payment-form-details .success {
    color: #2d7a60;
}

/* ---- Make Payment ---------------------------------------------------------
   card.js keeps this hidden until a payment method is chosen, and disabled until
   a saved card is picked. */
.pkg-confirm-container.rdhs-payment-panel .pkg-confirm-btn-container {
    margin: 24px 0 0;
    text-align: right;
}

.pkg-confirm-container.rdhs-payment-panel .pkg-confirm-btn-container .pkg-confirm-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    float: none;
    height: 48px;
    padding: 0 30px;
    background: #1b3a63;
    border: 1px solid #1b3a63;
    border-radius: 999px;
    color: #ffffff;
    font-family: Lato, sans-serif;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1.2;
    text-decoration: none;
    text-transform: none;
    cursor: pointer;
    transition: background-color .15s ease-in-out, border-color .15s ease-in-out;
}

.pkg-confirm-container.rdhs-payment-panel .pkg-confirm-btn-container .pkg-confirm-btn:hover,
.pkg-confirm-container.rdhs-payment-panel .pkg-confirm-btn-container .pkg-confirm-btn:focus {
    background: #122c4d;
    border-color: #122c4d;
    color: #ffffff;
}

.pkg-confirm-container.rdhs-payment-panel .pkg-confirm-btn-container .pkg-confirm-btn.disabled {
    background: #c9d3df;
    border-color: #c9d3df;
    pointer-events: none;
}

/* ---- Phone ----------------------------------------------------------------- */
@media (max-width: 767px) {
    .pkg-confirm-container.rdhs-payment-panel {
        margin-top: 28px;
        padding: 24px 20px;
    }

    /* Field on its own line, button under it. */
    .pkg-confirm-container.rdhs-payment-panel .payment-form-wrap .coupon-blk #coupon {
        grid-column: 1 / -1;
    }

    .pkg-confirm-container.rdhs-payment-panel .payment-form-wrap .coupon-blk .btn-apply-discount {
        grid-row: 3;
        grid-column: 1 / -1;
        justify-self: start;
        margin-top: 10px;
    }

    .pkg-confirm-container.rdhs-payment-panel .payment-form-wrap .coupon-blk #coupon-msg {
        grid-row: 4;
    }

    .pkg-confirm-container.rdhs-payment-panel .custom-confirm-box .confirm-row .pkg-label {
        max-width: 58%;
    }

    .pkg-confirm-container.rdhs-payment-panel .payment-form-details .add-to-card-inline {
        grid-template-columns: minmax(0, 1fr);
    }

    .pkg-confirm-container.rdhs-payment-panel .pkg-confirm-btn-container .pkg-confirm-btn {
        width: 100%;
    }
}


/* ===========================================================================
   15. REGISTRATION (/register/)
   =========================================================================== */


/* ---- Hero for PHP-template pages --------------------------------------------
   /register-v2/ is a page template, not a Beaver Builder layout, so it cannot
   use the hero row the other pages share. These values are that row: the same
   band colour, the same padding at all three breakpoints, and the same eyebrow
   and title type. Keep the two in step if the row ever changes. */
body.rdhs-public .rdhs-hero {
    background: #f3f6fb;
    border-top: 1px solid #f4f4f4;
    padding: 72px 0 64px;
}

body.rdhs-public .rdhs-hero__eyebrow {
    color: var(--rdhs-eyebrow);
    font-family: Lato, sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.5px;
    line-height: 1.4;
    margin: 0 0 12px;
    text-transform: uppercase;
}

body.rdhs-public .rdhs-hero__title {
    color: #1b3a63;
    font-family: Lora, serif;
    font-size: 46px;
    font-weight: 700;
    line-height: 1.1;
    margin: 0;
    padding: 0;
    text-transform: none;
}


@media (max-width: 991px) {
    body.rdhs-public .rdhs-hero {
        padding: 56px 32px 48px;
    }

    body.rdhs-public .rdhs-hero__title {
        font-size: 38px;
    }
}

@media (max-width: 767px) {
    body.rdhs-public .rdhs-hero {
        padding: 44px 24px 40px;
    }

    body.rdhs-public .rdhs-hero__title {
        font-size: 32px;
        line-height: 1.15;
    }
}


/* ---- Registration page gutters on a phone -----------------------------------
   Every Beaver page insets its content 24px from the screen edge on mobile —
   hero and body alike. The registration page is a PHP template, and its two
   halves each arrived at a different number: the hero at 39px, because the
   .rdhs-hero band's own 24px padding stacked on top of the 15px .container
   inside it, and the form at 15px, because Bootstrap's -15px row margin cancels
   that container padding before the column adds it back.

   Both are pinned to 24px here so the page lines up with the rest of the site
   and with itself. */
@media (max-width: 767px) {

    body.rdhs-public .rdhs-register .rdhs-hero {
        padding-left: 0;
        padding-right: 0;
    }

    body.rdhs-public .rdhs-register .container.fl-row-fixed-width {
        padding-left: 24px;
        padding-right: 24px;
    }
}


/* ---- Registration form ------------------------------------------------------
   The section headings were the flat link blue in Lato, which is the one blue
   the redesign does not use for type. Brought into line with the section
   headings on the Beaver Builder pages. */
body.rdhs-public .row-payment-form .block > h2 {
    color: #1b3a63;
    font-family: Lora, serif;
    font-size: 28px;
    font-weight: 600;
    line-height: 1.2;
    margin: 44px 0 18px;
}

body.rdhs-public .row-payment-form .block:first-child > h2 {
    margin-top: 0;
}

/* The price line read as a notice rather than as the plan the customer just
   chose. Same tint and radius as the panels on the pricing page. */
body.rdhs-public .custom-regis-details {
    background: var(--rdhs-tint, #e6eef8);
    border: 1px solid #dbe4f0;
    border-radius: 4px;
    color: #1b3a63;
    font-size: 16px;
    font-weight: 700;
    margin: 0 0 44px;
    padding: 16px 20px;
}

/* ---- Registration form: spacing ----------------------------------------------
   The form sat 20px under the title band (style.css's margin on the price line)
   and 30px above the footer (the last block's margin), where every other page
   has its section padding. Inside, the gaps between groups were 36, 30, 25, 50
   and 44px. Now:
     title band -> form and form -> footer   section padding, 70 / 56 / 44px
     anything -> a section heading            44px (the h2's own top margin)
     price line -> "Personal Information"     44px
     billing fields -> coupon panel           32px
     coupon -> totals -> "Why do you need my card?"   24px
   The template names the blocks block-billing / block-totals / block-payment.
   Each .main row keeps style.css's 15px; where a block ends, that margin
   collapses into the larger gap that follows. */
body.rdhs-public .rdhs-register > .container.fl-row-fixed-width {
    padding-bottom: 70px;
    padding-top: 70px;
}

body.rdhs-public .payment-form-wrap .block {
    margin-bottom: 0;
}

body.rdhs-public .payment-form-wrap .block-totals {
    margin-top: 32px;
}

body.rdhs-public .payment-form-wrap .block-totals .main,
body.rdhs-public .payment-form-wrap .block-totals .main .col-2 {
    margin-bottom: 0;
}

body.rdhs-public .payment-form-wrap .block-totals .coupon-blk {
    margin-bottom: 24px;
}

body.rdhs-public .payment-form-wrap .block-totals .price-n-discount-section {
    margin-bottom: 0;
}

body.rdhs-public .payment-form-wrap .block-payment .custom-free-trial-details-main {
    margin: 24px 0 0;
}

/* On phones style.css gives each stacked .col-2 a 15px bottom margin, which put
   59px between the notice and "Payment Information" instead of 44px. */
body.rdhs-public .payment-form-wrap .block-payment .custom-free-trial-details-main .col-2 {
    margin-bottom: 0;
}

@media (max-width: 991px) {
    body.rdhs-public .rdhs-register > .container.fl-row-fixed-width {
        padding-bottom: 56px;
        padding-top: 56px;
    }
}

@media (max-width: 767px) {
    body.rdhs-public .rdhs-register > .container.fl-row-fixed-width {
        padding-bottom: 44px;
        padding-top: 44px;
    }
}

/* "Register & Pay" is styled with the other form submits in 4.6 Form controls,
   so the four account and sign-up forms match. */

body.rdhs-public .btn-apply-discount {
    background: #ffffff;
    border: 1px solid #1b3a63;
    border-radius: 999px;
    color: #1b3a63;
    font-family: Lato, sans-serif;
    font-weight: 700;
    letter-spacing: 0.3px;
    padding: 12px 20px;
    text-transform: none;
    line-height: 1.1;
}

.payment-form-wrap .coupon-blk button:disabled {
    background: #ddd;
    cursor: default;
    color: #fff;
    border-color: #ddd;
}
.payment-form-wrap .coupon-blk button:disabled:hover,
.payment-form-wrap .coupon-blk button:disabled:focus {
    background: #ddd;
    cursor: default;
    color: #fff;
    border-color: #ddd;
}

.payment-form-wrap .coupon-blk input[type="text"] {
    border-radius: 4px;
}

.payment-form-wrap .coupon-blk input[type="text"]:disabled {
    background: #ddd;
    cursor: default;
    color: #fff;
    border-color: #ddd;
}

.payment-form-wrap .coupon-blk input[type="text"]:disabled:hover,
.payment-form-wrap .coupon-blk input[type="text"]:disabled:focus {
    background: #ddd;
    cursor: default;
    color: #fff;
    border-color: #ddd;
}

body.rdhs-public .btn-apply-discount:hover,
body.rdhs-public .btn-apply-discount:focus {
    background: #1b3a63;
    color: #ffffff;
}

.payment-form-wrap .custom-free-trial-details, .price-n-discount-section, .payment-form-wrap .coupon-blk {
    border-radius: 4px;
}


/*
 * Initial hidden states, kept out of the markup. Used by the registration page,
 * the pricing calculator's add-home confirm step and the payment page.
 *
 * custom.js and card.js reveal them by setting an inline style at runtime
 * (.css('visibility','visible') on the loader, .show() on #is-discount).
 * Inline styles beat these class rules on specificity, so the reveal still
 * works - these only supply the starting state.
 */
.rdhs-loader {
    visibility: hidden;
}

.rdhs-hidden {
    display: none;
}

/* Shown while the card is being tokenised and the signup posted. */
.rdhs-loader.is-visible {
    visibility: visible;
}

/* Payment / signup failure message, prepended to the form. Scoped to the
   registration page: .payment-form-wrap is also used on the old package page,
   where this file was never loaded. */
.rdhs-register .payment-form-wrap .error-msg {
    margin: 0 0 15px;
    padding: 10px 14px;
    border: 1px solid #ffc7c7;
    border-radius: 4px;
    background: #fff2f2;
    color: #d00;
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
    line-height: 1.5;
}

/* Shown when submit is pressed before the slot-based handler is connected. */
.rdhs-submit-notice {
    display: none;
    margin: 10px 0;
    padding: 10px 14px;
    border: 1px solid #d1a13a;
    border-radius: 4px;
    background: #fff8e8;
    color: #8a5a00;
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
    line-height: 1.5;
}

.rdhs-submit-notice.is-visible {
    display: block;
}

/* ==========================================================================
   Payment popups: reactivate, cancel and undo cancellation (js/rdhs-payments.js)
   The site's popup theme (css/style.css) puts the icon in the red header; the
   heading and message sit in the white body. Layout only - text colours stay
   as the site's popup theme sets them.
   ========================================================================== */
.swal2-popup .rdhs-swal {
    text-align: center;
}

.swal2-popup .rdhs-swal__heading {
    margin: 0 0 10px;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.35;
}

.swal2-popup .rdhs-swal__text {
    margin: 0;
    font-size: 15px;
    line-height: 1.55;
}

.swal2-popup .rdhs-swal__summary {
    max-width: 360px;
    margin: 14px auto 0;
    padding: 0;
    border-top: 1px solid #e6e9ee;
    text-align: left;
}

.swal2-popup .rdhs-swal__row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 16px;
    padding: 9px 2px;
    border-bottom: 1px solid #e6e9ee;
    font-size: 15px;
    line-height: 1.4;
}

.swal2-popup .rdhs-swal__row dt {
    margin: 0;
    font-weight: 500;
}

.swal2-popup .rdhs-swal__row dd {
    margin: 0;
    font-weight: 700;
    text-align: right;
}

.swal2-popup .rdhs-swal__note {
    margin: 12px 0 0;
    font-size: 13px;
    line-height: 1.5;
}

.swal2-popup .swal2-validation-message {
    margin: 10px 20px 0;
    font-size: 14px;
    line-height: 1.5;
}

/* Edit Group Home tabs: one font, size and colour for all three (the colours and
   borders come from .edit-group-home button in style.css). Buttons don't inherit
   the page font, so it is set here. */
.edit-group-home button {
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
    line-height: 20px;
}

/* The plan tab's form: the same white box as the payment tab (full width, 20px
   padding, light border, 20px below), not the stand-alone card. */
.edit-plan-form .rdhs-plan {
    max-width: none;
    margin: 0 0 20px;
    padding: 20px;
    border: 1px solid #f1efef;
    box-shadow: none;
}

.edit-plan-form .rdhs-plan__title {
    margin: 0 0 12px;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: normal;
    text-transform: none;
    color: #2571b0;
}

.edit-plan-form .rdhs-plan__choose {
    margin-top: 24px;
}

/* ==========================================================================
   Group Home Details page (single-home.php): the home's card and the
   subscription panel under it. Signed-in account colours.
   ========================================================================== */
.rdhs-home-card {
    max-width: 640px;
    padding: 24px 26px;
    background: #ffffff;
    border: 1px solid rgba(160, 160, 160, .3);
    box-shadow: 0 1px 1px 0 rgba(0, 0, 0, .1);
    font-family: 'Open Sans', sans-serif;
    color: #555555;
}

.rdhs-home-card__head {
    display: flex;
    align-items: center;
    gap: 16px;
    padding-bottom: 18px;
    border-bottom: 1px solid rgba(160, 160, 160, .2);
}

.rdhs-home-card__logo {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 64px;
    width: 64px;
    height: 64px;
    background: #f5f8fb;
    border: 1px solid rgba(160, 160, 160, .25);
}

.rdhs-home-card__logo img {
    max-width: 100%;
    max-height: 100%;
}

.rdhs-home-card__logo .fa {
    font-size: 26px;
    color: #9bb2c6;
}

.rdhs-home-card__name {
    margin: 0;
    font-size: 22px;
    font-weight: 600;
    line-height: 1.3;
    color: #2185c5;
}

.rdhs-home-card__meta {
    margin: 4px 0 0;
    font-size: 14px;
    color: #777777;
}

.rdhs-home-card__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    padding: 20px 0 4px;
}

.rdhs-home-card__label {
    margin: 0 0 8px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #777777;
}

.rdhs-home-card__block .rdhs-home-card__label + .rdhs-home-card__label,
.rdhs-home-card__block .rdhs-home-card__text + .rdhs-home-card__label {
    margin-top: 18px;
}

.rdhs-home-card__text {
    margin: 0 0 4px;
    font-size: 15px;
    line-height: 1.6;
}

.rdhs-home-card__empty {
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
    color: #888888;
}

.rdhs-home-card__links {
    display: flex;
    flex-wrap: wrap;
    gap: 22px;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid rgba(160, 160, 160, .2);
    font-size: 15px;
}

.rdhs-home-card__links a {
    color: #2185c5;
    text-decoration: none;
}

.rdhs-home-card__links a:hover,
.rdhs-home-card__links a:focus {
    text-decoration: underline;
}

.rdhs-home-card__links .fa {
    margin-right: 6px;
}

@media (max-width: 767px) {
    .rdhs-home-card {
        padding: 18px 16px;
    }

    .rdhs-home-card__grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 18px;
    }

    .rdhs-home-card__links {
        gap: 14px;
    }
}

/* ==========================================================================
   Group Home Details page (single-home.php): the subscription panel under the
   home's details. Signed-in account colours.
   ========================================================================== */
.rdhs-home-sub {
    max-width: 640px;
    margin: 18px 0 0;
    padding: 20px 24px;
    background: #ffffff;
    border: 1px solid rgba(160, 160, 160, .3);
    box-shadow: 0 1px 1px 0 rgba(0, 0, 0, .1);
    font-family: 'Open Sans', sans-serif;
    color: #555555;
}

.rdhs-home-sub__title {
    margin: 0 0 12px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #777777;
}

.rdhs-home-sub__state {
    margin: 0 0 16px;
    font-size: 15px;
    line-height: 1.6;
}

.rdhs-home-sub__badge {
    display: inline-block;
    margin-right: 8px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
}

.rdhs-home-sub__badge.is-active {
    background: #d6efd8;
    color: #2e7d32;
}

.rdhs-home-sub__badge.is-cancelling {
    background: #fff8e5;
    color: #8a6100;
}

.rdhs-home-sub__badge.is-ended {
    background: #f1f1f1;
    color: #666666;
}

.rdhs-home-sub__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 18px;
}

.rdhs-home-sub__button {
    display: inline-flex;
    align-items: center;
    height: 44px;
    padding: 0 20px;
    background: #2185c5;
    color: #ffffff;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}

.rdhs-home-sub__button:hover,
.rdhs-home-sub__button:focus {
    background: #1b6ea3;
    color: #ffffff;
}

.rdhs-home-sub__link {
    font-size: 15px;
    color: #2185c5;
    cursor: pointer;
}

.rdhs-home-sub__link.is-danger {
    color: #c9302c;
}

.rdhs-home-sub__note {
    margin: 16px 0 0;
}

.rdhs-home-sub__help {
    margin: 16px 0 0;
    font-size: 14px;
    line-height: 1.5;
}

@media (max-width: 767px) {
    .rdhs-home-sub {
        padding: 18px 16px;
    }

    .rdhs-home-sub__actions {
        gap: 14px;
    }

    .rdhs-home-sub__button {
        width: 100%;
        justify-content: center;
    }
}

/* ==========================================================================
   Upgrade or Downgrade Plan page (templates/home-plan.php).
   Uses the signed-in account styles: Open Sans, #2185c5 blue, #555 text and
   the site's own notice styling - not the marketing palette.
   ========================================================================== */
.rdhs-plan {
    max-width: 640px;
    margin: 0 0 10px;
    padding: 26px 28px;
    background: #ffffff;
    border: 1px solid rgba(160, 160, 160, .3);
    box-shadow: 0 1px 1px 0 rgba(0, 0, 0, .1);
    font-family: 'Open Sans', sans-serif;
    color: #555555;
    text-align: left;
}

.rdhs-plan__home {
    margin: 0 0 4px;
    font-size: 22px;
    font-weight: 600;
    line-height: 1.3;
    color: #2185c5;
}

.rdhs-plan__title {
    margin: 24px 0 12px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #777777;
}

.rdhs-plan__current .rdhs-summary {
    margin: 0;
}

.rdhs-plan__pending {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    margin: 18px 0 0;
    padding: 11px 15px;
    background-color: #fff8e5;
    border-left: 4px solid #ffba00;
    box-shadow: 0 1px 1px 0 rgba(0, 0, 0, .1);
    font-size: 14px;
    line-height: 19px;
}

.rdhs-plan__pending-text {
    flex: 1 1 260px;
}

.rdhs-plan__keep {
    height: 36px;
    padding: 0 16px;
    background: #ffffff;
    border: 1px solid #2185c5;
    color: #2185c5;
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
    font-weight: 600;
    line-height: 34px;
    cursor: pointer;
}

.rdhs-plan__keep:hover,
.rdhs-plan__keep:focus {
    background: #2185c5;
    color: #ffffff;
}

.rdhs-plan__help {
    margin: 0 0 14px;
    font-size: 15px;
    line-height: 1.5;
}

.rdhs-plan__caps {
    margin: 0 0 14px;
}

.rdhs-plan__caps .rdhs-cap-btn {
    height: 42px;
    border: 1px solid #cccccc;
    border-radius: 2px;
    font-family: 'Open Sans', sans-serif;
    font-size: 15px;
    font-weight: 600;
    color: #555555;
}

.rdhs-plan__caps .rdhs-cap-btn:hover {
    border-color: #2185c5;
    background: #f2f8fc;
    color: #2185c5;
}

.rdhs-plan__caps .rdhs-cap-btn.is-active {
    background: #2185c5;
    border-color: #2185c5;
    color: #ffffff;
}

/* The home's number today. */
.rdhs-plan__caps .rdhs-cap-btn.is-current {
    border-style: dashed;
    border-width: 2px;
}

.rdhs-plan__caps .rdhs-cap-btn:focus-visible {
    outline: 3px solid #d7e9f5;
    outline-offset: 1px;
}

.rdhs-plan__more {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin: 0 0 18px;
    font-size: 14px;
    line-height: 1.5;
}

.rdhs-plan__input {
    width: 100px;
    height: 44px;
    padding: 4px 10px;
    border: 1px solid #cccccc;
    font-family: 'Open Sans', sans-serif;
    font-size: 16px;
    text-align: center;
    color: #555555;
}

.rdhs-plan__input:focus {
    border-color: #2185c5;
    outline: none;
}

.rdhs-plan__more-note {
    margin: 0 0 18px;
    font-size: 14px;
    line-height: 1.5;
}

/* Choosing which residents leave when a scheduled plan change takes effect.
   This sits among the resident's other actions, so it is built like one of
   them: same height, same padding, same divider, icon column on the left. */
ul.home-listing-main li .home-listing-detail .action-links-row .rdhs-archive-mark {
    position: relative;
    display: block;
    width: 100%;
    margin: 0;
    padding: 12px 10px 12px 40px;
    background: #ffffff;
    border: none;
    border-bottom: 1px solid rgba(160, 160, 160, .2);
    border-radius: 0;
    font-family: inherit;
    font-size: 14px;
    line-height: 25px;
    color: inherit;
    cursor: pointer;
}

ul.home-listing-main li .home-listing-detail .action-links-row .rdhs-archive-mark input {
    position: absolute;
    left: 15px;
    top: 18px;
    width: 15px;
    height: 15px;
    margin: 0;
    cursor: pointer;
    accent-color: #8a5a00;
}

ul.home-listing-main li .home-listing-detail .action-links-row .rdhs-archive-mark:hover {
    background: #fffdf7;
}

/* Chosen: the same treatment the primary action uses, in the change's amber. */
ul.home-listing-main li .home-listing-detail .action-links-row .rdhs-archive-mark.is-chosen {
    background: #fff8e5;
}

/* Locked: this resident is one of the ones that must be archived, so it can
   only be unticked once another is ticked in its place. */
ul.home-listing-main li .home-listing-detail .action-links-row .rdhs-archive-mark.is-locked {
    cursor: default;
}

ul.home-listing-main li .home-listing-detail .action-links-row .rdhs-archive-mark.is-locked input {
    cursor: default;
    opacity: .75;
}

ul.home-listing-main li .home-listing-detail .action-links-row .rdhs-archive-mark.is-chosen .text-below-icon {
    color: #8a5a00;
    font-weight: 600;
}

.rdhs-archive-note {
    margin: 8px 0 0;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.5;
    color: #8a5a00;
}

/* Manage Residents / Archived Residents: where this home stands on its plan. */
.rdhs-plan-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 20px;
    margin: 0 0 18px;
    padding: 14px 18px;
    background: #f5f9fc;
    border: 1px solid rgba(33, 133, 197, .25);
    border-left: 4px solid #2185c5;
    border-radius: 3px;
    box-shadow: 0 1px 1px 0 rgba(0, 0, 0, .1);
    font-family: 'Open Sans', sans-serif;
    color: #555555;
    text-align: left;
}

.rdhs-plan-bar__text {
    flex: 1 1 320px;
}

.rdhs-plan-bar__main {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;
    color: #333333;
}

.rdhs-plan-bar__pending {
    margin: 6px 0 0;
    font-size: 14px;
    line-height: 1.5;
    color: #8a5a00;
}

.rdhs-plan-bar.has-pending {
    background: #fffaf0;
    border-color: rgba(255, 186, 0, .45);
    border-left-color: #ffba00;
}

.rdhs-plan-bar.is-full {
    background: #fce2e7;
    border-color: rgba(255, 0, 0, .3);
    border-left-color: #ff0000;
}

.rdhs-plan-bar.is-full .rdhs-plan-bar__main {
    color: #b3312d;
}

@media (max-width: 767px) {
    .rdhs-plan-bar {
        padding: 12px 14px;
    }

}

/* The number a home has today, explained under the buttons. */
.rdhs-plan__legend {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 16px;
    font-size: 13px;
    line-height: 1.5;
    color: #777777;
}

.rdhs-legend-chip {
    flex: none;
    width: 22px;
    height: 16px;
    border: 2px dashed #cccccc;
    border-radius: 2px;
}

.rdhs-plan__quote {
    margin: 0 0 20px;
}

/* Nothing chosen yet: no empty band between the numbers and the buttons. */
.rdhs-plan__quote:empty {
    margin: 0;
}

.rdhs-plan__message {
    margin: 0;
    font-size: 15px;
    line-height: 1.55;
}

.rdhs-plan__note {
    color: #777777;
    font-style: italic;
}

/* The answer to the number just chosen: a panel pointing back up at it, in the
   colour of what it does - blue to add, amber to schedule, red when refused. */
.rdhs-quote {
    position: relative;
    margin: 4px 0 18px;
    padding: 16px 20px 4px;
    background: #f5f9fc;
    border: 1px solid rgba(33, 133, 197, .25);
    border-left: 4px solid #2185c5;
    border-radius: 3px;
    box-shadow: 0 1px 1px 0 rgba(0, 0, 0, .1);
}

.rdhs-quote::before {
    content: "";
    position: absolute;
    top: -7px;
    left: 24px;
    width: 12px;
    height: 12px;
    background: #f5f9fc;
    border-left: 1px solid rgba(33, 133, 197, .25);
    border-top: 1px solid rgba(33, 133, 197, .25);
    transform: rotate(45deg);
}

.rdhs-quote__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin: 0 0 8px;
}

.rdhs-quote__heading {
    margin: 0;
    font-family: 'Open Sans', sans-serif;
    font-size: 17px;
    font-weight: 600;
    line-height: 1.3;
    color: #2571b0;
    text-transform: none;
    letter-spacing: normal;
}

.rdhs-quote__badge {
    padding: 3px 10px;
    border-radius: 11px;
    background: #2185c5;
    color: #ffffff;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.5;
    white-space: nowrap;
}

/* Choosing who is archived when a plan change takes effect. */
.rdhs-choose {
    margin: 12px 0 0;
}

.rdhs-choose__hint {
    margin: 0 0 8px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.5;
    color: #8a5a00;
}

.rdhs-choose__list {
    margin: 0;
    padding: 0;
    list-style: none;
    max-height: 260px;
    overflow-y: auto;
}

.rdhs-choose__list li {
    margin: 0 0 6px;
}

.rdhs-choose__person {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background: #ffffff;
    border: 1px solid rgba(160, 160, 160, .35);
    border-radius: 2px;
    font-size: 14px;
    line-height: 1.35;
    color: #555555;
    cursor: pointer;
}

.rdhs-choose__person:hover {
    border-color: #ffba00;
}

.rdhs-choose__person.is-chosen {
    background: #fff6e2;
    border-color: #ffba00;
}

.rdhs-choose__box {
    flex: none;
    width: 15px;
    height: 15px;
    margin: 0;
    cursor: pointer;
}

.rdhs-choose__name {
    flex: 1 1 auto;
    font-weight: 600;
    color: #333333;
}

.rdhs-choose__since {
    flex: none;
    font-size: 12px;
    color: #888888;
}

@media (max-width: 480px) {
    .rdhs-choose__person {
        flex-wrap: wrap;
    }

    .rdhs-choose__since {
        width: 100%;
        padding-left: 25px;
    }
}

.rdhs-quote__note {
    margin: 8px 0 0;
    font-size: 14px;
    line-height: 1.5;
    color: #6b6b6b;
}

.rdhs-quote.is-choose .rdhs-quote__note,
.rdhs-quote.is-scheduled .rdhs-quote__note,
.rdhs-quote.is-decrease .rdhs-quote__note {
    color: #8a5a00;
}

.rdhs-quote .rdhs-summary {
    margin-top: 12px;
    border-top: 1px solid rgba(160, 160, 160, .2);
}

.rdhs-quote .rdhs-summary__row:last-child {
    border-bottom: none;
}

/* The figure that matters most in each answer: what is due today, or the date
   a decrease takes effect. */
.rdhs-quote .rdhs-summary__row.is-key dt {
    font-weight: 600;
    color: #333333;
}

.rdhs-quote .rdhs-summary__row.is-key dd {
    font-size: 19px;
    color: #2185c5;
}

.rdhs-quote.is-choose,
.rdhs-quote.is-scheduled,
.rdhs-quote.is-decrease {
    background: #fffaf0;
    border-color: rgba(255, 186, 0, .45);
    border-left-color: #ffba00;
}

.rdhs-quote.is-choose::before,
.rdhs-quote.is-scheduled::before,
.rdhs-quote.is-decrease::before {
    background: #fffaf0;
    border-left-color: rgba(255, 186, 0, .45);
    border-top-color: rgba(255, 186, 0, .45);
}

.rdhs-quote.is-choose .rdhs-quote__heading,
.rdhs-quote.is-scheduled .rdhs-quote__heading,
.rdhs-quote.is-decrease .rdhs-quote__heading {
    color: #8a5a00;
}

.rdhs-quote.is-choose .rdhs-quote__badge,
.rdhs-quote.is-scheduled .rdhs-quote__badge,
.rdhs-quote.is-decrease .rdhs-quote__badge {
    background: #8a5a00;
}

.rdhs-quote.is-choose .rdhs-summary__row.is-key dd,
.rdhs-quote.is-scheduled .rdhs-summary__row.is-key dd,
.rdhs-quote.is-decrease .rdhs-summary__row.is-key dd {
    font-size: 17px;
    color: #8a5a00;
}

.rdhs-quote.is-refused {
    background: #fce2e7;
    border-color: rgba(255, 0, 0, .3);
    border-left-color: #ff0000;
}

.rdhs-quote.is-refused::before {
    background: #fce2e7;
    border-left-color: rgba(255, 0, 0, .3);
    border-top-color: rgba(255, 0, 0, .3);
}

.rdhs-quote.is-refused .rdhs-quote__heading {
    color: #b3312d;
}

.rdhs-quote.is-refused .rdhs-quote__badge {
    background: #d64541;
}

.rdhs-quote.is-refused .rdhs-plan__help {
    margin: 10px 0 12px;
}

/* No panel for "you already have this number" - it is only a note. */
.rdhs-quote.is-same {
    padding-bottom: 16px;
    background: #f7f7f7;
    border-color: rgba(160, 160, 160, .3);
    border-left-color: #bbbbbb;
}

.rdhs-quote.is-same::before {
    background: #f7f7f7;
    border-left-color: rgba(160, 160, 160, .3);
    border-top-color: rgba(160, 160, 160, .3);
}

.rdhs-plan__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 20px;
    margin-top: 4px;
    padding-top: 20px;
    border-top: 1px solid rgba(160, 160, 160, .2);
}

.rdhs-plan__confirm {
    height: 44px;
    padding: 0 20px;
    background: #2185c5;
    border: none;
    color: #ffffff;
    font-family: 'Open Sans', sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 44px;
    text-align: center;
    cursor: pointer;
}

.rdhs-plan__confirm:hover:not(:disabled),
.rdhs-plan__confirm:focus:not(:disabled) {
    background: #1b6ea3;
}

.rdhs-plan__confirm:disabled {
    background: #cccccc;
    color: #ffffff;
    cursor: not-allowed;
}

.rdhs-plan .cancel-btn {
    font-size: 15px;
    color: #2185c5;
}

/* Label / value rows: the plan page and the popups share one look. */
.rdhs-summary,
.swal2-popup .rdhs-swal__summary {
    padding: 0;
    border-top: 1px solid rgba(160, 160, 160, .2);
}

.rdhs-summary__row,
.swal2-popup .rdhs-swal__row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 16px;
    padding: 11px 2px;
    border-bottom: 1px solid rgba(160, 160, 160, .2);
    font-size: 15px;
    line-height: 1.4;
}

.rdhs-summary__row dt,
.rdhs-summary__row dd {
    margin: 0;
}

.rdhs-summary__row dd {
    font-weight: 700;
    text-align: right;
}

.rdhs-plan .rdhs-summary__row dd {
    color: #333333;
}

@media (max-width: 767px) {
    .rdhs-plan {
        padding: 20px 16px;
    }

    .rdhs-plan__caps {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }

    .rdhs-plan__confirm {
        width: 100%;
    }

    .rdhs-quote {
        padding: 14px 14px 2px;
    }

    .rdhs-quote__heading {
        font-size: 16px;
    }
}

/* A resident whose service plan has not been started yet. */
.resident-no-plan__note {
    margin: 0;
    padding: 10px 10px 10px 15px;
    border-bottom: 1px solid rgba(160, 160, 160, .2);
    font-family: 'Open Sans', sans-serif;
    font-size: 13px;
    line-height: 1.4;
    color: #888888;
}

.rdhs-places-note {
    margin: 0 0 18px;
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
    line-height: 1.5;
    color: #777777;
}

/* My Group Homes: a new home says how to name itself. */
.rdhs-home-untitled__hint {
    display: block;
    margin-top: 2px;
    font-family: 'Open Sans', sans-serif;
    font-size: 12px;
    font-style: normal;
    line-height: 1.4;
    color: #999999;
}

/* The cards sit together rather than stranded at the left of a wide page. */
ul.home-listing-main {
    justify-content: flex-start;
}

/* The resident chooser: how long the list is, and that it scrolls. */
.rdhs-choose__count {
    margin: 0 0 8px;
    font-size: 13px;
    line-height: 1.5;
    color: #777777;
}

.rdhs-choose__list {
    box-shadow: inset 0 -12px 12px -12px rgba(0, 0, 0, .18);
}

/* Add a Group Home: the price first, the coupon out of the way behind a link. */
.rdhs-coupon-toggle {
    margin: 0 0 12px;
    padding: 0;
    background: none;
    border: none;
    color: #2185c5;
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
    text-decoration: underline;
    cursor: pointer;
}

.rdhs-coupon-toggle:hover,
.rdhs-coupon-toggle:focus {
    color: #1b6ea3;
}

.pkg-desc__sum {
    display: block;
    margin-top: 3px;
    font-size: 13px;
    font-weight: 400;
    color: #777777;
}

.pkg-note {
    margin: 12px 0 0;
    font-family: 'Open Sans', sans-serif;
    font-size: 13px;
    line-height: 1.5;
    color: #777777;
}

.pkg-back {
    margin: 18px 0 0;
    font-family: 'Open Sans', sans-serif;
    font-size: 15px;
}

/* Manage Payment Methods: a card in use says so, instead of a dead button. */
.card-name-missing {
    color: #999999;
    font-style: italic;
}

.card-default-badge {
    display: block;
    margin-top: 3px;
    font-family: 'Open Sans', sans-serif;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
    color: #2185c5;
}

.card-in-use {
    display: block;
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
    color: #555555;
}

.card-in-use__help {
    display: block;
    margin-top: 3px;
    font-family: 'Open Sans', sans-serif;
    font-size: 12px;
    line-height: 1.4;
    color: #888888;
}

.not-linked-badge {
    font-style: italic;
}

/* Manage Residents: one Add tile, in the site's blue, with the count under it. */
.resident-listing li.add-new-resident-container .home-listing-detail .add-resident-link a {
    background: #2185c5;
    border: none;
    color: #ffffff;
    font-weight: 600;
}

.resident-listing li.add-new-resident-container .home-listing-detail .add-resident-link a:hover,
.resident-listing li.add-new-resident-container .home-listing-detail .add-resident-link a:focus {
    background: #1b6ea3;
    color: #ffffff;
}

/* ==========================================================================
   Popups - one rule for the whole site.

     .rdhs-swal-ask      about to do something: no icon, blue confirm, plain cancel
     .rdhs-swal-danger   about to undo something: warning icon, red confirm
     .rdhs-swal-success  it worked: green tick, blue OK
   ========================================================================== */
.swal2-popup .swal2-actions .swal2-styled.rdhs-swal-primary {
    background: #2185c5;
    border: 1px solid #2185c5;
    color: #ffffff;
}

.swal2-popup .swal2-actions .swal2-styled.rdhs-swal-primary:hover,
.swal2-popup .swal2-actions .swal2-styled.rdhs-swal-primary:focus {
    background: #1b6ea3;
    border-color: #1b6ea3;
}

.swal2-popup .swal2-actions .swal2-styled.rdhs-swal-primary-outline {
    background: #ffffff;
    border: 1px solid #2185c5;
    color: #2185c5;
}

.swal2-popup .swal2-actions .swal2-styled.rdhs-swal-primary-outline:hover,
.swal2-popup .swal2-actions .swal2-styled.rdhs-swal-primary-outline:focus {
    background: #2185c5;
    color: #ffffff;
}

.swal2-popup .swal2-actions .swal2-styled.rdhs-swal-neutral {
    background: #ffffff;
    border: 1px solid #cccccc;
    color: #555555;
}

.swal2-popup .swal2-actions .swal2-styled.rdhs-swal-neutral:hover,
.swal2-popup .swal2-actions .swal2-styled.rdhs-swal-neutral:focus {
    background: #f2f2f2;
    border-color: #aaaaaa;
    color: #333333;
}

.swal2-popup .swal2-actions .swal2-styled.rdhs-swal-destructive {
    background: #d64541;
    border: 1px solid #d64541;
    color: #ffffff;
}

.swal2-popup .swal2-actions .swal2-styled.rdhs-swal-destructive:hover,
.swal2-popup .swal2-actions .swal2-styled.rdhs-swal-destructive:focus {
    background: #b3312d;
    border-color: #b3312d;
}

/* An "about to do it" popup has no icon and no coloured band: the red header
   belongs to the warning popups only. */
.swal2-popup.rdhs-swal-ask .swal2-header {
    padding-top: 10px;
    background: transparent;
}

.swal2-popup.rdhs-swal-ask .swal2-icon {
    display: none !important;
}

/* Popups without an icon (Change Slots, Keep Slots): no empty band above the heading. */
.swal2-popup.rdhs-swal-success.rdhs-swal-noicon .swal2-header {
    padding-top: 10px;
}

/* Change Slots picker (layout only). The slot buttons reuse the Pricing
   calculator's .rdhs-cap-btn; the home's current count has a dashed border. */
.swal2-popup .rdhs-swal__picker {
    margin-top: 14px;
}

.swal2-popup .rdhs-swal__caps {
    margin: 0 0 12px;
}

.swal2-popup .rdhs-swal__caps .rdhs-cap-btn.is-current {
    border-style: dashed;
    border-width: 2px;
}

.swal2-popup .rdhs-swal__more {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0 0 6px;
    font-size: 14px;
    font-weight: 500;
}

.swal2-popup .rdhs-swal__input {
    width: 90px;
    height: 38px;
    padding: 4px 8px;
    border: 1px solid #c9d8ec;
    border-radius: 8px;
    font-size: 15px;
    text-align: center;
}

.swal2-popup .rdhs-swal__quote {
    min-height: 40px;
    margin-top: 12px;
}

.swal2-popup .rdhs-swal__quote .rdhs-swal__text {
    margin-bottom: 4px;
}

.swal2-popup .swal2-actions .swal2-styled.swal2-confirm:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

@media (max-width: 480px) {
    .swal2-popup .rdhs-swal__caps {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
}

/* style.css reduces the popup body's top padding at this width, which brings
   the heading up against the icon; give it back. */
/* "Keep Subscription" on the Cancel Subscription popup: keeping the subscription
   is the good outcome, so it takes the success green, not the red outline. */
.swal2-popup .swal2-actions .swal2-styled.swal2-cancel.rdhs-swal-cancel-keep {
    background: #5fb85f;
    border: 1px solid #5fb85f;
    color: #ffffff;
}

.swal2-popup .swal2-actions .swal2-styled.swal2-cancel.rdhs-swal-cancel-keep:hover,
.swal2-popup .swal2-actions .swal2-styled.swal2-cancel.rdhs-swal-cancel-keep:focus {
    background: #4da24d;
    border-color: #4da24d;
}

/* Disabled while the server answers - no spinner, nothing clickable. */
.swal2-popup .swal2-actions .swal2-styled:disabled {
    opacity: .55;
    cursor: not-allowed;
}

/* Reactivation uses the green success popup, but its Cancel button keeps the
   site's standard popup cancel colours (css/style.css .swal2-cancel). */
.swal2-popup.rdhs-swal-success .swal2-actions .swal2-styled.swal2-cancel.rdhs-swal-cancel {
    background: #fff;
    color: #db5f6a;
    border: 1px solid #db5f6a;
}

@media screen and (max-width: 767px) {
    .swal2-popup .rdhs-swal {
        padding-top: 26px;
    }

    .swal2-popup.rdhs-swal-success .rdhs-swal {
        padding-top: 0;
    }
}

@media (max-width: 480px) {
    .swal2-popup .rdhs-swal__heading {
        font-size: 18px;
    }

    .swal2-popup .rdhs-swal__text,
    .swal2-popup .rdhs-swal__row {
        font-size: 14px;
    }
}

/* Group Home page: a home switched off by a failed renewal */
.extra-links .rdhs-payment-failed-note {
    margin: 0 0 6px;
    color: #c9302c;
    font-size: 13px;
    line-height: 1.4;
}

/* ==========================================================================
   Messages and buttons review (17 Sep 2026)
   ========================================================================== */

/* Group Home Details: a home paused by a failed monthly payment. */
.rdhs-home-sub__badge.is-failed {
    background: #fdecea;
    color: #b3261e;
}

/* My Group Homes: a new home with no details saved yet. */
ul.home-listing-main li .home-listing-name .rdhs-home-untitled {
    color: #797979;
    font-style: italic;
}

/* Edit Group Home: the success message after saving details matches the site's
   other success notices. ACF prints <div id="message" class="updated"><p>; the
   login plugin's ".updated p" boxes the paragraph, so the paragraph carries the
   notice and the wrapper stays plain. */
.home-profile-form #message.updated {
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.home-profile-form #message.updated p {
    margin: 0 0 20px 2px;
    padding: 11px 15px;
    border: 0;
    border-left: 4px solid #46b450;
    background-color: #d6efd8;
    box-shadow: 0 1px 1px 0 rgba(0, 0, 0, .1);
    color: #555555;
    font-size: 14px;
    line-height: 19px;
}

/* Edit Payment Method: the same buttons as the Upgrade or Downgrade Plan tab -
   a blue primary button and a text link to cancel. */
.payment-form-details .change-payment-method-button,
.payment-form-details .update-payment-method .update-payment-method-button {
    height: 44px;
    padding: 0 20px;
    background: #2185c5;
    border: none;
    color: #ffffff;
    font-family: 'Open Sans', sans-serif;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: normal;
    line-height: 44px;
    text-transform: none;
}

.payment-form-details .change-payment-method-button:hover,
.payment-form-details .change-payment-method-button:focus,
.payment-form-details .update-payment-method .update-payment-method-button:hover,
.payment-form-details .update-payment-method .update-payment-method-button:focus {
    background: #1b6ea3;
}

.payment-form-details .update-payment-method .update-payment-method-button.disabled {
    background: #cccccc;
}

.payment-form-details .update-payment-method .cancel-change-payment-method {
    margin-right: 20px;
    padding: 0;
    background: transparent;
    border: 0;
    color: #2185c5;
    font-family: 'Open Sans', sans-serif;
    font-size: 15px;
    text-decoration: underline;
}

.payment-form-details .update-payment-method .cancel-change-payment-method:hover,
.payment-form-details .update-payment-method .cancel-change-payment-method:focus {
    background: transparent;
    color: #1b6ea3;
}

/* Registration and Add a Group Home: amounts (e.g. the "−$87.00" discount) stay on one line. */
.rdhs-register .sub-col-right,
.rdhs-payment-panel .pkg-amt {
    white-space: nowrap;
}

/* ---------------------------------------------------------------------------
   Manage Payment Methods - the Action column

   style.css shrink-wraps the last column (width: 1% !important; white-space:
   nowrap) because it used to hold nothing but a Delete button. A card that is
   in use puts a sentence there instead, and unwrapped it made the table 1141px
   wide inside an 806px column - the table ran underneath the My Account
   sidebar. The column is given its width back and the text is allowed to wrap.
   --------------------------------------------------------------------------- */
.main-page-container .table-payment-method.table-responsive.items-list-table table thead tr th:last-child,
.main-page-container .table-payment-method.table-responsive.items-list-table table tbody tr td:last-child {
    width: auto !important;
    white-space: normal;
}

.main-page-container .table-payment-method.table-responsive.items-list-table table {
    table-layout: auto;
    max-width: 100%;
}

/* The badge and its explanation stack; the sentence wraps instead of running
   off the side. Kept inline-flex only while it holds the Delete button. */
.table-payment-method .delete-action-wrap {
    display: block;
    white-space: normal;
}

.table-payment-method .delete-action-wrap:has(.delete-payment-method-button) {
    display: inline-flex;
}

.table-payment-method .card-in-use,
.table-payment-method .card-in-use__help {
    white-space: normal;
}

.table-payment-method .card-in-use__help {
    max-width: 320px;
}

/* "xxxx-xxxx-xxxx-4242" broke across four lines in a column that had been left
   to shrink. It is one value and stays on one line. */
.main-page-container .table-payment-method.table-responsive.items-list-table table tbody tr td:nth-child(2) {
    white-space: nowrap;
}

/* No cards yet: say so, rather than leaving an empty panel under Add Card. */
.rdhs-no-cards {
    margin: 0;
    padding: 28px 24px;
    background: #f7f9fc;
    border: 1px dashed #cdd9e8;
    border-radius: 8px;
    font-family: 'Open Sans', sans-serif;
    font-size: 15px;
    line-height: 1.6;
    color: #555555;
    text-align: center;
}

.rdhs-no-cards__error {
    background: #fdf4f4;
    border-color: #e6c3c3;
    color: #a3433f;
}

@media (max-width: 399px) {
  .contact-us-sidebar-box-section .rdhs-callout-chip .fl-callout-text p {
    overflow-wrap: anywhere;
    word-break: break-word;
    white-space: normal;
    display: inline-block;
    max-width: 100%;
  }

  .contact-us-sidebar-box-section .rdhs-callout-chip .fl-callout-text p {
    font-size: 15px;
  }
}


/* ===========================================================================
   16.  404 PAGE
   ===========================================================================

   Beaver Themer layout "404 Page (New Design)". Colours, type, padding and the
   card borders are module settings; this holds only what they cannot reach. */

/* ---- Buttons --------------------------------------------------------------- */
body.rdhs-public .rdhs-404-actions .fl-button-group-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

body.rdhs-public .rdhs-404-actions .fl-button-group-button {
    margin: 0;
    padding: 0;
    width: auto;
}

body.rdhs-public .rdhs-404-actions a.fl-button,
body.rdhs-public .rdhs-404-actions a.fl-button:hover,
body.rdhs-public .rdhs-404-actions a.fl-button:focus {
    border: 2px solid #1b3a63;
    border-radius: 999px;
    box-shadow: none;
    padding: 13px 28px;
    text-decoration: none;
}

body.rdhs-public .rdhs-404-actions a.fl-button .fl-button-text {
    font-family: Lato, sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.2;
}

/* Back to Home: filled. Contact Us: outlined until hovered. */
body.rdhs-public .rdhs-404-actions .fl-button-group-button:first-child a.fl-button,
body.rdhs-public .rdhs-404-actions .fl-button-group-button:nth-child(2) a.fl-button:hover,
body.rdhs-public .rdhs-404-actions .fl-button-group-button:nth-child(2) a.fl-button:focus {
    background: #1b3a63;
}

body.rdhs-public .rdhs-404-actions .fl-button-group-button:first-child a.fl-button:hover,
body.rdhs-public .rdhs-404-actions .fl-button-group-button:first-child a.fl-button:focus {
    background: #122c4d;
    border-color: #122c4d;
}

body.rdhs-public .rdhs-404-actions .fl-button-group-button:nth-child(2) a.fl-button {
    background: transparent;
}

body.rdhs-public .rdhs-404-actions .fl-button-group-button:first-child a.fl-button .fl-button-text,
body.rdhs-public .rdhs-404-actions .fl-button-group-button:nth-child(2) a.fl-button:hover .fl-button-text,
body.rdhs-public .rdhs-404-actions .fl-button-group-button:nth-child(2) a.fl-button:focus .fl-button-text {
    color: #ffffff;
}

body.rdhs-public .rdhs-404-actions .fl-button-group-button:nth-child(2) a.fl-button .fl-button-text {
    color: #1b3a63;
}

/* ---- Cards ----------------------------------------------------------------- */
body.rdhs-public .rdhs-404-links .fl-col-group:has(> .rdhs-404-card) {
    display: grid;
    gap: 24px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

body.rdhs-public .rdhs-404-links .fl-col-group:has(> .rdhs-404-card)::before,
body.rdhs-public .rdhs-404-links .fl-col-group:has(> .rdhs-404-card)::after {
    display: none;
}

body.rdhs-public .rdhs-404-links .rdhs-404-card {
    display: flex;
    float: none;
    width: auto !important; /* Beaver sets the column width with !important on a phone */
}

body.rdhs-public .rdhs-404-links .rdhs-404-card > .fl-col-content {
    position: relative;
    transition: border-color 0.15s ease-in-out;
    width: 100%;
}

body.rdhs-public .rdhs-404-links .rdhs-404-card > .fl-col-content:hover,
body.rdhs-public .rdhs-404-links .rdhs-404-card > .fl-col-content:focus-within {
    border-color: #1b3a63;
}

/* The title's link covers the whole card. */
body.rdhs-public .rdhs-404-links .rdhs-404-card .fl-callout-title a::after {
    content: "";
    inset: 0;
    position: absolute;
}

@media (max-width: 991px) {

    body.rdhs-public .rdhs-404-links .fl-col-group:has(> .rdhs-404-card) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767px) {

    body.rdhs-public .rdhs-404-links .fl-col-group:has(> .rdhs-404-card) {
        gap: 16px;
        grid-template-columns: minmax(0, 1fr);
    }

    body.rdhs-public .rdhs-404-actions .fl-button-group-button,
    body.rdhs-public .rdhs-404-actions a.fl-button {
        text-align: center;
        width: 100%;
    }
}