/* ====================================================================
   Refresh Components — widget-scoped styles
   Loaded after refresh-globals.css. No body/element-level rules, with one
   deliberate exception directly below (body.refresh-page-bg) — see its own comment.
   ==================================================================== */

/* Matches the design's own `body.refresh { background: var(--rf-page-bg) }`
   (component-library/styles/refresh.css), but NOT scoped to plain body.refresh:
   that class is on every page's <body> (the Refresh layout's header/footer/nav
   apply sitewide — Views/Refresh/Shared/_Layout.cshtml), so painting the tan
   background there leaked it behind ordinary legacy content pages that were
   never designed against it (e.g. /home-equity/promo/locked-rates), showing as
   ugly bands wherever the old markup has a gap. body.refresh-page-bg is a
   second class _StandardPageTemplate.cshtml adds only for the homepage and the
   /QA_Widget_Tests/* pages — the only places that actually contain refresh
   widgets built against this backdrop.
   Needed for more than the page-bg margin bands the ::before hack already
   painted: any widget section with border-radius (e.g. .rate-section) clips
   its own background at the rounded corners, revealing whatever is BEHIND
   it — the page. With no body background that reveal was white-on-white
   (invisible); the design's tan body is what actually produces the visible
   rounded-corner "floating card" look. The ::before bands are still correct
   and harmless (tan painted over tan is a no-op), so they were left in place
   rather than removed. */
body.refresh-page-bg {
  background: var(--rf-page-bg);
}

/* ── Layout utilities (padding / margin) ──
   None/Small/Medium/Large match Foundation's (Xbyk.Foundation.Web) own vertical padding/
   margins scale (0/2rem/4rem/6rem). X-Small and the Flush variants are new additions with
   no Foundation equivalent — Flush pairs a zeroed side with Foundation's "medium" (4rem)
   on the other side, same pairing Foundation's BaseWidgetPropertiesExtensions.cs uses. */
.rf-py-0 { padding-top: 0 !important; padding-bottom: 0 !important; }
.rf-py-1 { padding-top: 1rem !important; padding-bottom: 1rem !important; }
.rf-py-2 { padding-top: 2rem !important; padding-bottom: 2rem !important; }
.rf-py-4 { padding-top: 4rem !important; padding-bottom: 4rem !important; }
.rf-py-6 { padding-top: 6rem !important; padding-bottom: 6rem !important; }
.rf-py-flush-top { padding-top: 0 !important; padding-bottom: 4rem !important; }
.rf-py-flush-bottom { padding-top: 4rem !important; padding-bottom: 0 !important; }

.rf-my-0 { margin-top: 0 !important; margin-bottom: 0 !important; }
.rf-my-2 { margin-top: 2rem !important; margin-bottom: 2rem !important; }
.rf-my-4 { margin-top: 4rem !important; margin-bottom: 4rem !important; }
.rf-my-6 { margin-top: 6rem !important; margin-bottom: 6rem !important; }
.rf-my-flush-top { margin-top: 0 !important; margin-bottom: 4rem !important; }
.rf-my-flush-bottom { margin-top: 4rem !important; margin-bottom: 0 !important; }

/* ── Section background (RefreshStandardSectionProperties) ──
   The section paints the ambient color; widgets placed inside it default to
   no background of their own (see each widget's "Default (uses section
   theme)" Theme option) and let this show through via ordinary CSS cascade —
   matches Foundation's (Xbyk.Foundation.Web) BaseSectionProperties/
   BaseWidgetProperties split. */
.rf-section.theme-white { background: var(--rf-white); }
.rf-section.theme-tint { background: var(--rf-page-bg); }

/* Establishes a new block formatting context so a child widget's own
   margin-top/margin-bottom (e.g. .rf-linklist's 5.6rem) can't collapse
   through this wrapper and escape into whatever precedes/follows the
   section — without this, the gap shows whatever's BEHIND the section
   instead of the Background chosen above. */
.rf-section {
  display: flow-root;
}

/* ── Base widget wrapper ── */
.rf-widget {
  padding: 4.8rem 0;
  position: relative;
}

/* ── Painted top-gap band ─────────────────────────────────────────────
   Three widgets separate themselves from what precedes them with
   `margin-top: 6.4rem` (.rf-content-carousel, .rate-section, .rf-linklist),
   copied from the design. A margin is outside the element's box, so the
   element's own background can never paint it: in the design that strip shows
   the tan page (`body.refresh { background: var(--rf-page-bg) }`), but
   production's body is white and refresh-globals.css declares no body rules,
   so the same strip rendered white — a full-width band of the wrong colour
   above each of these widgets.

   This paints the strip in the page colour without touching layout. The
   alternative is to give production a tan page background (the design's own
   approach), which is a sitewide change and is flagged rather than assumed. */
.rf-content-carousel::before,
.rate-section::before,
.rf-linklist::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -6.4rem;
  height: 6.4rem;
  background: var(--rf-page-bg);
  pointer-events: none;
}

/* .rf-linklist's own margin-top is 5.6rem except for --band-full (6.4rem,
   see below) — the painted band must match whichever margin is actually in
   effect, or it either shows a sliver of the wrong colour or overpaints
   into the section above. */
.rf-linklist::before {
  top: -5.6rem;
  height: 5.6rem;
}

.rf-linklist--band-full::before {
  top: -6.4rem;
  height: 6.4rem;
}

/* Inside a RefreshStandardSection, .rf-section's own Background (painted
   edge-to-edge thanks to its flow-root above) already correctly covers this
   gap in whichever color was actually chosen — the hardcoded warm-gray band
   above is not just redundant there, it's wrong whenever Background is set
   to White, painting a warm-gray seam over a white section. Suppress it for
   any of these three widgets nested directly in one. */
/* Descendant (not direct-child) selector — Kentico's Page Builder widget-zone
   may insert its own wrapper element(s) between the section and the widget's
   own root element, so a ">" combinator here isn't safe to assume. */
.rf-section .rf-content-carousel::before,
.rf-section .rate-section::before,
.rf-section .rf-linklist::before {
  display: none;
}

/* ── Element reset inside refresh widgets ──────────────────────────────
   Ported from the design's `.refresh h1/h2/h3 | p | ul | a | img` block
   (component-library/styles/refresh.css). The design scopes it to
   body.refresh; production's body has no such class and refresh-globals.css
   deliberately declares no body/element rules, so this reset was missing
   entirely and every heading, paragraph and list inside a refresh widget
   inherited site.css's defaults (`p { margin: 0 0 2rem }`).

   That single gap accounted for a lot of vertical drift, e.g. a rate tile
   measured 265.2px against the design's 215.2px purely from the bottom
   margins on .rate-qualifier and .rate-value. Widgets that need spacing
   declare it explicitly, exactly as the design does. */
.rf-widget h1,
.rf-widget h2,
.rf-widget h3 {
  margin: 0;
}

.rf-widget p {
  margin: 0;
}

.rf-widget ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.rf-widget a {
  text-decoration: none;
}

.rf-widget img {
  max-width: 100%;
  height: auto;
}

/* ── Legacy content buttons re-skinned to the refresh pill design ──────
   .button-primary/-secondary/-tertiary/-reversed are not refresh widget
   markup — they're button classes authored directly into CMS rich-text
   content across the whole site (see the /home-equity/... example that
   drove this change), plus a few Razor views. Since this layout's chrome
   already applies sitewide (see the body.refresh-page-bg comment above),
   restyling them here makes every one of those buttons flip to the pill
   look wherever the refresh layout is active, without touching site.css
   or any page that still uses the legacy layout.

   .button-link is intentionally left alone: it's a plain text link style,
   not a button shape, and has no pill equivalent.

   Intentionally NOT overridden (specificity in site.css already wins over
   the plain rules below, so no exclusion selector is needed):
     .rate-card a.button-primary.flyout_trigger
     .header_mobile-login_text.button-primary
     .header_utility-nav .button-primary */
.button-primary,
.button-secondary,
.button-tertiary,
.button-reversed {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.8em;
  min-height: var(--rf-btn-h);
  margin: 0.5em 1em 1em 0;
  padding: 0.2rem 2.4rem 0;
  border-radius: var(--rf-radius-pill);
  border: 0.15rem solid transparent;
  font-family: var(--rf-font-body);
  font-size: var(--rf-fs-btn-sm);
  font-weight: var(--rf-fw-medium);
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  transition: color var(--rf-ease), border-color var(--rf-ease), background-color var(--rf-ease);
}

.button-primary,
a.button-primary {
  background: var(--rf-red);
  border-color: var(--rf-red);
  color: var(--rf-white);
}

.hover .button-primary:hover,
.hover .button-primary:focus,
.hover a.button-primary:hover,
.hover a.button-primary:focus,
.button-primary:focus-visible,
.button-primary.active,
a.button-primary.active {
  background: var(--rf-red-hover);
  border-color: var(--rf-red-hover);
  color: var(--rf-white);
}

.button-secondary,
.button-tertiary,
a.button-secondary,
a.button-tertiary {
  background: transparent;
  border-color: var(--rf-red);
  color: var(--rf-red);
}

.hover .button-secondary:hover,
.hover .button-secondary:focus,
.hover .button-tertiary:hover,
.hover .button-tertiary:focus,
.hover a.button-secondary:hover,
.hover a.button-secondary:focus,
.hover a.button-tertiary:hover,
.hover a.button-tertiary:focus,
.button-secondary:focus-visible,
.button-tertiary:focus-visible,
.button-secondary.active,
.button-tertiary.active {
  background: var(--rf-red);
  color: var(--rf-white);
}

.button-reversed,
a.button-reversed {
  background: var(--rf-white);
  border-color: var(--rf-white);
  color: var(--rf-red);
  font-weight: var(--rf-fw-bold);
}

/* Old Photo Hero widget uses .button-on-photo.button-reversed for a white-
   bordered button on a dark photo — the refresh .button-reversed override
   above turns it solid white with red text, which hides the text against the
   white background. Restore the original translucent treatment. */
.button-on-photo.button-reversed,
a.button-on-photo.button-reversed {
  background: transparent;
  border-color: var(--border-white, #fff);
  color: var(--text-white, #fff);
}

.hover .button-reversed:hover,
.hover .button-reversed:focus,
.hover a.button-reversed:hover,
.hover a.button-reversed:focus,
.button-reversed:focus-visible,
.button-reversed.active {
  background: var(--rf-btn-hover-beige);
  color: var(--rf-red);
}

/* ====================================================================
   Hero
   ==================================================================== */

.rf-hero {
  position: relative;
  overflow: hidden;
  padding: 0;
}

.rf-hero .hero-inner {
  /* Mirrors the design's <div class="container wide"> wrapper, which every
     gallery component nests between the section and its layout element.
     Hero is the one widget whose section has no horizontal padding, so
     without this its copy column was 40px wider than the design's (335px vs
     295px at 375) — enough to stop the h1 wrapping onto the second line the
     design shows. .container = 2rem sides, 5rem from 768px;
     .container.wide = --rf-container-max + 4rem, + 10rem from 768px. */
  max-width: calc(var(--rf-container-max) + 4rem);
  margin: 0 auto;
  padding: 2.4rem 2rem 0;
  display: grid;
  gap: 2.4rem;
}

@media (min-width: 768px) {
  .rf-hero .hero-inner {
    max-width: calc(var(--rf-container-max) + 10rem);
    padding-left: 5rem;
    padding-right: 5rem;
  }
}

@media (min-width: 980px) {
  .rf-hero .hero-inner {
    grid-template-columns: minmax(30rem, 41rem) 1fr;
    gap: 4rem;
    align-items: start;
    padding-top: 0;
  }
}

.rf-hero .hero-content {
  /* The design puts the horizontal padding on the copy column (.hero-copy),
     not on the grid wrapper, so the image can still reach the full width. */
  padding: 0 2rem;
  max-width: 100%;
  overflow: hidden;
}

.rf-hero .hero-content h1 {
  font-family: var(--rf-font-slab);
  font-size: 4rem;
  font-weight: var(--rf-fw-medium);
  line-height: 1.1;
  letter-spacing: -0.12rem;
  color: var(--rf-red);
  margin: 0 0 2rem;
}

@media (min-width: 980px) {
  .rf-hero .hero-content {
    text-align: left;
    padding: 3.2rem 0 4rem 7rem;
  }
}

@media (min-width: 980px) {
  .rf-hero .hero-content h1 {
    font-size: var(--rf-fs-hero);
    line-height: var(--rf-lh-hero);
    letter-spacing: var(--rf-ls-hero);
  }
}

.rf-hero .hero-content p {
  font-size: var(--rf-fs-lead);
  font-weight: var(--rf-fw-medium);
  line-height: 2.2rem;
  color: var(--rf-text);
  margin: 0 auto 3.2rem;
  max-width: 36rem;
}

@media (min-width: 980px) {
  .rf-hero .hero-content p {
    margin: 0 0 3.6rem;
  }
}

.rf-hero .hero-actions {
  display: flex;
  gap: 1.2rem;
  flex-wrap: wrap;
}

.rf-hero .hero-actions .button-pill,
.rf-hero .hero-actions .button-pill-outline {
  white-space: normal;
  max-width: 100%;
  text-align: center;
}

.rf-hero .hero-media {
  /* Design .hero-art: capped at 50rem, NOT a percentage of the viewport or
     of the grid column. The old 45%/70% widths shrank the mobile image well
     below the design's; a later max-width:none on desktop had the opposite
     problem — with a real (adequately-sized) uploaded photo instead of the
     design comp's tiny 380x477 placeholder, the image grew to fill the
     entire grid column (710px+) instead of staying at this same 50rem cap. */
  position: relative;
  max-width: 50rem;
  margin: 0 auto;
}

@media (min-width: 980px) {
  .rf-hero .hero-media {
    margin: 0;
  }
}

/* Design: .home-hero .hero-art .fpo-image */
.rf-hero .hero-media .fpo-image {
  aspect-ratio: 3 / 4;
  max-width: 42rem;
  height: auto;
  min-height: 0;
  margin: 0 auto;
}

.rf-hero .hero-media img {
  /* Design .hero-art > img has no radius and no object-fit — the rounded red
     shape is baked into the composition artwork itself. */
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
}

@media (max-width: 979px) {
  .rf-hero .hero-content {
    text-align: center;
  }

  .rf-hero .hero-actions {
    justify-content: center;
  }
}

/* Theme variants — default (blank Theme) paints no background of its own; it inherits the
   enclosing RefreshStandardSection's own Background, same as every other refresh widget.
   theme-tint is the explicit "Warm gray background" option now that blank no longer means that. */
.rf-hero.theme-tint {
  background: var(--rf-page-bg);
}

.rf-hero.theme-white {
  background: var(--rf-white);
}

.rf-hero.theme-inverse {
  background: var(--rf-red);
}

.rf-hero.theme-inverse .hero-content h1,
.rf-hero.theme-inverse .hero-content p {
  color: var(--rf-white);
}

.rf-hero.theme-inverse .button-pill {
  background: var(--rf-white);
  border-color: var(--rf-white);
  color: var(--rf-red);
  --wipe: var(--rf-btn-hover-beige);
}

.rf-hero.theme-inverse .button-pill:hover,
.rf-hero.theme-inverse .button-pill:focus-visible {
  color: var(--rf-red);
}

/* ====================================================================
   Testimonials
   ==================================================================== */

/* No unconditional background here — Default (blank Theme) inherits whatever
   the enclosing RefreshStandardSection painted. bg-tint/bg-white below are
   the explicit section-background overrides. */
.rf-testimonials {
  padding: 8.4rem 0 9.2rem;
}

.rf-testimonials.bg-tint {
  background: var(--rf-page-bg);
}

.rf-testimonials.bg-white {
  background: var(--rf-white);
}

.rf-testimonials .testimonials-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 3.2rem;
}

/* Groups heading + subheading into one flex item so the subheading stacks
   below the heading instead of landing beside it as its own flex child. */
.rf-testimonials .testimonials-head-text {
  min-width: 0;
}

.rf-testimonials .testimonials-head-text > * + * {
  margin-top: 0.8rem;
}

.rf-testimonials h2 {
  font-family: var(--rf-font-slab);
  font-weight: var(--rf-fw-bold);
  font-size: 2.8rem;
  color: var(--rf-heading-slate);
}

@media (min-width: 980px) {
  .rf-testimonials h2 {
    font-size: var(--rf-fs-section);
  }
}

.rf-testimonials .testimonials-slider {
  position: relative;
}

.rf-testimonials .testimonials-track {
  display: flex;
  gap: 2rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding-bottom: 0.8rem;
}

.rf-testimonials .testimonials-track::-webkit-scrollbar {
  display: none;
}

.rf-testimonials .testimonials-track > * {
  min-width: 0;
  scroll-snap-align: start;
}

.rf-testimonials .testimonials-track:focus-visible {
  outline: 0.2rem solid var(--rf-red);
  outline-offset: 0.4rem;
}

@media (min-width: 980px) {
  .rf-testimonials .testimonials-track {
    gap: 2.4rem;
  }
}

.rf-testimonials .testimonials-nav {
  display: none;
}

@media (min-width: 980px) {
  .rf-testimonials .testimonials-nav {
    display: inline-flex;
    border-radius: 3rem;
    overflow: hidden;
    border: 0.15rem solid var(--rf-red);
  }
}

.rf-testimonials .testimonial-prev,
.rf-testimonials .testimonial-next {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 5.4rem;
  height: 4.4rem;
  border: 0;
  border-radius: 0;
  cursor: pointer;
  transition: background-color var(--rf-ease);
}

.rf-testimonials .testimonial-prev img,
.rf-testimonials .testimonial-next img {
  width: 2rem;
  height: 2rem;
}

.rf-testimonials .testimonial-prev img {
  transform: scaleX(-1);
}

.rf-testimonials .testimonial-prev {
  background: var(--rf-white);
}

.rf-testimonials .testimonial-prev:hover,
.rf-testimonials .testimonial-prev:focus-visible {
  background: var(--rf-red);
}

.rf-testimonials .testimonial-prev:hover img,
.rf-testimonials .testimonial-prev:focus-visible img {
  filter: var(--rf-filter-white);
}

.rf-testimonials .testimonial-next {
  background: var(--rf-red);
}

.rf-testimonials .testimonial-next:hover,
.rf-testimonials .testimonial-next:focus-visible {
  background: var(--rf-red-hover);
}

.rf-testimonials .testimonials-footer {
  display: flex;
  justify-content: flex-end;
  margin-top: 3.2rem;
}

.rf-testimonials .testimonial-card {
  flex: 0 0 85%;
  background: var(--rf-white);
  border-radius: var(--rf-radius-panel);
  padding: 3.2rem 2.8rem;
  display: flex;
  flex-direction: column;
}

@media (min-width: 980px) {
  .rf-testimonials .testimonial-card {
    flex-basis: calc(50% - 1.2rem);
    padding: 4rem;
  }
}

.rf-testimonials .testimonial-label {
  font-size: 1.6rem;
  font-weight: var(--rf-fw-medium);
  letter-spacing: 0.05em;
  color: var(--rf-red);
  text-transform: uppercase;
  margin-bottom: 2rem;
}

.rf-testimonials .testimonial-quote {
  margin: 0 0 3.2rem;
  font-size: var(--rf-fs-cardtitle);
  font-weight: var(--rf-fw-medium);
  line-height: 2.5rem;
  color: var(--rf-text);
}

/* The quote comes from a rich-text field, so it arrives wrapped in <p>, which
   picks up site.css's `p { margin: 0 0 2rem }`. The design puts the text
   directly inside <blockquote> with no paragraph, so that 20px was pure drift
   (measured: card 417px here vs 397px in the design). Keep the spacing between
   paragraphs for multi-paragraph quotes; drop only the trailing margin. */
.rf-testimonials .testimonial-quote > p {
  margin: 0;
}

.rf-testimonials .testimonial-quote > p + p {
  margin-top: 1.6rem;
}

.rf-testimonials .testimonial-author {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1.6rem;
  margin-top: auto;
  align-items: end;
}

/* A bare <img>, matching the design's markup exactly (member-testimonials.html
   never wraps this in a div) — not a wrapper div. That matters here: the
   avatar used to be its own div, which meant it also matched the
   ".testimonial-author > div { flex: 1 1 0 }" rule below meant only for the
   name/subtitle block, splitting the flex space between the two and leaving
   the name column ~70px narrower than the design (measured 200px vs 272px). */
.rf-testimonials .testimonial-avatar {
  grid-column: 1 / -1;
  justify-self: start;
  width: 12.8rem;
  height: 14.1rem;
  object-fit: cover;
  border-radius: var(--rf-radius-tile);
}

.rf-testimonials .testimonial-author > div {
  min-width: 0;
  padding-right: 1.6rem;
}

.rf-testimonials .testimonial-name {
  display: block;
  font-size: 1.8rem;
  font-weight: var(--rf-fw-bold);
  color: var(--rf-red);
}

.rf-testimonials .testimonial-subtitle {
  display: block;
  font-size: 1.6rem;
  font-weight: var(--rf-fw-medium);
  color: var(--rf-red);
}

@media (min-width: 768px) {
  .rf-testimonials .testimonial-author {
    display: flex;
    flex-wrap: nowrap;
    gap: 2.4rem;
    align-items: flex-end;
  }

  .rf-testimonials .testimonial-avatar {
    grid-column: unset;
    justify-self: unset;
  }

  .rf-testimonials .testimonial-author > div {
    flex: 1 1 0;
  }

  .rf-testimonials .testimonial-name {
    font-size: 1.6rem;
  }

  .rf-testimonials .testimonial-subtitle {
    font-size: 1.4rem;
  }
}

/* Design uses an icon-only "petal" button here (.testimonial-meta
   .petal-outline in member-testimonials.html) — a circular arrow button, not
   a text "Read more" pill. */
.rf-testimonials .testimonial-petal {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  align-self: flex-end;
  width: 4rem;
  height: 4rem;
  border: 0.15rem solid var(--rf-red);
  border-radius: 0 50% 50% 50%;
  transition: background-color var(--rf-ease);
}

.rf-testimonials .testimonial-petal img {
  width: 1.6rem;
  height: 1.6rem;
}

.rf-testimonials .testimonial-petal:hover,
.rf-testimonials .testimonial-petal:focus-visible {
  background: var(--rf-red);
}

.rf-testimonials .testimonial-petal:hover img,
.rf-testimonials .testimonial-petal:focus-visible img {
  filter: brightness(0) invert(1);
}

/* Panel-color axis, independent of the bg-tint/bg-white section-background
   classes above. White panel has no class of its own — .testimonial-card's
   own unconditional background is already white. */
.rf-testimonials.theme-tint .testimonial-card {
  background: var(--rf-card-beige);
}

.rf-testimonials.theme-inverse .testimonial-card {
  background: var(--rf-red);
}

.rf-testimonials.theme-inverse .testimonial-label,
.rf-testimonials.theme-inverse .testimonial-quote,
.rf-testimonials.theme-inverse .testimonial-name,
.rf-testimonials.theme-inverse .testimonial-subtitle {
  color: var(--rf-white);
}

.rf-testimonials.theme-inverse .testimonial-petal {
  border-color: var(--rf-white);
}

.rf-testimonials.theme-inverse .testimonial-petal img {
  filter: var(--rf-filter-white);
}

.rf-testimonials.theme-inverse .testimonial-petal:hover,
.rf-testimonials.theme-inverse .testimonial-petal:focus-visible {
  background: var(--rf-white);
}

.rf-testimonials.theme-inverse .testimonial-petal:hover img,
.rf-testimonials.theme-inverse .testimonial-petal:focus-visible img {
  filter: var(--rf-filter-to-red);
}

/* ====================================================================
   Product Showcase
   ==================================================================== */

.rf-product-showcase {
  padding: 4.8rem 2rem 0;
}

/* Theme variants — default (blank Theme) paints no background of its own; it inherits the
   enclosing RefreshStandardSection's own Background, same as every other refresh widget. The
   inner card (.product-showcase-inner) always stays white regardless of theme — only the outer
   background changes, same single-axis pattern as Home Hero / Banner Animated. */
.rf-product-showcase.theme-tint {
  background: var(--rf-page-bg);
}

.rf-product-showcase.theme-white {
  background: var(--rf-white);
}

.rf-product-showcase.theme-inverse {
  background: var(--rf-red);
}

.rf-product-showcase .product-showcase-inner {
  max-width: var(--rf-container-max);
  margin: 0 auto;
  position: relative;
  background: var(--rf-white);
  border-radius: var(--rf-radius-panel);
  overflow: hidden;
  padding: 2.4rem 2rem 3.2rem;
  display: flex;
  flex-direction: column-reverse;
}

@media (min-width: 980px) {
  .rf-product-showcase .product-showcase-inner {
    display: grid;
    grid-template-columns: 44% 1fr;
    padding: 4.4rem 4rem 4.4rem 4.2rem;
    min-height: 43rem;
    overflow: visible;
  }
}

.rf-product-showcase .product-showcase-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.rf-product-showcase h2 {
  font-family: var(--rf-font-slab);
  font-weight: var(--rf-fw-bold);
  font-size: 2.8rem;
  line-height: 1.3;
  color: var(--rf-heading-slate);
  margin-bottom: 1.8rem;
}

@media (min-width: 980px) {
  .rf-product-showcase h2 {
    font-size: var(--rf-fs-section);
    line-height: var(--rf-lh-section);
  }
}

.rf-product-showcase .product-showcase-content p {
  font-size: var(--rf-fs-body);
  font-weight: var(--rf-fw-book);
  line-height: var(--rf-lh-body);
  margin-bottom: 3.2rem;
  max-width: 36rem;
}

.rf-product-showcase .product-showcase-content .cta-pill {
  margin-top: auto;
}

.rf-product-showcase .product-showcase-media {
  position: relative;
  margin: 0 -2rem -3.2rem;
  padding: 2rem 0 0;
  background: url("/content/img/refresh/pattern-debit.svg") right bottom / cover no-repeat;
}

@media (min-width: 980px) {
  .rf-product-showcase .product-showcase-media {
    margin: -4.4rem -4rem -4.4rem 0;
    background-position: center;
    background-size: 80%;
    background-repeat: no-repeat;
  }
}

.rf-product-showcase .debit-cards {
  position: relative;
  height: 30rem;
  max-width: 40rem;
  margin: 0 auto;
}

@media (min-width: 980px) {
  .rf-product-showcase .debit-cards {
    height: 100%;
    max-width: none;
  }
}

/* Named debit-card-img, not product-card — site.css already defines a
   .product-card component (display:flex, max-width:16em at desktop) for an
   unrelated card-grid pattern, and the shared class name silently collided
   with this widget's markup. */
.rf-product-showcase .debit-cards .debit-card-img {
  position: absolute;
  width: 55%;
  height: auto;
}

.rf-product-showcase .debit-cards .debit-card-img--front {
  left: 6%;
  top: 0;
  z-index: 2;
}

.rf-product-showcase .debit-cards .debit-card-img--back {
  right: 4%;
  top: 18%;
}

@media (min-width: 980px) {
  .rf-product-showcase .debit-cards .debit-card-img--front {
    width: 54%;
    left: 6%;
    top: -10rem;
  }

  .rf-product-showcase .debit-cards .debit-card-img--back {
    width: 50%;
    right: 2%;
    top: 4rem;
  }
}

/* ====================================================================
   Content Carousel
   ==================================================================== */

.rf-content-carousel {
  margin-top: 6.4rem;
  /* Design .news-section is `padding: 2rem 0` — no horizontal inset. Its slides
     run full-bleed and only the card inside is inset (via the card's own
     `margin: -2rem 2rem 0`). Measured at 375: this 2rem side padding made every
     slide 335px against the design's 375px, and every card 295px against 335px. */
  padding: 2rem 0;
  position: relative;
}

/* Default (blank Theme) paints no background of its own — it inherits the enclosing
   RefreshStandardSection's Background, same as RateCards/Testimonials/LinkList. bg-tint/
   bg-white are the explicit section-background half of the two-axis Theme options; the
   panel-color half (blank/theme-tint/theme-inverse) is set on .carousel-card further down. */
.rf-content-carousel.bg-tint {
  background: var(--rf-page-bg);
}

.rf-content-carousel.bg-white {
  background: var(--rf-white);
}

.rf-content-carousel.rf-carousel--full {
  padding-left: 0;
  padding-right: 0;
}

.rf-content-carousel .content-carousel-inner {
  max-width: var(--rf-container-max);
  margin: 0 auto;
  border-radius: 0;
  overflow: hidden;
}

.rf-content-carousel.rf-carousel--full .content-carousel-inner {
  max-width: none;
  /* Matches news-headlines.html's full-bleed .news-frame: (0,3,0) beats the
     desktop (0,2,0) rounding rule below at every viewport, so this needs no
     media query of its own. */
  border-radius: 0;
}

@media (min-width: 980px) {
  .rf-content-carousel .content-carousel-inner {
    border-radius: var(--rf-radius-panel);
  }
}

.rf-content-carousel .carousel-track {
  gap: 0;
}

.rf-content-carousel .carousel-slide {
  padding: 0 0 2rem;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

/* Mobile: the <img> carries the photo; hide the inline background-image
   so it doesn't duplicate behind the card. */
@media (max-width: 979.98px) {
  .rf-content-carousel .carousel-slide {
    background-image: none !important;
  }
}

/* Mobile: a real <img> carries the photo (JS-free, deterministic height).
   Desktop: the background-image on .carousel-slide takes over instead. */
.rf-content-carousel .carousel-slide-img {
  display: block;
  width: 100%;
  height: 24rem;
  object-fit: cover;
}

.rf-content-carousel .carousel-card {
  margin: -2rem 2rem 0;
}

@media (min-width: 980px) {
  .rf-content-carousel .carousel-slide-img {
    display: none;
  }

  .rf-content-carousel .carousel-card {
    margin: 0;
  }

  .rf-content-carousel .carousel-slide {
    min-height: 56rem;
    display: flex;
    align-items: center;
    padding: 6.4rem 5rem;
  }

  .rf-content-carousel.rf-carousel--right .carousel-slide {
    justify-content: flex-end;
  }
}

@media (min-width: 980px) {
  .rf-content-carousel.rf-carousel--full .carousel-slide {
    padding-left: max(2rem, calc((100% - var(--rf-container-max)) / 2));
    padding-right: max(2rem, calc((100% - var(--rf-container-max)) / 2));
  }
}

@media (min-width: 980px) {
  .rf-content-carousel.rf-carousel--right .carousel-card {
    margin-left: auto;
  }
}

.rf-content-carousel .carousel-card {
  position: relative;
  background: var(--rf-white);
  border-radius: var(--rf-radius-panel);
  padding: 3.2rem 2.4rem;
  max-width: 46rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

@media (min-width: 980px) {
  .rf-content-carousel .carousel-card {
    padding: 4.4rem 4rem;
    min-height: 39rem;
  }
}

.rf-content-carousel .carousel-card h2 {
  font-family: var(--rf-font-slab);
  font-weight: var(--rf-fw-bold);
  font-size: 2.8rem;
  line-height: 1.3;
  color: var(--rf-red);
  margin-bottom: 1.8rem;
}

@media (min-width: 980px) {
  .rf-content-carousel .carousel-card h2 {
    font-size: var(--rf-fs-section);
    line-height: var(--rf-lh-section);
  }
}

.rf-content-carousel .carousel-card p {
  font-size: var(--rf-fs-body);
  font-weight: var(--rf-fw-book);
  line-height: var(--rf-lh-body);
  color: var(--rf-text);
  margin-bottom: 3.2rem;
  max-width: 36rem;
}

.rf-content-carousel .cta-pill {
  margin-top: auto;
}

/* dots render below the card, over the photo — the card anchors them so they
   shift with it in the align-right variant. */
.rf-content-carousel .carousel-dots {
  position: absolute;
  top: calc(100% + 2rem);
  left: 0;
  right: 0;
  justify-content: center;
  gap: 0.6rem;
}

.rf-content-carousel .carousel-dots .dot {
  flex: 1;
  width: auto;
  background: var(--rf-white);
}

.rf-content-carousel .carousel-dots .dot.active {
  background: var(--rf-red);
}

/* Content Carousel card-panel theme variants — default (no class) keeps the card's own
   unconditional white look (.carousel-card above). theme-inverse (red) further down. */
.rf-content-carousel.theme-tint .carousel-card {
  background: var(--rf-card-beige);
}

.rf-content-carousel.theme-inverse .carousel-card {
  background: var(--rf-red);
}

.rf-content-carousel.theme-inverse .carousel-card h2,
.rf-content-carousel.theme-inverse .carousel-card p {
  color: var(--rf-white);
}

.rf-content-carousel.theme-inverse .cta-pill {
  border-color: var(--rf-white);
  color: var(--rf-white);
  --wipe: var(--rf-white);
}

.rf-content-carousel.theme-inverse .cta-pill .cta-arrow img {
  filter: var(--rf-filter-white);
}

.rf-content-carousel.theme-inverse .cta-pill:hover,
.rf-content-carousel.theme-inverse .cta-pill:focus-visible {
  color: var(--rf-red);
}

.rf-content-carousel.theme-inverse .cta-pill:hover .cta-arrow img,
.rf-content-carousel.theme-inverse .cta-pill:focus-visible .cta-arrow img {
  filter: none;
}

.rf-content-carousel.theme-inverse .button-pill:hover,
.rf-content-carousel.theme-inverse .button-pill:focus-visible {
  background: var(--rf-btn-hover-beige);
  border-color: var(--rf-btn-hover-beige);
  color: var(--rf-red);
}

.rf-content-carousel.theme-inverse .carousel-dots .dot {
  background: rgba(255, 255, 255, 0.4);
}

.rf-content-carousel.theme-inverse .carousel-dots .dot.active {
  background: var(--rf-white);
}

/* --- Shared carousel plumbing (used by ContentCarousel, FeatureBlockSlider, Testimonials) --- */

.carousel-dots {
  display: flex;
  gap: 0.3rem;
  align-items: center;
}

.carousel-dots .dot {
  width: var(--rf-dot-w);
  height: var(--rf-dot-h);
  border-radius: 0.4rem;
  background: var(--rf-white);
  border: 0;
  padding: 0;
  cursor: pointer;
}

.carousel-dots .dot.active {
  background: var(--rf-red);
}

.carousel-track {
  display: flex;
  gap: 2rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.carousel-track::-webkit-scrollbar {
  display: none;
}

.carousel-track > * {
  flex: 0 0 100%;
  min-width: 0;
  scroll-snap-align: start;
}

.carousel-track:focus-visible {
  outline: 0.2rem solid var(--rf-red);
  outline-offset: 0.4rem;
}

/* ====================================================================
   Headline Banner
   ==================================================================== */

/* No unconditional background here — Default (blank Theme) inherits whatever
   the enclosing RefreshStandardSection painted. theme-tint below is the
   explicit "Warm gray background" override, for when this widget needs that
   look regardless of its section's own background. */
.rf-headline-banner.theme-tint {
  background: var(--rf-page-bg);
}

.rf-headline-banner .headline-banner-inner {
  padding: 10rem 2rem 4.4rem;
  text-align: center;
}

.rf-headline-banner .headline-eyebrow {
  display: block;
  font-size: 1.6rem;
  font-weight: var(--rf-fw-medium);
  line-height: 2.2rem;
  color: var(--rf-text);
  margin-bottom: 3.2rem;
}

.rf-headline-banner h2 {
  font-family: var(--rf-font-body);
  font-weight: var(--rf-fw-black);
  font-size: 4.4rem;
  line-height: 1.15;
  color: var(--rf-red);
  max-width: 110rem;
  margin-left: auto;
  margin-right: auto;
  text-wrap: balance;
}

@media (min-width: 980px) {
  .rf-headline-banner h2 {
    font-size: var(--rf-fs-display);
    line-height: 7.9rem;
  }
}

.rf-headline-banner.theme-inverse {
  background: var(--rf-red);
  padding-top: 6.4rem;
  padding-bottom: 6.4rem;
}

.rf-headline-banner.theme-inverse .headline-eyebrow,
.rf-headline-banner.theme-inverse h2 {
  color: var(--rf-white);
}

.rf-headline-banner.theme-white {
  background: var(--rf-white);
}

/* Banner keeps its natural height — messages cycle under a wheel scroll-lock
   (see refresh-components.js, initBannerAnimations). A static (non-cycling)
   headline would wait for the eyebrow to finish typing via .banner-follow;
   this widget always cycles, but the rule is kept for parity with the JS. */
.rf-headline-banner .banner-follow {
  opacity: 0;
  transform: translateY(1.6rem);
  transition: opacity 500ms ease, transform 500ms ease;
}

.rf-headline-banner.banner-typed .banner-follow {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .rf-headline-banner .banner-follow {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

.rf-headline-banner .banner-msgs {
  position: relative;
}

.rf-headline-banner .banner-msgs .banner-msg {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  opacity: 0;
  transform: translateY(1.8rem);
  transition: opacity 500ms ease, transform 500ms ease;
}

.rf-headline-banner .banner-msgs .banner-msg.active {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .rf-headline-banner .banner-msgs .banner-msg {
    transition: none;
  }
}

/* ====================================================================
   Feature Block Slider
   ==================================================================== */

.rf-feature-slider {
  padding: 7.6rem 0 4rem;
  height: var(--sc-section-h, auto);
}

/* Default (blank Theme) paints no background of its own — it inherits the enclosing
   RefreshStandardSection's Background, same as RateCards/Testimonials/LinkList/Content
   Carousel. bg-tint/bg-white are the explicit section-background half of the two-axis Theme
   options; the panel-color half (blank/theme-tint/theme-inverse) is set on
   .feature-slider-slide further down. */
.rf-feature-slider.bg-tint {
  background: var(--rf-page-bg);
}

.rf-feature-slider.bg-white {
  background: var(--rf-white);
}

.rf-feature-slider .feature-slider-inner {
  /* Full .container.wide geometry: the max-width was already the container's,
     but without the container's side padding the content box came out 1260px
     against the design's 1160px (measured at 1920). */
  max-width: calc(var(--rf-container-max) + 4rem);
  margin: 0 auto;
  padding: 0 2rem;
  height: 100%;
}

@media (min-width: 768px) {
  .rf-feature-slider .feature-slider-inner {
    max-width: calc(var(--rf-container-max) + 10rem);
    padding: 0 5rem;
  }
}

.rf-feature-slider [data-carousel] {
  position: sticky;
  top: var(--sc-top, 12rem);
}

.rf-feature-slider .sc-viewport {
  overflow: hidden;
  height: var(--sc-h, auto);
}

.rf-feature-slider .carousel-track {
  flex-direction: column;
  overflow: visible;
  scroll-snap-type: none;
  transform: translateY(var(--sc-y, 0));
}

.rf-feature-slider .carousel-track > * {
  flex: 0 0 auto;
  height: var(--sc-h, auto);
}

.rf-feature-slider .carousel-dots.vertical {
  position: absolute;
  right: -2.2rem;
  top: 0;
  transform: none;
  height: var(--sc-h, 100%);
  gap: 0.6rem;
}

.rf-feature-slider .carousel-dots.vertical .dot {
  flex: 1;
  height: auto;
  background: var(--rf-white);
}

.rf-feature-slider .carousel-dots.vertical .dot.active {
  background: var(--rf-red);
}

@media (prefers-reduced-motion: reduce) {
  .rf-feature-slider .carousel-track {
    transition: none;
  }
}

.feature-slider-slide {
  position: relative;
  background: var(--rf-white);
  border-radius: var(--rf-radius-panel);
  padding: 2.4rem 2rem 3.2rem;
}

@media (min-width: 980px) {
  .feature-slider-slide {
    display: grid;
    grid-template-columns: 48% 1fr;
    gap: 4.4rem;
    padding: 2.8rem;
  }
}

.feature-slider-media {
  display: flex;
  align-items: center;
}

.feature-slider-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--rf-radius-tile);
}

.feature-slider-media .fpo-image {
  min-height: 34rem;
  height: 100%;
}

.feature-slider-content {
  padding: 2.4rem 0 0;
}

@media (min-width: 980px) {
  .feature-slider-content {
    padding: 3.2rem 4.4rem 2.4rem 0;
  }
}

.feature-slider-content h2 {
  font-family: var(--rf-font-slab);
  font-weight: var(--rf-fw-bold);
  font-size: 2.8rem;
  line-height: 1.25;
  color: var(--rf-heading-slate);
  margin-bottom: 1.8rem;
}

@media (min-width: 980px) {
  .feature-slider-content h2 {
    font-size: var(--rf-fs-section);
    line-height: 4.3rem;
  }
}

.feature-slider-content p {
  font-size: var(--rf-fs-body);
  font-weight: var(--rf-fw-book);
  line-height: var(--rf-lh-body);
  margin-bottom: 2.8rem;
}

.feature-benefits {
  margin-bottom: 1.6rem;
}

.feature-benefits .benefit,
.feature-benefits p {
  display: flex;
  align-items: center;
  gap: 1.8rem;
  margin-bottom: 1.6rem;
  font-size: var(--rf-fs-btn-sm);
  font-weight: var(--rf-fw-medium);
  color: var(--rf-heading-slate);
}

.feature-benefits img {
  width: 3rem;
  height: 3rem;
}

.feature-slider-content .cta-pill {
  margin-top: 1.6rem;
}

@media (max-width: 979.98px) {
  .rf-feature-slider {
    height: auto;
  }

  .rf-feature-slider .feature-slider-inner {
    height: auto;
  }

  .rf-feature-slider [data-carousel] {
    position: static;
    top: auto;
  }

  .rf-feature-slider .sc-viewport {
    overflow: visible;
    height: auto;
  }

  .rf-feature-slider .carousel-track {
    flex-direction: row;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    transform: none;
  }

  .rf-feature-slider .carousel-track > * {
    flex: 0 0 100%;
    height: auto;
  }

  .rf-feature-slider .carousel-dots.vertical {
    position: static;
    flex-direction: row;
    transform: none;
    top: auto;
    right: auto;
    height: auto;
    width: 100%;
    gap: 0.3rem;
    justify-content: center;
    margin-top: 0.5em;
  }

  .rf-feature-slider .carousel-dots.vertical .dot {
    flex: 1 1 0;
    width: auto;
    height: var(--rf-dot-h);
  }
}

/* Card-panel theme variants — default (no class) keeps .feature-slider-slide's own
   unconditional white look. Design only ever recolors the CARD, never the section —
   .rewards-section.theme-inverse and .theme-tint both target .rewards-card exclusively
   (themes.css). This used to also redden the whole .rf-feature-slider section for
   theme-inverse, which the design never does — the section keeps whatever background the
   bg-tint/bg-white/section-inherited axis gives it, same as every other themed state. */
.rf-feature-slider.theme-tint .feature-slider-slide {
  background: var(--rf-card-beige);
}

.rf-feature-slider.theme-inverse .feature-slider-slide {
  background: var(--rf-red);
}

.rf-feature-slider.theme-inverse .feature-slider-content h2,
.rf-feature-slider.theme-inverse .feature-slider-content p,
.rf-feature-slider.theme-inverse .feature-benefits .benefit,
.rf-feature-slider.theme-inverse .feature-benefits p {
  color: var(--rf-white);
}

.rf-feature-slider.theme-inverse .feature-benefits img {
  filter: var(--rf-filter-white);
}

.rf-feature-slider.theme-inverse .feature-slider-content .cta-pill {
  border-color: var(--rf-white);
  color: var(--rf-white);
  --wipe: var(--rf-white);
}

.rf-feature-slider.theme-inverse .feature-slider-content .cta-pill .cta-arrow img {
  filter: var(--rf-filter-white);
}

.rf-feature-slider.theme-inverse .feature-slider-content .cta-pill:hover,
.rf-feature-slider.theme-inverse .feature-slider-content .cta-pill:focus-visible {
  color: var(--rf-red);
}

.rf-feature-slider.theme-inverse .feature-slider-content .cta-pill:hover .cta-arrow img,
.rf-feature-slider.theme-inverse .feature-slider-content .cta-pill:focus-visible .cta-arrow img {
  filter: none;
}

.rf-feature-slider.theme-inverse .carousel-dots.vertical .dot {
  background: rgba(255, 255, 255, 0.4);
}

.rf-feature-slider.theme-inverse .carousel-dots.vertical .dot.active {
  background: var(--rf-white);
}

/* Image position + treatment [component-library/components/rewards-fomo.html] */
@media (min-width: 980px) {
  .feature-slider-media {
    order: 1;
  }

  .feature-slider-content {
    order: 2;
  }

  .rf-feature-slider.image-right .feature-slider-slide {
    grid-template-columns: 1fr 48%;
  }

  .rf-feature-slider.image-right .feature-slider-media {
    order: 2;
  }

  .rf-feature-slider.image-right .feature-slider-content {
    order: 1;
  }

  /* Overlap: the image bleeds past the card edge instead of sitting inside
     a contained, rounded photo box. */
  .rf-feature-slider.image-overlap .feature-slider-slide {
    display: block;
    position: relative;
    overflow: visible;
    min-height: 34rem;
    padding-left: calc(48% + 4rem);
  }

  .rf-feature-slider.image-overlap.image-right .feature-slider-slide {
    padding-left: 2.8rem;
    padding-right: calc(48% + 4rem);
  }

  .rf-feature-slider.image-overlap .feature-slider-media {
    position: absolute;
    top: -3.2rem;
    bottom: -3.2rem;
    left: 0;
    width: 48%;
    margin: 0;
    height: auto;
  }

  .rf-feature-slider.image-overlap.image-right .feature-slider-media {
    left: auto;
    right: 0;
  }

  .rf-feature-slider.image-overlap .feature-slider-media img {
    height: 100%;
    width: 100%;
    object-fit: contain;
    border-radius: 0;
  }

  .rf-feature-slider.image-overlap .feature-slider-media .fpo-image {
    height: 100%;
    min-height: 0;
    border-radius: 1.2rem;
  }
}

/* ====================================================================
   Rate Cards
   ==================================================================== */

/* .rate-section is shared with Tabbed Section (_TabbedSection.cshtml also renders this
   class), so its unconditional white background must stay — Tabbed Section's own blank/
   "White" Theme option relies on it. RateCards' own Default (blank Theme) instead overrides
   it back to transparent below, scoped to .rf-rate-cards only, so it can inherit the
   enclosing RefreshStandardSection's Background without affecting Tabbed Section. */
.rate-section {
  background: var(--rf-white);
  border-radius: var(--rf-radius-panel);
  margin-top: 6.4rem;
  padding: 6rem 0 7.6rem;
}

.rate-section.rf-rate-cards {
  background: transparent;
  border-radius: 0;
}

.rate-cards-head {
  margin-bottom: 3.2rem;
}

.rate-cards-head > * + * {
  margin-top: 0.8rem;
}

@media (min-width: 980px) {
  .rate-section {
    padding: 7.6rem 0 8.4rem;
  }
}

.rate-section.square {
  border-radius: 0;
}

.rate-select-wrap {
  position: relative;
  max-width: 34rem;
  margin: 0 auto 2.4rem;
}

@media (min-width: 980px) {
  .rate-select-wrap {
    display: none;
  }
}

.rate-select-wrap select {
  width: 100%;
  min-height: var(--rf-cta-h);
  padding: 0 4.4rem 0 2rem;
  border: 0.15rem solid var(--rf-red);
  border-radius: var(--rf-radius-pill);
  background: transparent;
  color: var(--rf-red);
  font-family: var(--rf-font-body);
  font-size: 1.5rem;
  font-weight: var(--rf-fw-medium);
  appearance: none;
}

.rate-select-wrap::after {
  content: "";
  position: absolute;
  right: 2rem;
  top: 50%;
  width: 1rem;
  height: 1rem;
  border-right: 0.2rem solid var(--rf-red);
  border-bottom: 0.2rem solid var(--rf-red);
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
}

/* --- Custom styled select (replaces native <select> via JS) ------------- */
/* Base styles — white border/text on dark backgrounds (LinkList default red
   panel). .rate-select-wrap overrides further down for light backgrounds. */

.custom-select {
  position: relative;
  margin-bottom: 2.8rem;
}

.custom-select-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 5.4rem;
  padding: 0 2.4rem;
  background: transparent;
  border: 0.15rem solid var(--rf-white);
  border-radius: var(--rf-radius-pill);
  color: var(--rf-white);
  font-family: var(--rf-font-body);
  font-weight: var(--rf-fw-medium);
  font-size: 1.6rem;
  cursor: pointer;
  transition: background-color var(--rf-ease);
}

.custom-select-trigger:hover {
  background: rgba(255, 255, 255, 0.1);
}

.custom-select-chevron {
  width: 2rem;
  height: 2rem;
  flex: 0 0 auto;
  transition: transform 300ms ease;
}

.custom-select.open .custom-select-chevron {
  transform: rotate(180deg);
}

.custom-select-options {
  display: none;
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 0.8rem);
  background: var(--rf-white);
  border-radius: var(--rf-radius-tile);
  box-shadow: 0 1.2rem 2.4rem rgba(0, 0, 0, 0.15);
  list-style: none;
  padding: 0.8rem 0;
  z-index: 10;
  max-height: 28rem;
  overflow-y: auto;
}

.custom-select.open .custom-select-options {
  display: block;
  animation: selectSlideDown 200ms ease;
}

.custom-select-options li {
  padding: 1.4rem 2.4rem;
  font-family: var(--rf-font-body);
  font-size: 1.6rem;
  font-weight: var(--rf-fw-medium);
  color: var(--rf-text);
  cursor: pointer;
  transition: background-color 150ms ease, color 150ms ease;
}

.custom-select-options li:hover {
  background: var(--rf-card-beige);
}

.custom-select-options li[aria-selected="true"] {
  color: var(--rf-red);
  font-weight: var(--rf-fw-bold);
}

@media (min-width: 980px) {
  .custom-select-trigger {
    min-height: 8rem;
    font-size: 3.2rem;
    padding: 0 4.4rem;
  }

  .custom-select-chevron {
    width: 2.8rem;
    height: 2.8rem;
  }

  .custom-select-options li {
    padding: 1.8rem 4.4rem;
    font-size: 2rem;
  }
}

/* Theme overrides — white/tint themes need red border/text on the custom select */
.rf-linklist.theme-white .custom-select-trigger,
.rf-linklist.theme-tint .custom-select-trigger {
  border-color: var(--rf-red);
  color: var(--rf-red);
}

.rf-linklist.theme-white .custom-select-trigger:hover,
.rf-linklist.theme-tint .custom-select-trigger:hover {
  background: rgba(213, 0, 50, 0.05);
}

.rf-linklist.theme-white .custom-select-chevron,
.rf-linklist.theme-tint .custom-select-chevron {
  color: var(--rf-red);
}

/* Hide native select chevron when custom select is active */
.linklist-dropdown-wrap:has([data-custom-select]) .linklist-dropdown {
  display: none;
}

/* Custom select on light backgrounds (rate section tab selects) */
.rate-select-wrap .custom-select-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  border-color: var(--rf-red);
  color: var(--rf-red);
  min-height: var(--rf-cta-h);
  padding: 0 2.4rem;
  background: transparent;
  border: 0.15rem solid var(--rf-red);
  border-radius: var(--rf-radius-pill);
  font-family: var(--rf-font-body);
  font-size: 1.5rem;
  font-weight: var(--rf-fw-medium);
  cursor: pointer;
  transition: background-color var(--rf-ease);
}

.rate-select-wrap .custom-select-trigger:hover {
  background: rgba(213, 0, 50, 0.05);
}

.rate-select-wrap .custom-select-chevron {
  width: 2rem;
  height: 2rem;
  flex: 0 0 auto;
  transition: transform 300ms ease;
}

.rate-select-wrap .custom-select.open .custom-select-chevron {
  transform: rotate(180deg);
}

.rate-select-wrap .custom-select-options {
  display: none;
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 0.8rem);
  background: var(--rf-white);
  border-radius: 1.6rem;
  padding: 0.8rem 0;
  margin: 0;
  list-style: none;
  box-shadow: 0 0.8rem 2.4rem rgba(0, 0, 0, 0.15);
  z-index: 10;
  max-height: 28rem;
  overflow-y: auto;
}

.rate-select-wrap .custom-select.open .custom-select-options {
  display: block;
  animation: selectSlideDown 200ms ease;
}

@keyframes selectSlideDown {
  from { opacity: 0; transform: translateY(-0.8rem); }
  to { opacity: 1; transform: translateY(0); }
}

.rate-select-wrap .custom-select-options li {
  padding: 1.4rem 2.4rem;
  font-family: var(--rf-font-body);
  font-size: 1.6rem;
  font-weight: var(--rf-fw-medium);
  color: var(--rf-text);
  cursor: pointer;
  transition: background-color 150ms ease, color 150ms ease;
}

.rate-select-wrap .custom-select-options li:hover {
  background: var(--rf-card-beige);
}

.rate-select-wrap .custom-select-options li[aria-selected="true"] {
  color: var(--rf-red);
  font-weight: var(--rf-fw-bold);
}

@media (min-width: 980px) {
  .rate-select-wrap .custom-select-trigger {
    min-height: var(--rf-cta-h);
    font-size: 1.5rem;
    padding: 0 2.4rem;
  }

  .rate-select-wrap .custom-select-options li {
    padding: 1.8rem 4.4rem;
    font-size: 2rem;
  }
}

.rate-select-wrap:has([data-custom-select])::after {
  display: none;
}

.rate-tabs {
  display: none;
}

@media (min-width: 980px) {
  .rate-tabs {
    display: flex;
    justify-content: center;
    gap: 6rem;
    margin-bottom: 4rem;
  }
}

.rate-tabs .rate-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.2rem;
  background: none;
  border: 0;
  padding: 0 0 1.4rem;
  cursor: pointer;
  font-family: var(--rf-font-body);
  font-size: var(--rf-fs-cardtitle);
  font-weight: var(--rf-fw-medium);
  color: var(--rf-text);
  border-bottom: 0.3rem solid transparent;
  transition: color var(--rf-ease);
}

.rate-tabs .rate-tab img {
  height: 5rem;
  width: auto;
}

.rate-tabs .rate-tab:hover,
.rate-tabs .rate-tab:focus-visible {
  color: var(--rf-red);
}

.rate-tabs .rate-tab[aria-selected="true"] {
  color: var(--rf-red);
  border-bottom-color: var(--rf-red);
}

.rate-tiles {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.6rem;
  max-width: 34rem;
  margin: 0 auto;
}

.rate-tiles[hidden] {
  display: none;
}

@media (min-width: 980px) {
  .rate-tiles {
    grid-template-columns: repeat(4, 1fr);
    gap: 2.2rem;
    max-width: none;
  }

  /* "Items per row" widget property — how many tiles show before wrapping/stacking,
     same concept as PromoCards' ("Feature List") cols-2/cols-3/cols-4. */
  .rate-tiles.cols-2 {
    grid-template-columns: repeat(2, 1fr);
  }

  .rate-tiles.cols-3 {
    grid-template-columns: repeat(3, 1fr);
  }
}

.rate-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  background: var(--rf-card-beige);
  border-radius: var(--rf-radius-tile);
  padding: 2.4rem 2rem 2rem;
  text-align: center;
  transition: transform var(--rf-ease), box-shadow var(--rf-ease);
}

.rate-tile:hover {
  transform: translateY(-0.3rem);
  box-shadow: 0 1rem 2.4rem rgba(0, 0, 0, 0.12);
}

.rate-tile h3 {
  font-size: var(--rf-fs-cardtitle);
  font-weight: var(--rf-fw-medium);
  color: var(--rf-text);
}

.rate-tile .rate-qualifier {
  font-size: var(--rf-fs-body);
  font-weight: var(--rf-fw-book);
}

.rate-tile .rate-value {
  font-family: var(--rf-font-slab);
  font-weight: var(--rf-fw-medium);
  font-size: var(--rf-fs-rate);
  line-height: 1.3;
  letter-spacing: var(--rf-ls-rate);
  color: var(--rf-red);
}

/* %, label (APR/APY), and footnote symbols roll up to the top-right of the
   rate number at roughly ⅓ the size, matching the old site's treatment.
   inline-block lets the <br> inside stack % and label vertically while the
   whole unit stays anchored to the top of the rate number. */
.rate-tile .rate-unit {
  display: inline-block;
  font-size: 0.35em;
  font-weight: var(--rf-fw-bold);
  vertical-align: top;
  line-height: 1.3;
  letter-spacing: 0;
  text-align: left;
  margin-left: 0.5em;
  margin-top: 0.4em;
}

/* "Full" label layout — label on its own line below the rate value, at a readable
   size. Used for longer labels like "Dividend Rate" that don't fit in the compact
   stacked treatment. */
.rate-tile .rate-label {
  font-size: var(--rf-fs-body);
  font-weight: var(--rf-fw-bold);
  color: var(--rf-red);
  margin-top: 0.2rem;
}

/* Pushes the button to the bottom of the card regardless of how much text is above
   it, so buttons line up across a row instead of trailing right after each card's own
   (varying-length) content. Works because .rate-tiles is a grid, so cards in the same
   row already stretch to equal height by default — margin-top: auto on a flex child
   then fills that leftover space. */
.rate-tile .petal-btn {
  margin-top: auto;
}

.rate-tiles.slide-in-right {
  animation: rate-slide-right 320ms ease both;
}

.rate-tiles.slide-in-left {
  animation: rate-slide-left 320ms ease both;
}

@keyframes rate-slide-right {
  from { opacity: 0; transform: translateX(3.2rem); }
  to { opacity: 1; transform: none; }
}

@keyframes rate-slide-left {
  from { opacity: 0; transform: translateX(-3.2rem); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .rate-tiles.slide-in-right,
  .rate-tiles.slide-in-left {
    animation: none;
  }
}

/* Tabbed Section — generic tab panel (holds a widget zone, unlike .rate-tiles' fixed
   card grid). Shares the .rate-section/.rate-tabs/.rate-select-wrap look and the
   rate-slide-* keyframes above so it drives off the same tab-switching JS. */
.tab-panel[hidden] {
  display: none;
}

/* A widget dropped into a tab (RateCards, ContentCarousel, LinkList) paints its own
   "gap to the tan page" band above itself via ::before (see the painted top-gap band
   comment above) — an assumption that's wrong here, since the tab panel's own background
   is white, not the tan page. Suppress it for any such widget nested in a tab panel. */
.tab-panel .rf-content-carousel::before,
.tab-panel .rate-section::before,
.tab-panel .rf-linklist::before {
  content: none;
}

.tab-panel.slide-in-right {
  animation: rate-slide-right 320ms ease both;
}

.tab-panel.slide-in-left {
  animation: rate-slide-left 320ms ease both;
}

@media (prefers-reduced-motion: reduce) {
  .tab-panel.slide-in-right,
  .tab-panel.slide-in-left {
    animation: none;
  }
}

.rate-tile.featured {
  background: var(--rf-red);
  justify-content: center;
  gap: 2.4rem;
}

.rate-tile.featured .petal-btn {
  background: transparent;
  border: 0.15rem solid var(--rf-white);
}

.rate-tile.featured .petal-btn:hover,
.rate-tile.featured .petal-btn:focus-visible {
  background: var(--rf-white);
}

.rate-tile.featured .petal-btn:hover img,
.rate-tile.featured .petal-btn:focus-visible img {
  filter: var(--rf-filter-to-red);
}

.rate-tile.featured .rate-card-link {
  color: var(--rf-white);
  font-size: var(--rf-fs-cardtitle);
  font-weight: var(--rf-fw-medium);
  line-height: 2.4rem;
}

.rate-section.theme-tint {
  background: var(--rf-page-bg);
  border-radius: 0;
}

.rate-section.theme-tint .rate-tile {
  background: var(--rf-white);
}

.rate-section.theme-tint .rate-tile.featured {
  background: var(--rf-red);
}

.rate-section.theme-tint .rate-tile .petal-btn {
  background: var(--rf-card-beige);
}

.rate-section.theme-tint .rate-tile.featured .petal-btn {
  background: transparent;
}

.rate-section.theme-tint .rate-tile.featured .petal-btn:hover,
.rate-section.theme-tint .rate-tile.featured .petal-btn:focus-visible {
  background: var(--rf-white);
}

.rate-section.theme-tint .rate-tile.featured .petal-btn:hover img,
.rate-section.theme-tint .rate-tile.featured .petal-btn:focus-visible img {
  filter: var(--rf-filter-to-red);
}

.rate-section.theme-white {
  background: var(--rf-white);
}

.rate-section.theme-white .rate-tile {
  background: var(--rf-card-beige);
}

/* The featured ("view all") tile always stays red regardless of theme — without this,
   .rate-section.theme-white .rate-tile (3 classes) beats the base .rate-tile.featured
   (2 classes) and repaints it beige like the other tiles. theme-tint already has this
   same override below; theme-white was missing it. */
.rate-section.theme-white .rate-tile.featured {
  background: var(--rf-red);
}

.rate-section.theme-inverse {
  background: var(--rf-red);
}

.rate-section.theme-inverse .rate-tile {
  background: var(--rf-white);
}

.rate-section.theme-inverse .rate-tile.featured {
  background: var(--rf-card-beige);
}

.rate-section.theme-inverse .rate-tile.featured .rate-card-link {
  color: var(--rf-red);
}

.rate-section.theme-inverse .rate-tile.featured .petal-btn {
  background: var(--rf-white);
  border: none;
}

.rate-section.theme-inverse .rate-tile.featured .petal-btn:hover,
.rate-section.theme-inverse .rate-tile.featured .petal-btn:focus-visible {
  background: var(--rf-red);
}

.rate-section.theme-inverse .rate-tile.featured .petal-btn:hover img,
.rate-section.theme-inverse .rate-tile.featured .petal-btn:focus-visible img {
  filter: var(--rf-filter-white);
}

/* --- Shared: petal arrow button (used by RateCards, Testimonials source pattern) --- */

.petal-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--rf-petal-size);
  height: var(--rf-petal-size);
  border: 0;
  padding: 0;
  /* White, not beige. The rate tile it sits on is already --rf-card-beige, so a
     beige button disappeared into it. The design's base .petal-btn is white and
     themes.css overrides it to beige only where the tile turns white
     (.rate-section.theme-tint .rate-tile .petal-btn). */
  background: var(--rf-white);
  border-radius: 0 50% 50% 50%; /* squared top-left corner — logo motif */
  cursor: pointer;
  transition: background-color var(--rf-ease);
}

.petal-btn.red {
  background: var(--rf-red);
}

.petal-btn.red img {
  filter: var(--rf-filter-white);
}

.petal-btn:hover,
.petal-btn:focus-visible {
  background: var(--rf-red);
}

.petal-btn:hover img,
.petal-btn:focus-visible img {
  filter: var(--rf-filter-white);
}

.petal-btn img {
  width: 1.7rem;
  height: 1.7rem;
}

/* ====================================================================
   Promo Cards
   ==================================================================== */

.rf-promo-cards.promo-cards--overlap {
  position: relative;
  z-index: 2;
  margin-top: -9.6rem;
}

.rf-promo-cards {
  padding: 0 2rem;
}

/* Default (blank Theme) paints no background of its own — it inherits the enclosing
   RefreshStandardSection's Background, same as RateCards/Testimonials/LinkList/Content
   Carousel/Feature Block. bg-tint/bg-white are the explicit section-background half of the
   two-axis Theme options; the panel-color half (blank/theme-tint/theme-inverse) is set on
   .promo-cards-inner below — default (no theme class) is white, matching the gallery's
   un-classed "Feature list, white bar" mockup. */
.rf-promo-cards.bg-tint {
  background: var(--rf-page-bg);
}

.rf-promo-cards.bg-white {
  background: var(--rf-white);
}

.rf-promo-cards .promo-cards-head {
  max-width: var(--rf-container-max);
  margin: 0 auto 2.4rem;
}

.rf-promo-cards .promo-cards-head > * + * {
  margin-top: 0.8rem;
}

.rf-promo-cards .promo-cards-inner {
  max-width: var(--rf-container-max);
  margin: 0 auto;
  background: var(--rf-white);
  border-radius: var(--rf-radius-card);
  padding: 1rem;
  display: grid;
  /* Without an explicit column count, CSS Grid's default auto-placement puts every
     item into a single row (each card gets its own auto-sized implicit column)
     instead of stacking — this is what caused the mobile blowout; single column
     below the cols-2/3/4 desktop breakpoint matches the design's stacked mobile
     layout. */
  grid-template-columns: 1fr;
}

/* Items per row (editor-controlled — see FeatureListWidget's ItemsPerRow in Foundation). */
@media (min-width: 980px) {
  .rf-promo-cards .promo-cards-inner.cols-2 {
    grid-template-columns: repeat(2, 1fr);
  }

  .rf-promo-cards .promo-cards-inner.cols-3 {
    grid-template-columns: repeat(3, 1fr);
  }

  .rf-promo-cards .promo-cards-inner.cols-4 {
    grid-template-columns: repeat(4, 1fr);
  }
}

.rf-promo-cards .promo-card {
  position: relative;
  display: block;
  border-radius: 2rem;
  padding: 2.6rem 5.6rem 2.8rem 2.4rem;
  text-decoration: none;
  transition: background-color var(--rf-ease);
}

.rf-promo-cards .promo-card + .promo-card::before {
  content: "";
  position: absolute;
  left: 2rem;
  right: 2rem;
  top: 0;
  height: 0.1rem;
  background: #d9d4d2;
}

@media (min-width: 980px) {
  .rf-promo-cards .promo-card + .promo-card::before {
    left: 0;
    right: auto;
    top: 1rem;
    bottom: 1rem;
    width: 0.1rem;
    height: auto;
  }

  /* The "+ .promo-card" selector above only knows "has a preceding sibling", not
     "is first in its own grid row" — with 2+ rows the first card of every row after
     the first also matches it and gets a stray divider on its own left edge. Suppress
     it there, per Items-per-row column count. */
  .rf-promo-cards .promo-cards-inner.cols-2 .promo-card:nth-child(2n+1)::before,
  .rf-promo-cards .promo-cards-inner.cols-3 .promo-card:nth-child(3n+1)::before,
  .rf-promo-cards .promo-cards-inner.cols-4 .promo-card:nth-child(4n+1)::before {
    content: none;
  }
}

.rf-promo-cards .promo-card-head {
  display: flex;
  align-items: flex-start;
  gap: 1.6rem;
  margin-bottom: 1rem;
  transition: gap var(--rf-ease);
}

@media (min-width: 980px) {
  .rf-promo-cards .promo-card-head {
    margin-bottom: 1.2rem;
  }
}

.rf-promo-cards .promo-card-icon {
  width: 4rem;
  height: 4rem;
  flex: 0 0 auto;
  display: block;
  transition: width var(--rf-ease), opacity var(--rf-ease);
}

.rf-promo-cards .promo-card:hover .promo-card-head,
.rf-promo-cards .promo-card:focus-visible .promo-card-head {
  gap: 0;
}

.rf-promo-cards .promo-card:hover .promo-card-icon,
.rf-promo-cards .promo-card:focus-visible .promo-card-icon {
  width: 0;
  opacity: 0;
}

.rf-promo-cards .promo-card-head h3 {
  font-size: var(--rf-fs-cardtitle);
  font-weight: var(--rf-fw-medium);
  line-height: 2.2rem;
  color: var(--rf-red);
  /* Optically aligns the heading with the 4rem icon beside it. Measured against
     the design: every other box in this card matched to the pixel, and this was
     the only delta (h3 48px in the design vs 44px here). */
  padding-top: 0.4rem;
}

.rf-promo-cards .promo-card p {
  font-size: var(--rf-fs-body);
  font-weight: var(--rf-fw-book);
  line-height: 2rem;
  color: var(--rf-text);
}

.rf-promo-cards .promo-card-arrow {
  position: absolute;
  top: 2.2rem;
  right: 2rem;
  width: 2.4rem;
  height: 2.4rem;
  opacity: 0;
  transform: translateX(-0.8rem);
  transition: opacity var(--rf-ease), transform var(--rf-ease);
}

.rf-promo-cards .promo-card:hover,
.rf-promo-cards .promo-card:focus-visible {
  background: var(--rf-red);
}

.rf-promo-cards .promo-card:focus-visible {
  outline: 0.2rem solid var(--rf-red);
  outline-offset: 0.2rem;
}

.rf-promo-cards .promo-card:hover::before,
.rf-promo-cards .promo-card:focus-visible::before,
.rf-promo-cards .promo-card:hover + .promo-card::before,
.rf-promo-cards .promo-card:focus-visible + .promo-card::before {
  display: none;
}

.rf-promo-cards .promo-card:hover h3,
.rf-promo-cards .promo-card:hover p,
.rf-promo-cards .promo-card:focus-visible h3,
.rf-promo-cards .promo-card:focus-visible p {
  color: var(--rf-white);
}

.rf-promo-cards .promo-card:hover .promo-card-icon,
.rf-promo-cards .promo-card:focus-visible .promo-card-icon {
  filter: var(--rf-filter-white);
}

.rf-promo-cards .promo-card:hover .promo-card-arrow,
.rf-promo-cards .promo-card:focus-visible .promo-card-arrow {
  opacity: 1;
  transform: none;
  filter: var(--rf-filter-white);
}

.rf-promo-cards.theme-inverse .promo-cards-inner {
  background: var(--rf-red);
}

.rf-promo-cards.theme-inverse .promo-card h3,
.rf-promo-cards.theme-inverse .promo-card p {
  color: var(--rf-white);
}

.rf-promo-cards.theme-inverse .promo-card-icon,
.rf-promo-cards.theme-inverse .promo-card-arrow {
  filter: var(--rf-filter-white);
}

.rf-promo-cards.theme-inverse .promo-card + .promo-card::before {
  background: rgba(255, 255, 255, 0.35);
}

.rf-promo-cards.theme-inverse .promo-card:hover,
.rf-promo-cards.theme-inverse .promo-card:focus-visible {
  background: var(--rf-white);
}

.rf-promo-cards.theme-inverse .promo-card:hover h3,
.rf-promo-cards.theme-inverse .promo-card:focus-visible h3 {
  color: var(--rf-red);
}

.rf-promo-cards.theme-inverse .promo-card:hover p,
.rf-promo-cards.theme-inverse .promo-card:focus-visible p {
  color: var(--rf-text);
}

.rf-promo-cards.theme-inverse .promo-card:hover .promo-card-icon,
.rf-promo-cards.theme-inverse .promo-card:focus-visible .promo-card-icon,
.rf-promo-cards.theme-inverse .promo-card:hover .promo-card-arrow,
.rf-promo-cards.theme-inverse .promo-card:focus-visible .promo-card-arrow {
  filter: none;
}

.rf-promo-cards.theme-tint .promo-cards-inner {
  background: var(--rf-card-beige);
}

.rf-promo-cards.theme-tint .promo-card + .promo-card::before {
  background: #cfc9c6;
}

/* ====================================================================
   Link List
   ==================================================================== */

/* Design uses two different margins here: help-cta (side photo / no image) is
   5.6rem; age-stage (photo band) is 6.4rem. Also no horizontal padding on the
   section itself in either case — .linklist-wrap's own max-width centers it. */
/* No unconditional background here — Default (blank Theme) inherits whatever
   the enclosing RefreshStandardSection painted. bg-tint/bg-white below are
   the explicit section-background overrides. */
.rf-linklist {
  margin-top: 5.6rem;
  padding: 2rem 0;
}

.rf-linklist--band-full {
  margin-top: 6.4rem;
}

.rf-linklist .linklist-wrap {
  max-width: var(--rf-container-max);
  margin: 0 auto;
}

/* The "band-full" (age-stage) panel style is design's own .container.wide
   element, not a child inset within it like the "side"/no-image panel
   styles — so it gets the wide extension directly, matching .container.wide
   in refresh-globals.css (1160px -> 1260px at desktop, measured against
   .age-panel-wrap). .container.wide only sets max-width; the horizontal
   inset itself comes from the base .container primitive (site.css) — 2rem
   below 768px, 5rem from 768px — which this bespoke wrap needs explicitly
   since it doesn't use the .container class. Without it the red panel ran
   flush to the screen edges on mobile instead of matching the design's gutter. */
.rf-linklist--band-full .linklist-wrap {
  max-width: calc(var(--rf-container-max) + 4rem);
  padding: 0 2rem;
}

@media (min-width: 768px) {
  .rf-linklist--band-full .linklist-wrap {
    max-width: calc(var(--rf-container-max) + 10rem);
    padding: 0 5rem;
  }
}

.rf-linklist .linklist-inner {
  max-width: var(--rf-container-max);
  margin: 0 auto;
  background: var(--rf-red);
  border-radius: var(--rf-radius-panel);
  padding: 3.6rem 2.4rem 4rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

@media (min-width: 980px) {
  .rf-linklist .linklist-inner {
    padding: 4.4rem 9rem 4.8rem;
  }
}

.rf-linklist .linklist-inner h2 {
  font-family: var(--rf-font-slab);
  font-weight: var(--rf-fw-bold);
  font-size: 2.8rem;
  line-height: 1.15;
  color: var(--rf-white);
  margin-bottom: 2.8rem;
}

@media (min-width: 980px) {
  .rf-linklist .linklist-inner h2 {
    font-size: var(--rf-fs-section);
  }
}

.rf-linklist .linklist-inner > p {
  color: var(--rf-white);
  font-size: var(--rf-fs-body);
  margin-bottom: 2rem;
  max-width: 60rem;
}

/* Design's plain .help-links (the "side" photo variant) has no
   grid-template-columns at mobile — a single, full-width stacked column.
   .age-panel .help-links (the "band" photo variant) is ALSO single-column at
   mobile but centered and capped at 27rem. Only the "no image" layout
   (.help-wrap--no-image .help-links) gets 2 columns at mobile. Production had
   this backwards: every variant forced 2 columns, which packed the side/band
   variants' buttons into half the height design shows (measured 241px
   against design's 380px at 375px wide). */
.linklist-buttons {
  display: grid;
  gap: 1.6rem;
  width: 100%;
  max-width: 58rem;
}

/* Design's plain .help-links (the "side" variant) has no margin-bottom --
   only .help-wrap--no-image .help-links and .age-panel .help-links
   (band-full) do. */
.rf-linklist:not(.rf-linklist--side):not(.rf-linklist--band-full) .linklist-buttons {
  grid-template-columns: repeat(2, 1fr);
  margin-bottom: 0.4rem;
}

.rf-linklist--band-full .linklist-buttons {
  grid-template-columns: 1fr;
  justify-content: center;
  text-align: center;
  max-width: 27rem;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 0.4rem;
}

@media (min-width: 980px) {
  /* Side (photo): 2 columns, right-aligned, matching design's plain
     .help-links desktop rule. Band (photo): 2 columns, centered, matching
     .age-panel .help-links. No-image: 3 columns, centered. */
  .rf-linklist--side .linklist-buttons {
    grid-template-columns: repeat(2, minmax(0, 27rem));
    gap: 2.4rem 1.6rem;
    justify-content: end;
    width: 100%;
  }

  .rf-linklist--band-full .linklist-buttons {
    grid-template-columns: repeat(2, minmax(0, 27rem));
    max-width: none;
  }

  .rf-linklist:not(.rf-linklist--side):not(.rf-linklist--band-full) .linklist-buttons {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    justify-content: center;
    max-width: none;
  }
}

.linklist-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  min-height: 5rem;
  padding: 0.4rem 3.6rem 0;
  border: 0.15rem solid var(--rf-white);
  border-radius: var(--rf-radius-pill);
  color: var(--rf-white);
  font-size: var(--rf-fs-btn-sm);
  font-weight: var(--rf-fw-medium);
  text-align: center;
  text-decoration: none;
  transition: padding var(--rf-ease);
}

@media (min-width: 980px) {
  .linklist-btn {
    min-height: var(--rf-linkpill-h);
  }
}

.linklist-btn-icon {
  display: block;
  height: 1.8rem;
  width: auto;
  flex: 0 0 auto;
}

.linklist-btn i {
  font-size: 1.6rem;
  line-height: 1;
  flex: 0 0 auto;
}

.linklist-btn::after {
  content: "";
  position: absolute;
  right: 1.6rem;
  top: 50%;
  width: 2.2rem;
  height: 2.2rem;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.17236 12.4137H19.6551M12.4137 19.6551L19.6551 12.4137L12.4137 5.17236' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.17236 12.4137H19.6551M12.4137 19.6551L19.6551 12.4137L12.4137 5.17236' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  opacity: 0;
  transform: translateY(-50%) translateX(-0.6rem);
  transition: opacity var(--rf-ease), transform var(--rf-ease);
}

.linklist-btn:hover,
.linklist-btn:focus-visible {
  padding-right: 5.2rem;
  padding-left: 2rem;
}

/* Legacy site.css has ".hover a:hover { color: ... }" at (0,2,1), which beats
   ".linklist-btn:hover" at (0,2,0) -- the default (white-text-on-red-panel)
   variant was flipping to that legacy dark link color on hover instead of
   staying white. ".hover" is already present on <body>; prefixing it here
   raises this rule to (0,3,0), same fix as the earlier cta-pill/button-pill
   hover-color bug. */
.hover .linklist-btn:hover,
.linklist-btn:focus-visible {
  color: var(--rf-white);
}

.linklist-btn:hover::after,
.linklist-btn:focus-visible::after {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}

.linklist-dropdown-wrap {
  width: 100%;
  display: grid;
  gap: 2.4rem;
  justify-items: center;
}

/* Design's no-image variant (.help-wrap--no-image .help-panel) has 40px
   between the dropdown and the "Learn More" button below it. */
.rf-linklist--dropdown:not(.rf-linklist--side):not(.rf-linklist--band-full) .linklist-dropdown-wrap {
  margin-bottom: 4rem;
}

/* Design caps the select at 56rem only for the side-photo and no-image
   variants (.help-cta .help-dropdown .age-select / .help-wrap--no-image
   .help-dropdown). The photo-band variant (.age-stage/.age-panel, used by
   both every-age-stage.html and what-can-we-do.html's own "DROPDOWN
   CENTERED" variants) has no such cap -- its select fills the panel's full
   content width. */
.rf-linklist:not(.rf-linklist--band-full) .linklist-dropdown-wrap {
  max-width: 56rem;
}

/* Design's band-full pattern (.age-panel > .age-select) has 28px
   between the dropdown and the "Learn More" button below it. */
.rf-linklist--band-full .linklist-dropdown-wrap {
  margin-bottom: 2.8rem;
}

.linklist-dropdown-image {
  display: block;
  width: 100%;
  height: 20rem;
  object-fit: cover;
  border-radius: var(--rf-radius-tile);
}

@media (min-width: 980px) {
  .linklist-dropdown-image {
    height: 26rem;
  }
}

.linklist-dropdown {
  width: 100%;
  min-height: 5.4rem;
  padding: 0 5rem 0 2.4rem;
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 5l6 6 6-6' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 2.4rem center / 1.2rem 1.2rem;
  border: 0.15rem solid var(--rf-white);
  border-radius: var(--rf-radius-pill);
  color: var(--rf-white);
  font-family: var(--rf-font-body);
  /* Matches .custom-select-trigger's font-weight, the real visible control
     design substitutes in for a native <select> via JS. */
  font-weight: var(--rf-fw-medium);
  font-size: 1.6rem;
  appearance: none;
  cursor: pointer;
}

.linklist-dropdown option {
  color: var(--rf-text);
  font-weight: var(--rf-fw-medium);
}

@media (min-width: 980px) {
  .linklist-dropdown {
    min-height: 8rem;
    font-size: 3.2rem;
    padding: 0 6rem 0 4.4rem;
    background-position: right 4.4rem center;
    background-size: 1.6rem 1.6rem;
  }
}

.rf-linklist--dropdown .button-pill-reversed {
  min-width: 20.4rem;
  min-height: 4.5rem;
}

.rf-linklist.theme-white .linklist-inner {
  background: var(--rf-white);
}

.rf-linklist.theme-white .linklist-inner h2 {
  color: var(--rf-red);
}

.rf-linklist.theme-white .linklist-inner p {
  color: var(--rf-text);
}

.rf-linklist.theme-white .linklist-btn {
  border-color: var(--rf-red);
  color: var(--rf-red);
}

.rf-linklist.theme-white .linklist-dropdown {
  border-color: var(--rf-red);
  color: var(--rf-red);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 5l6 6 6-6' fill='none' stroke='%23d50032' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.rf-linklist.theme-white .button-pill-reversed {
  background: var(--rf-red);
  border-color: var(--rf-red);
  color: var(--rf-white);
  --wipe: var(--rf-red-hover);
}

.rf-linklist.theme-tint .linklist-inner {
  background: var(--rf-card-beige);
}

.rf-linklist.theme-tint .linklist-inner h2 {
  color: var(--rf-red);
}

.rf-linklist.theme-tint .linklist-inner p {
  color: var(--rf-text);
}

.rf-linklist.theme-tint .linklist-btn {
  border-color: var(--rf-red);
  color: var(--rf-red);
}

.rf-linklist.theme-tint .linklist-dropdown {
  border-color: var(--rf-red);
  color: var(--rf-red);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 5l6 6 6-6' fill='none' stroke='%23d50032' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.rf-linklist.theme-tint .button-pill-reversed {
  background: var(--rf-red);
  border-color: var(--rf-red);
  color: var(--rf-white);
  --wipe: var(--rf-red-hover);
}

/* Section-background axis, independent of the panel-color classes above.
   Default (no class) paints nothing and inherits the enclosing
   RefreshStandardSection's own Background instead. bg-tint/bg-white are the
   two explicit overrides every non-Default Theme combo pairs itself with. */
.rf-linklist.bg-tint {
  background: var(--rf-page-bg);
}

.rf-linklist.bg-white {
  background: var(--rf-white);
}

/* Explicit red-panel class. The unthemed base .rf-linklist .linklist-inner
   rule already renders this exact look (red panel, white text/buttons) —
   this class exists only so "Red - Warm gray background"/"Red - White
   background" have their own addressable dropdown values distinct from
   "Default", which occupies the blank value. */
.rf-linklist.theme-red .linklist-inner {
  background: var(--rf-red);
}

/* Panel styles with a section image [component-library/components/what-can-we-do.html
   ("side"), every-age-stage.html ("band-full")]. Layout only — background/text colors
   still come from the .rf-linklist.theme-* rules above, applied to .linklist-inner. */

.rf-linklist--band-full .linklist-photo-band {
  height: 26rem;
  background-size: cover;
  /* Matches .age-photo's "center 30%" exactly -- design crops this band
     toward the top of the image, not centered. */
  background-position: center 30%;
  /* every-age-stage.html's band variant runs the photo edge to edge with
     square corners. */
  border-radius: 0;
}

@media (min-width: 980px) {
  .rf-linklist--band-full .linklist-photo-band {
    height: 36rem;
  }
}

.rf-linklist--band-full .linklist-wrap {
  margin-top: -12rem;
}

.rf-linklist--side .linklist-wrap {
  position: relative;
}

.rf-linklist--side .linklist-photo {
  position: relative;
  border-radius: var(--rf-radius-tile);
  overflow: hidden;
  z-index: 2;
  margin: 0 2rem;
}

.rf-linklist--side .linklist-photo img {
  display: block;
  width: 100%;
  height: 32rem;
  object-fit: cover;
}

.rf-linklist--side .linklist-photo h2 {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2rem;
  color: var(--rf-white);
  font-family: var(--rf-font-body);
  font-weight: var(--rf-fw-black);
  font-size: 3rem;
  line-height: 1.15;
  letter-spacing: 0.03em;
  text-shadow: 0 0.2rem 1.2rem rgba(0, 0, 0, 0.35);
}

.rf-linklist--side .linklist-inner {
  margin-top: -4rem;
  /* Base .linklist-inner's 3.6rem/2.4rem/4rem padding matches design's
     no-image variant. The side (with-photo) variant's real mobile padding
     is different -- .help-cta .help-panel's own base rule, before the
     no-image override replaces it -- 2rem sides, 3.2rem bottom, with the
     top separately forced to 6rem to clear the overlapping photo. The
     desktop breakpoint below already overrides padding wholesale and was
     already correct. */
  padding: 6rem 2rem 3.2rem;
  border-radius: 0;
}

/* Design's "side, dropdown" variant (the only dropdown variant with no
   "Learn More" button below it) measures 88px of space between the select
   and the panel's bottom edge, not the 40px .linklist-inner's own bottom
   padding gives every other variant here. */
.rf-linklist--side.rf-linklist--dropdown .linklist-dropdown-wrap {
  margin-bottom: 5.6rem;
}

@media (min-width: 980px) {
  .rf-linklist--side .linklist-wrap {
    display: flex;
    align-items: stretch;
    min-height: 43rem;
  }

  .rf-linklist--side .linklist-photo {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 5.6rem;
    width: 41.5%;
    margin: 0;
    z-index: 2;
  }

  .rf-linklist--side .linklist-photo img {
    height: 100%;
  }

  .rf-linklist--side .linklist-photo h2 {
    font-size: 3.5rem;
    padding: 3rem;
  }

  .rf-linklist--side .linklist-inner {
    margin: 1.6rem 0 0 4rem;
    flex: 1;
    padding: 4.4rem 5rem 4.4rem calc(41.5% + 1rem);
    border-radius: var(--rf-radius-panel);
    display: flex;
    /* Base .rf-linklist .linklist-inner sets flex-direction: column for the
       no-image variant's stacked h2-over-buttons layout. This override never
       reset it, so align-items: center centered the buttons horizontally
       instead of vertically and they fell back to the top (justify-content's
       default). Design's .help-panel has no flex-direction (defaults to
       row), which is why align-items: center actually centers it there. */
    flex-direction: row;
    align-items: center;
  }

  .rf-linklist--side .linklist-buttons {
    grid-template-columns: repeat(2, minmax(0, 27rem));
    justify-content: flex-end;
  }
}

.rf-linklist--band-full .linklist-buttons {
  grid-template-columns: 1fr;
  justify-content: center;
  max-width: 27rem;
  margin: 0 auto 0.4rem;
}

@media (min-width: 980px) {
  .rf-linklist--band-full .linklist-buttons {
    grid-template-columns: repeat(2, minmax(0, 27rem));
    max-width: none;
  }
}