/* Home page UI pass - hero, trust marquee, "how it works", category/
   featured-proposal polish, FAQ, closing CTA. Built entirely on the
   shared tokens in styles/variables.css (black / white / Roladel green)
   so this stays visually consistent with the rest of the site and with
   dark mode, rather than introducing a new palette. Scoped to home-page
   section classes throughout - nothing here touches .resp-img,
   .owl-carousel, or any other class shared with category.php,
   search.php, or the proposal card/video-thumbnail system, so those keep
   behaving exactly as they already do everywhere else on the site.
   .category-item is exclusive to this page (verified - not referenced
   by any other .php file), so it's addressed directly rather than only
   through the .categories-section ancestor. Proposal-card rules are
   qualified as "section.proposals-section" (element + class) rather
   than the bare ".proposals-section" class further down, because
   category.php reuses that same class name on an unrelated <div> for
   its results column - the element qualifier keeps this file's changes
   from leaking onto that page.

   Mobile cleanup pass (2nd round): every section below now carries a
   max-width:767px block that compacts padding/type/imagery instead of
   just reflowing grid columns, because the first pass only touched the
   hero and the steps grid - everything else was still rendering at
   full desktop spacing on phones. Root causes fixed here, not papered
   over: Bootstrap's .btn-lg on the hero search button (oversized
   touch target), missing 2-column sizing for .category-item at <576px
   (no bare .col-* class was ever defined for that breakpoint), and a
   fixed 333x180px image in home.php's video-promo block that overflowed
   horizontally below ~340px viewports (fixed at the source in home.php,
   this file just adds a matching safety net). */

/* ---------- Hero ---------- */

.home-header {
  height: auto;
  min-height: 460px;
  display: flex;
  align-items: center;
  padding: 90px 20px 70px;
}

.home-header .header-content {
  position: relative;
  z-index: 2;
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}

.home-header .rld-hero-eyebrow {
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brand-green-bright);
  margin-bottom: 14px;
}

.home-header h2,
.home-header h1.rld-hero-title {
  font-size: 42px;
  font-weight: 800;
  line-height: 1.15;
  margin: 0 0 16px;
  color: #fff;
}

/* The hero headline is the page's H1 (it used to be an H2). styles/style.css
   still carries a legacy ".home-header h1 { font-size:40px !important;
   font-weight:300 !important }", so size and weight are restated here with
   !important to keep the headline looking exactly as it did. */
.home-header h1.rld-hero-title {
  font-size: 42px !important;
  font-weight: 800 !important;
}

/* Dark mode: styles/dark_mode.css makes every h2 #fff but every h1 #eaeaea
   (both !important); keep the headline the pure white it was as an H2. */
html.dark .home-header h1.rld-hero-title {
  color: #fff !important;
}

.home-header .rld-hero-sub {
  font-size: 18px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.85);
  max-width: 560px;
  margin: 0 auto 32px;
}

/* Hero search - reuses the same GET contract search.php already accepts
   (?search_query=...), so submitting this form needs no new backend
   code at all. */
.rld-hero-search {
  max-width: 560px;
  margin: 0 auto 22px;
}

.rld-hero-search .input-group {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
  border-radius: 8px;
  overflow: hidden;
}

.rld-hero-search input[type="text"] {
  border: none;
  padding: 16px 18px;
  font-size: 15px;
  height: auto;
}

.rld-hero-search input[type="text"]:focus {
  box-shadow: none;
  outline: 2px solid var(--brand-green-bright);
  outline-offset: -2px;
}

.rld-hero-search button {
  background: var(--brand-green);
  border-color: var(--brand-green);
  padding: 0 22px;
  font-weight: 600;
}

.rld-hero-search button:hover,
.rld-hero-search button:focus {
  background: #2a2a2a;
  border-color: #2a2a2a;
}

.rld-hero-ctas {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  flex-wrap: wrap;
}

/* The hero sits on a dark video/image backdrop (styles/style.css
   darkens .background-video to 0.5 brightness) - a black button here
   would have almost no contrast against it, so this specific CTA
   inverts to white-on-black rather than reusing the site's normal
   black-on-white primary-button treatment. */
.rld-hero-ctas .btn-primary-cta {
  background: #fff;
  border-color: #fff;
  color: #000;
  font-weight: 600;
  padding: 12px 26px;
  border-radius: 6px;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease;
}

.rld-hero-ctas .btn-primary-cta:hover {
  background: #e0e0e0;
  border-color: #e0e0e0;
  color: #000;
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);
}

.rld-hero-ctas .rld-hero-link {
  color: rgba(255, 255, 255, 0.9);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.rld-hero-ctas .rld-hero-link:hover {
  color: #fff;
}

/* Light-mode hero. style.css's own .home-header rule (dark background
   image + white text) is left completely unconditional/unchanged above
   - that stays the exact current DARK-mode appearance (and the pre-JS
   fallback look for a first-time visitor before theme_init.php
   resolves), per the requirement to preserve dark mode as closely as
   possible. dark_mode.css already has its own attempt at a light
   default (".home-header{background:#f8f9fa}") but it shares style.css's
   plain-class specificity and loses the cascade to home.php's own
   redundant third re-link of style.css (home.php's $cssPath block),
   which loads after dark_mode.css elsewhere on the page - this file
   already loads after every one of those style.css occurrences
   (confirmed via this page's own <link> order), and html:not(.dark)
   carries enough extra specificity to win regardless of that ordering,
   mirroring the exact pattern that already makes html.dark .home-header
   survive the same conflict. Styled against the real html.dark class
   (set server-side from the theme cookie, or client-side by
   theme_init.php's prefers-color-scheme fallback) rather than
   @media (prefers-color-scheme:...), which would ignore an explicit
   Light/Dark choice made via Settings. */
html:not(.dark) .home-header {
  background: var(--light-surface);
}

html:not(.dark) .home-header .background-video {
  /* The video is unconditionally darkened via brightness(0.5) in
     style.css specifically so the hero's white text stays readable on
     it - under this file's dark text (below) that combination would be
     illegible, and a playing video's own contrast shifts frame to
     frame, so no fixed opacity/filter tweak can guarantee readability.
     Hidden here the same way it's already hidden on mobile just below
     (same underlying reason: readability on this specific surface),
     not removed for dark mode or desktop generally - the light surface
     color above takes its place instead of a broken/washed-out video. */
  display: none;
}

html:not(.dark) .home-header .rld-hero-eyebrow {
  /* --brand-green-bright resolves to white in this site's retired-to-
     monochrome palette (styles/variables.css) - correct against the
     dark backdrop above, invisible against this light one. */
  color: var(--brand-black);
}

html:not(.dark) .home-header h2,
html:not(.dark) .home-header h1.rld-hero-title {
  color: var(--light-text);
}

html:not(.dark) .home-header .rld-hero-sub {
  color: rgba(34, 34, 34, 0.72);
}

html:not(.dark) .rld-hero-ctas .btn-primary-cta {
  background: var(--brand-black);
  border-color: var(--brand-black);
  color: var(--brand-white);
}

html:not(.dark) .rld-hero-ctas .btn-primary-cta:hover {
  background: var(--gray-700);
  border-color: var(--gray-700);
  color: var(--brand-white);
}

html:not(.dark) .rld-hero-ctas .rld-hero-link {
  color: rgba(34, 34, 34, 0.78);
}

html:not(.dark) .rld-hero-ctas .rld-hero-link:hover {
  color: var(--brand-black);
}

@media (max-width: 767px) {
  .home-header {
    min-height: 0;
    padding: 40px 16px 32px;
  }
  .home-header .rld-hero-eyebrow {
    font-size: 12px;
    margin-bottom: 10px;
  }
  .home-header h2,
  .home-header h1.rld-hero-title {
    font-size: 26px;
    margin-bottom: 12px;
  }
  .home-header h1.rld-hero-title {
    font-size: 26px !important;
  }
  .home-header .rld-hero-sub {
    font-size: 14.5px;
    margin-bottom: 20px;
  }

  /* The search button/input inherit Bootstrap's .btn-lg/.form-control
     sizing (large touch-friendly padding meant for a single desktop
     hero, not a compact mobile bar) - this is the actual "oversized
     search bar", not a bug in this component's own CSS. Overridden
     here with a plain, touch-friendly (44px+) but compact height. */
  .rld-hero-search {
    margin-bottom: 16px;
  }
  .rld-hero-search input[type="text"] {
    padding: 12px 14px;
    font-size: 14px;
  }
  .rld-hero-search .btn-search {
    padding: 0 16px;
    font-size: 14px;
  }
  .rld-hero-ctas {
    gap: 10px 16px;
  }
  .rld-hero-ctas .btn-primary-cta {
    padding: 10px 22px;
    font-size: 14px;
  }
  .rld-hero-ctas .rld-hero-link {
    font-size: 14px;
  }
}

/* ---------- Trust marquee ---------- */

.marquee-container {
  overflow: hidden;
  white-space: nowrap;
  width: 100%;
  padding: 22px 0;
  display: flex;
  align-items: center;
  position: relative;
}

.marquee-content {
  display: flex;
  align-items: center;
  width: max-content;
  animation: rld-marquee 50s linear infinite;
  position: relative;
}

.marquee-content a {
  flex-shrink: 0;
}

.marquee-content img {
  margin: 0 20px;
  max-height: 20px;
  object-fit: contain;
}

@keyframes rld-marquee {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

.trusted-by {
  background: transparent;
  border: none;
  color: var(--light-text-muted);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0 18px 0 0;
}

html.dark .trusted-by {
  color: var(--dark-text-muted);
}

.marquee-content img {
  filter: grayscale(100%);
  opacity: 0.6;
  transition: opacity 0.2s ease, filter 0.2s ease;
}

.marquee-content img:hover {
  filter: grayscale(0%);
  opacity: 1;
}

/* ---------- How Roladel Works ---------- */

.rld-how-it-works {
  padding: 64px 0;
  background: var(--light-surface);
}

html.dark .rld-how-it-works {
  background: var(--dark-surface);
}

.rld-how-it-works .rld-section-heading {
  text-align: center;
  margin-bottom: 44px;
}

.rld-how-it-works .rld-section-heading h2 {
  font-size: 28px;
  font-weight: 800;
  margin-bottom: 8px;
}

.rld-how-it-works .rld-section-heading p {
  color: var(--light-text-muted);
  font-size: 15px;
  margin: 0;
}

html.dark .rld-how-it-works .rld-section-heading p {
  color: var(--dark-text-muted);
}

.rld-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  counter-reset: rld-step;
}

.rld-step {
  position: relative;
  text-align: center;
  padding: 28px 18px;
  background: var(--light-bg);
  border: 1px solid var(--light-border);
  border-radius: 10px;
}

html.dark .rld-step {
  background: var(--dark-bg);
  border-color: var(--dark-border);
}

.rld-step-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 16px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.06);
  color: var(--brand-green);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
}

html.dark .rld-step-icon {
  background: rgba(255, 255, 255, 0.12);
  color: var(--brand-green-bright);
}

.rld-step-index {
  counter-increment: rld-step;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--brand-green);
  margin-bottom: 6px;
}

html.dark .rld-step-index {
  color: var(--brand-green-bright);
}

.rld-step-index::before {
  content: "STEP " counter(rld-step);
}

.rld-step h4 {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 6px;
}

.rld-step p {
  font-size: 13.5px;
  color: var(--light-text-muted);
  margin: 0;
  line-height: 1.5;
}

html.dark .rld-step p {
  color: var(--dark-text-muted);
}

.rld-step-arrow {
  display: none;
  position: absolute;
  top: 50%;
  right: -18px;
  transform: translateY(-50%);
  color: var(--light-border);
  font-size: 16px;
}

html.dark .rld-step-arrow {
  color: var(--dark-border);
}

@media (min-width: 768px) {
  .rld-step:not(:last-child) .rld-step-arrow {
    display: block;
  }
}

@media (max-width: 767px) {
  .rld-how-it-works {
    padding: 36px 0;
  }
  .rld-how-it-works .rld-section-heading {
    margin-bottom: 26px;
  }
  .rld-how-it-works .rld-section-heading h2 {
    font-size: 23px;
  }
  .rld-how-it-works .rld-section-heading p {
    font-size: 14px;
  }
  .rld-steps {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  /* Root cause of "Step 3/4 look oversized": every step already stacks
     to one column here, but kept its 4-across desktop padding/icon
     size/gap - four cards at full desktop height is most of a phone
     screen. Compacted to a horizontal icon+text layout instead of a
     tall centered stack, so each step reads in one glance.

     .rld-step-icon/.rld-step-index/h4/p are siblings, not a pre-built
     icon+text-column pair - a plain flex row would lay all of them out
     side by side instead of icon-beside-stacked-text. Grid with the
     icon spanning all three text rows gets the intended layout without
     changing home.php's markup. */
  .rld-step {
    display: grid;
    grid-template-columns: 42px 1fr;
    column-gap: 14px;
    align-items: center;
    text-align: left;
    padding: 14px 16px;
  }
  .rld-step-icon {
    grid-column: 1;
    grid-row: 1 / span 3;
    width: 42px;
    height: 42px;
    margin: 0;
    font-size: 17px;
  }
  .rld-step-index {
    grid-column: 2;
    margin-bottom: 2px;
  }
  .rld-step h4 {
    grid-column: 2;
    font-size: 15px;
    margin-bottom: 2px;
  }
  .rld-step p {
    grid-column: 2;
    font-size: 13px;
    line-height: 1.4;
  }
  .rld-step-arrow {
    display: none;
  }
}

/* ---------- Categories ---------- */

.categories-section .category-item {
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  border-radius: 8px;
}

.categories-section .category-item:hover,
.categories-section .category-item:focus-within {
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
}

html.dark .categories-section .category-item:hover,
html.dark .categories-section .category-item:focus-within {
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
}

.categories-section .category-item a:focus-visible {
  outline: 2px solid var(--brand-green);
  outline-offset: 2px;
}

/* Category images are plain <img src="cat_images/..."> with no
   object-fit of their own (style.css just fixes height:150px) - since
   uploaded category images don't share one aspect ratio, that stretches
   or squashes whichever ones aren't natively 100%-wide-by-150-tall.
   object-fit:cover crops instead of distorting, at every width. */
.categories-section .category-item img {
  object-fit: cover;
  display: block;
}

.categories-section .category-item h6 {
  margin: 8px 0 0;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 767px) {
  .categories-section {
    padding: 8px 0 4px;
  }
  .categories-section .col-md-12.mb-5 {
    margin-bottom: 22px !important;
  }
  .categories-section h4 {
    font-size: 20px;
  }
  .categories-section h6.text-muted {
    font-size: 13px;
  }
  /* Horizontal scroll strip instead of a wrapping grid: the previous
     2-up grid (see prior comment, kept in git history) avoided the
     no-bare-.col-* sizing gap below 576px but still meant scrolling
     past several rows of categories to see them all. A single
     horizontally-scrollable row keeps every category one swipe away,
     matches how the header's own category bar (category_nav_style.css)
     already behaves, and needs no PHP/markup change - the existing
     .col-lg-3.col-md-4.col-sm-6 wrapper just gets a fixed flex-basis
     instead of a percentage one at this breakpoint. Excludes
     .col-md-12 (the section heading's own row) so that row is
     untouched. */
  .categories-section .container .row {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 4px;
  }
  .categories-section .container .row::-webkit-scrollbar {
    display: none;
  }
  .categories-section .container .row > div:not(.col-md-12) {
    flex: 0 0 116px;
    max-width: 116px;
    padding-left: 6px;
    padding-right: 6px;
    margin-bottom: 12px;
  }
  .categories-section .category-item {
    padding: 8px;
  }
  .categories-section .category-item img {
    height: 90px;
  }
}

/* ---------- Platform / "Join Now" promo (never covered by the first
   pass - style.css's unscoped padding-top/bottom:60px plus an unstyled,
   browser-default-sized <h2> and 18px paragraphs made this the same
   kind of oversized block as "Why choose Roladel" below). ---------- */

.platform-section .btn-lg {
  font-size: 15px;
  padding: 10px 20px;
}

@media (max-width: 767px) {
  .platform-section {
    padding-top: 30px;
    padding-bottom: 30px;
  }
  .platform-section h2 {
    font-size: 22px;
    margin-bottom: 6px;
  }
  .platform-section h3 {
    font-size: 16px;
  }
  .platform-section p {
    font-size: 14px;
    line-height: 1.5;
    margin-bottom: 20px;
  }
  .platform-section .col-md-6 {
    margin-bottom: 24px;
  }
  .platform-section .btn-lg {
    font-size: 14px;
    padding: 10px 18px;
    margin: 4px;
  }
  #video-popup-container .promo-video {
    max-width: 280px;
    margin: 0 auto;
  }
}

/* ---------- Banner carousel ----------
   Sizing/spacing (aspect-ratio, object-fit, max-width, outer margin) now
   lives in styles/mycss.css's .roladel-banner-wrap, which is loaded on
   every page the shared carousel can appear on (not just this one) - see
   includes/home_banner_carousel.php. Nothing homepage-specific left to
   override here. */

/* ---------- Featured proposals ---------- */

.proposals-section {
  background: var(--light-surface);
}

html.dark .proposals-section {
  background: var(--dark-surface);
}

.proposals-section .proposal-div {
  border-radius: 8px;
  overflow: hidden;
}

/* style.css's shared .proposal-div .text h4 carries a flat 30px
   margin-bottom (meant to leave room for an absolutely-positioned
   price/footer in some other layout) - on this page's compact carousel
   cards that reads as a large dead gap under every title. Qualified as
   "section.proposals-section" (not the bare class) so search.php/
   category.php's identical-looking cards are completely untouched. */
section.proposals-section .proposal-div .text h4 {
  margin-bottom: 10px;
}

/* The "Featured" ribbon uses a Bootstrap-green (#5cb85c) left over from
   the original template, not Roladel's brand green - only accent color
   on the site is meant to be var(--brand-green). */
section.proposals-section .proposal-div .ribbon .theribbon {
  background-color: var(--brand-black);
}

section.proposals-section .proposal-div .ribbon .theribbon:after {
  border-color: #1a1a1a #1a1a1a transparent transparent;
}

/* Seller name / rating row - was float-left + float-right + a clearfix
   spacer div, which lets a long seller name run directly into the
   rating stars on narrower cards instead of wrapping or truncating.
   Flex items ignore float, so this is a pure layout-mode change with
   no markup edit: the name gets an ellipsis instead of colliding with
   the (fixed-width) star/review-count group. */
section.proposals-section .proposal-div .proposal_nav {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 8px;
}

section.proposals-section .proposal-div .proposal_nav > span.float-left {
  float: none;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

section.proposals-section .proposal-div .proposal_nav > span.float-right {
  float: none;
  flex: 0 0 auto;
  margin-left: auto;
  white-space: nowrap;
}

section.proposals-section .proposal-div .proposal_nav .clearfix {
  display: none;
}

@media (max-width: 767px) {
  section.proposals-section {
    padding: 32px 0;
  }
  section.proposals-section .col-md-12.mb-5 {
    margin-bottom: 20px !important;
  }
  section.proposals-section h3 {
    font-size: 22px;
  }
  section.proposals-section h5.text-muted {
    font-size: 13px;
  }
  section.proposals-section .proposal-div .text h4 {
    font-size: 15px;
    margin-bottom: 8px;
  }
  section.proposals-section .proposal-div .text .price {
    font-size: 16px;
  }
}

/* ---------- Why choose Roladel (existing black .box-section) ---------- */

.box-section h4 {
  color: #fff;
  font-weight: 800;
}

.box-section h5.text-muted {
  color: rgba(255, 255, 255, 0.6) !important;
}

.rld-box-image {
  width: 100px;
  height: 100px;
  object-fit: cover;
  border-radius: 8px;
  margin-bottom: 16px;
}

@media (max-width: 767px) {
  /* style.css's shared padding-top:80px/padding-bottom:45px plus
     18px/27px-line-height paragraphs (.box-section p) is the actual
     source of the "too much vertical space, huge gaps" complaint - this
     class is reused (unstyled) for the "Need help?" band further down
     too, so both get the same compaction. */
  .box-section {
    padding-top: 34px;
    padding-bottom: 34px;
  }
  .box-section .col-md-12.mb-5 {
    margin-bottom: 22px !important;
  }
  .box-section h4 {
    font-size: 20px;
  }
  .box-section h5.text-muted {
    font-size: 13px;
  }
  .box-section .col-sm-4 {
    margin-bottom: 22px !important;
  }
  .rld-box-image {
    width: 64px;
    height: 64px;
    margin-bottom: 12px;
  }
  .box-section h5:not(.text-muted) {
    font-size: 16px;
  }
  .box-section p {
    font-size: 14px;
    line-height: 1.5;
  }
}

/* ---------- FAQ ---------- */

.rld-faq-section {
  padding: 64px 0;
}

@media (max-width: 767px) {
  .rld-faq-section {
    padding: 32px 0;
  }
  .rld-faq-section h2 {
    font-size: 22px;
  }
  .rld-faq-question {
    padding: 14px 16px;
    font-size: 14.5px;
  }
  .rld-faq-panel-inner {
    padding: 0 16px 15px;
    font-size: 14px;
  }
}

.rld-faq-wrap {
  max-width: 760px;
  margin: 0 auto;
}

.rld-faq-item {
  border: 1px solid var(--light-border);
  border-radius: 8px;
  margin-bottom: 12px;
  overflow: hidden;
  background: var(--light-bg);
}

html.dark .rld-faq-item {
  border-color: var(--dark-border);
  background: var(--dark-surface);
}

.rld-faq-question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: transparent;
  border: none;
  text-align: left;
  padding: 18px 20px;
  font-size: 15.5px;
  font-weight: 600;
  color: var(--light-text);
  cursor: pointer;
}

html.dark .rld-faq-question {
  color: var(--dark-text);
}

.rld-faq-question:hover {
  color: var(--brand-green);
}

html.dark .rld-faq-question:hover {
  color: var(--brand-green-bright);
}

.rld-faq-question:focus-visible {
  outline: 2px solid var(--brand-green);
  outline-offset: -2px;
}

.rld-faq-icon {
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.06);
  color: var(--brand-green);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  line-height: 1;
  transition: transform 0.2s ease;
}

html.dark .rld-faq-icon {
  background: rgba(255, 255, 255, 0.14);
  color: var(--brand-green-bright);
}

.rld-faq-item.is-open .rld-faq-icon {
  transform: rotate(45deg);
}

.rld-faq-panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.25s ease;
}

.rld-faq-panel-inner {
  padding: 0 20px 18px;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--light-text-muted);
}

html.dark .rld-faq-panel-inner {
  color: var(--dark-text-muted);
}

/* ---------- Need help? (2nd .box-section instance) ---------- */

/* .btn-outline-cta previously had no base rule at all - only the
   closing-CTA section styled it (".rld-final-cta .btn-outline-cta"), so
   this "Contact Support" button (same class, different section) was an
   unstyled default link sitting on a black background. Same visual
   treatment as the closing CTA's outline button, since both sit on a
   dark/black surface. */
.btn-outline-cta {
  display: inline-block;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.35);
  font-weight: 600;
  padding: 12px 28px;
  border-radius: 6px;
}

.btn-outline-cta:hover {
  border-color: #fff;
  color: #fff;
  text-decoration: none;
}

@media (max-width: 767px) {
  .btn-outline-cta {
    padding: 11px 22px;
    font-size: 14px;
  }
}

/* ---------- Reviews ---------- */

.rld-reviews-heading {
  margin-bottom: 4px;
}

@media (max-width: 767px) {
  .rld-reviews-heading {
    font-size: 22px;
  }
  .rld-reviews-subheading {
    font-size: 13px;
  }
  .review-slider-container {
    margin: 16px 0;
  }
}

/* ---------- Closing CTA ---------- */

.rld-final-cta {
  padding: 60px 0;
  text-align: center;
  background: var(--brand-black);
  border-top: 3px solid var(--brand-green);
}

.rld-final-cta h2 {
  color: #fff;
  font-size: 26px;
  font-weight: 800;
  margin-bottom: 10px;
}

.rld-final-cta p {
  color: rgba(255, 255, 255, 0.72);
  font-size: 15px;
  margin-bottom: 26px;
}

@media (max-width: 767px) {
  .rld-final-cta {
    padding: 34px 0;
  }
  .rld-final-cta h2 {
    font-size: 21px;
  }
  .rld-final-cta p {
    font-size: 14px;
    margin-bottom: 18px;
  }
  .rld-final-cta .btn-primary-cta,
  .rld-final-cta .btn-outline-cta {
    padding: 11px 22px;
    font-size: 14px;
  }
}

/* .rld-final-cta itself is a solid black section - same reasoning as
   the hero CTA above, this button inverts to white-on-black to stay
   visible instead of black-on-black. */
.rld-final-cta .btn-primary-cta {
  background: #fff;
  border-color: #fff;
  color: #000;
  font-weight: 600;
  padding: 12px 28px;
  border-radius: 6px;
  margin: 0 8px 10px;
  display: inline-block;
}

.rld-final-cta .btn-primary-cta:hover {
  background: #e0e0e0;
  border-color: #e0e0e0;
  color: #000;
}

.rld-final-cta .btn-outline-cta {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: #fff;
  font-weight: 600;
  padding: 12px 28px;
  border-radius: 6px;
  margin: 0 8px 10px;
  display: inline-block;
}

.rld-final-cta .btn-outline-cta:hover {
  border-color: #fff;
  color: #fff;
}