/*
 * UWCU Redesign — GLOBAL CHROME ONLY (header, utility/notification bars,
 * mega menu, mobile menu, footer). Ported from /reference/ Phase 1 build.
 *
 * SAFETY CONTRACT — this file must not affect page content:
 *   - No rules on body/html or bare elements; everything is scoped under
 *     .notification-bar / .utility-nav / .site-header / .site-footer,
 *     or uses new class names that do not exist in site.css.
 *   - Legacy chrome styles in site.css are left in place (now unused).
 *
 * Tokens are namespaced --rf-*; root font-size is 10px (1rem = 10px).
 * Breakpoints: 480 / 768 / 980 / 1260 (site standard, mobile-first).
 */

:root {
  --rf-red: #d50032;
  --rf-red-dark: #a60027;
  --rf-red-hover: #a60027;
  --rf-pink-tint: #fbdce5;
  --rf-page-bg: #f1ebe9;
  --rf-card-beige: #f1ebea;
  --rf-text: #4a4947;
  --rf-heading-slate: #37464c;
  --rf-white: #ffffff;
  --rf-btn-hover-beige: #f1ebe9;

  --rf-font-body: "Gotham Narrow SSm A", "Gotham Narrow SSm B", Arial, Helvetica, sans-serif;
  --rf-font-slab: museo-slab, Georgia, "Times New Roman", serif;
  --rf-font-script: "Knewave", cursive;

  --rf-fw-book: 400;
  --rf-fw-medium: 500;
  --rf-fw-bold: 700;
  --rf-fw-black: 700;

  --rf-fs-hero: 6.5rem;
  --rf-lh-hero: 7.1rem;
  --rf-ls-hero: -0.195rem;
  --rf-fs-display: 6.5rem;
  --rf-fs-section: 3.5rem;
  --rf-lh-section: 4.5rem;
  --rf-fs-rate: 6rem;
  --rf-ls-rate: -0.18rem;
  --rf-fs-body: 1.5rem;
  --rf-lh-body: 2.5rem;
  --rf-fs-lead: 1.6rem;
  --rf-fs-cardtitle: 1.8rem;
  --rf-fs-util: 1.2rem;
  --rf-fs-nav: 1.8rem;
  --rf-fs-btn: 1.5rem;
  --rf-fs-btn-sm: 1.4rem;
  --rf-fs-legal: 1.3rem;

  --rf-container-max: 116rem;
  --rf-chrome-max: 126rem;   /* header/footer inner width incl. gutters */
  --rf-radius-panel: 3.2rem;
  --rf-radius-card: 2.4rem;
  --rf-radius-tile: 1.2rem;
  --rf-radius-pill: 6rem;

  --rf-bar-h: 3.6rem;
  --rf-btn-h: 4.1rem;
  --rf-cta-h: 4.8rem;
  --rf-linkpill-h: 6.2rem;

  --rf-dot-w: 11.1rem;
  --rf-dot-h: 0.5rem;

  --rf-petal-size: 4rem;

  --rf-filter-white: brightness(0) invert(1);
  --rf-filter-to-red: brightness(0) saturate(100%) invert(12%) sepia(89%)
    saturate(5601%) hue-rotate(336deg) brightness(93%) contrast(112%);

  /* Header band color. Design comps show page-beige; switch to --rf-white
     here if interior pages read better with a white band. */
  --rf-header-bg: var(--rf-page-bg);

  --rf-ease: 200ms ease;
}

/* Override legacy faint-gray token so .bg-faint-gray sections use the warm
   gray from the refresh palette instead of the old cool hsl(214,0%,96%). */
body.refresh {
  --bg-faint-gray: var(--rf-page-bg);
}

/* ==========================================================================
   SCOPED RESETS — normalize site.css element styles inside chrome only
   ========================================================================== */

.notification-bar a,
.utility-nav a,
.site-header a,
.site-footer a {
  text-decoration: none;
}

.utility-nav ul,
.site-header ul,
.site-footer ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-header h2,
.site-header h3,
.site-header h4,
.site-header p,
.site-footer h3,
.site-footer p {
  margin: 0;
}

.site-header img,
.site-footer img {
  max-width: 100%;
  height: auto;
  border: 0;
}

/* --- Shared: pill buttons (new refresh design; pill radius) --------------- */

.button-pill,
.button-pill-outline,
.button-pill-reversed {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.8em;
  min-height: var(--rf-btn-h);
  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;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  transition: color var(--rf-ease), border-color var(--rf-ease);
}

/* fill wipes in left-to-right on hover/focus, following the pill curve */
.button-pill,
.button-pill-outline,
.button-pill-reversed {
  position: relative;
  overflow: hidden;
  z-index: 0;
}

.button-pill::before,
.button-pill-outline::before,
.button-pill-reversed::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  transform: translateX(-101%);
  transition: transform 320ms ease;
  z-index: -1;
}

.button-pill:hover::before,
.button-pill:focus-visible::before,
.button-pill-outline:hover::before,
.button-pill-outline:focus-visible::before,
.button-pill-reversed:hover::before,
.button-pill-reversed:focus-visible::before {
  transform: translateX(0);
}

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

.button-pill::before {
  background: var(--wipe, var(--rf-red-hover));
}

/* .hover is prepended, not just repeated on .button-pill: site.css's legacy
   `.hover a:hover { color: var(--text-link-active-extra-dark) }` (an
   unrelated nav-link rule) has specificity (0,2,1) — two classes plus the
   bare `a` element. `.button-pill:hover` alone is only (0,2,0) and loses that
   comparison, so hovering any pill button silently repainted its text the
   legacy dark link-blue instead of white. `.hover` is always present on
   <body>, so prefixing it here reaches (0,3,0) and wins outright. */
.hover .button-pill:hover,
.button-pill:focus-visible {
  color: var(--rf-white);
}

.button-pill-outline {
  background: transparent;
  border-color: var(--rf-red);
  color: var(--rf-red);
}

.button-pill-outline::before {
  background: var(--wipe, var(--rf-red));
}

.hover .button-pill-outline:hover,
.button-pill-outline:focus-visible {
  color: var(--rf-white);
}

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

.button-pill-reversed::before {
  background: var(--wipe, var(--rf-btn-hover-beige));
}

/* --- Shared: outline CTA with petal arrow (used in mega menu promos) ------ */

.cta-pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.6rem;
  min-height: var(--rf-cta-h);
  padding: 0.6rem 0.6rem 0.6rem 2.4rem;
  border: 0.15rem solid var(--rf-red);
  border-radius: 2.5rem;
  color: var(--rf-red);
  font-size: var(--rf-fs-btn-sm);
  font-weight: var(--rf-fw-bold);
  white-space: normal;
  max-width: 100%;
  text-align: left;
  text-decoration: none;
  overflow: hidden;
  z-index: 0;
  transition: color var(--rf-ease);
}

/* fill wipes in left-to-right following the pill curve */
.cta-pill::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--wipe, var(--rf-red));
  transform: translateX(-101%);
  transition: transform 320ms ease;
  z-index: -1;
}

.cta-pill:hover::before,
.cta-pill:focus-visible::before {
  transform: translateX(0);
}

.hover .cta-pill:hover,
.cta-pill:focus-visible {
  color: var(--rf-white);
}

.cta-pill .cta-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 3.6rem;
  height: 3.6rem;
  border-radius: 0 50% 50% 50%;
  transition: background-color var(--rf-ease);
}

.cta-pill .cta-arrow img {
  width: 1.6rem;
  height: 1.6rem;
}

.cta-pill:hover .cta-arrow,
.cta-pill:focus-visible .cta-arrow {
  background: transparent;
}

.cta-pill:hover .cta-arrow img,
.cta-pill:focus-visible .cta-arrow img {
  filter: var(--rf-filter-white, brightness(0) invert(1));
}

/* ==========================================================================
   NOTIFICATION BAR
   ========================================================================== */

.notification-bar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  min-height: var(--rf-bar-h);
  padding: 0.6rem 1.6rem;
  background: var(--rf-red-dark);
  color: var(--rf-white);
  font-family: var(--rf-font-body);
  font-size: var(--rf-fs-util);
  font-weight: var(--rf-fw-medium);
  text-align: center;
}

.notification-bar.has-close {
  padding-right: 3.6rem;
}

.notification-bar img {
  width: 1.1rem;
  height: 1.1rem;
  filter: brightness(0) invert(1);
}

.notification-bar svg {
  width: 1.4rem;
  height: 1.4rem;
  flex: 0 0 auto;
}

.notification-bar a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.2em;
  font-weight: var(--rf-fw-bold);
}

/* site.css's ".hover a:hover" rule (color: var(--text-link-active-extra-dark);
   text-decoration: none;) matches this link with equal specificity — without this
   override the link would go dark on hover instead of staying white. Keep the
   design's white text; drop the underline instead as the hover affordance. */
.notification-bar a:hover,
.notification-bar a:focus-visible {
  color: inherit;
  text-decoration: none;
}

/* --- Alert types — copied verbatim from component-library/styles/refresh.css
   [UX strategist direction 2026-08-06]: info = dark red (everyday brand bar),
   warning = site.css --warn burnt orange, critical = dark blue (rare). ------- */

.notification-bar.alert-info {
  background: var(--rf-red-dark);
}

.notification-bar.alert-warning {
  background: var(--warn, #d14600);
}

.notification-bar.alert-critical {
  background: var(--brand-blue-darken-10, #24647a);
}

/* Dismiss button — not part of the static design reference (no dismissible
   variant exists there), but a live cookie-dismissal feature. Absolutely
   positioned so it never disturbs the design's centered icon+message layout. */

.notification-bar-close {
  position: absolute;
  top: 50%;
  right: 1.6rem;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.4rem;
  height: 1.4rem;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  cursor: pointer;
}

.notification-bar-close svg {
  width: 1.2rem;
  height: 1.2rem;
  flex: 0 0 auto;
}

/* ==========================================================================
   UTILITY BAR (desktop only)
   ========================================================================== */

.utility-nav {
  display: none;
  background: var(--rf-red);
  color: var(--rf-white);
  font-family: var(--rf-font-body);
}

@media (min-width: 980px) {
  .utility-nav {
    display: block;
  }
}

.utility-nav .utility-nav-inner {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4rem;
  min-height: var(--rf-bar-h);
  max-width: var(--rf-chrome-max);
  margin: 0 auto;
  padding: 0 5rem;
}

.utility-nav a {
  color: var(--rf-white);
  font-size: var(--rf-fs-util);
  font-weight: var(--rf-fw-medium);
}

.utility-nav a:hover,
.utility-nav a:focus-visible {
  color: var(--rf-white);
  text-decoration: underline;
  text-underline-offset: 0.3em;
}

.utility-nav .utility-search {
  display: inline-flex;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

.utility-nav .utility-search img {
  width: 1.4rem;
  height: 1.4rem;
  filter: brightness(0) invert(1);
}

/* ==========================================================================
   SITE HEADER
   ========================================================================== */

/* site.css's legacy .page-container margin (6rem, 13.8rem at >=980px) compensates
   for the OLD site header, which was position: fixed and needed page content pushed
   down out from under it. .site-header below is position: relative — it sits in
   normal document flow and pushes content down on its own — so that legacy offset
   is now pure dead space stacked on top, e.g. the empty band above the hero on
   /home-equity/alp/use-your-heloc (and, same reason, above the hero on the
   homepage itself). Reset it sitewide for every refresh-chrome page. */
body.refresh .page-container {
  margin-top: 0;
}

.site-header {
  position: relative;
  background: var(--rf-header-bg);
  font-family: var(--rf-font-body);
}

.site-header .header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  max-width: var(--rf-chrome-max);
  margin: 0 auto;
  padding: 1.6rem 2rem;
}

@media (min-width: 980px) {
  .site-header .header-inner {
    padding: 2.2rem 5rem;
  }
}

.site-header .header-logo img {
  display: block;
  width: 10.4rem;
  height: auto;
}

@media (min-width: 980px) {
  .site-header .header-logo img {
    width: 16.9rem;
  }
}

.primary-nav {
  display: none;
}

@media (min-width: 980px) {
  .primary-nav {
    display: flex;
    align-items: center;
    gap: 5rem;
  }
}

.primary-nav > a {
  color: var(--rf-text);
  font-size: var(--rf-fs-nav);
  font-weight: var(--rf-fw-bold);
  padding: 0.8rem 0;
  transition: color var(--rf-ease);
}

.primary-nav > a:hover,
.primary-nav > a:focus-visible,
.primary-nav > a.active,
.primary-nav > a[aria-expanded="true"] {
  color: var(--rf-red);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 1.2rem;
}

.header-actions .button-pill,
.header-actions .button-pill-outline {
  min-width: 10.9rem;
  min-height: 3.7rem;
  font-size: var(--rf-fs-btn);
}

.header-actions .join-btn {
  display: none;
}

@media (min-width: 980px) {
  .header-actions .join-btn {
    display: inline-flex;
  }
}

.menu-toggle {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.5rem;
  width: 3.4rem;
  height: 3rem;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

.menu-toggle span {
  display: block;
  height: 0.2rem;
  border-radius: 0.2rem;
  background: var(--rf-text);
}

@media (min-width: 980px) {
  .menu-toggle {
    display: none;
  }
}

/* ==========================================================================
   MEGA MENU (desktop)
   ========================================================================== */

/* Floating container: constrained to the content width, centered, rounded */
.mega-menu {
  display: none;
  position: absolute;
  top: calc(100% + 0.8rem);
  left: 0.8rem;
  right: 0.8rem;
  max-width: var(--rf-chrome-max);
  margin: 0 auto;
  z-index: 200;
  background: var(--rf-white);
  border-radius: 1.6rem;
  box-shadow: 0 2.4rem 4rem rgba(0, 0, 0, 0.18);
}

.mega-menu.open {
  display: block;
}

/* Simple submenus (no heading/description/CTA/featured items) are just link columns —
   collapse the panel and its grid to fit them instead of stretching full chrome width. */
.mega-menu.is-compact {
  right: auto;
  width: fit-content;
}

.mega-menu.is-compact .mega-inner {
  max-width: none;
}

.mega-menu.is-compact .mega-top {
  display: block;
}

.mega-menu.is-compact .mega-cols {
  grid-template-columns: repeat(auto-fit, minmax(16rem, max-content));
}

.mega-menu .mega-inner {
  max-width: var(--rf-chrome-max);
  margin: 0 auto;
  padding: 4.8rem 5rem 4rem;
}

/* Anchored to the PANEL corner (containing block = .mega-menu), thin near-black glyph */
.mega-menu .mega-close {
  position: absolute;
  top: 1.6rem;
  right: 1.8rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.8rem;
  height: 2.8rem;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  color: #1a1a1a;
}

.mega-menu .mega-close svg {
  width: 1.4rem;
  height: 1.4rem;
}

.mega-menu .mega-top {
  display: grid;
  grid-template-columns: minmax(28rem, 38rem) 1fr;
  gap: 6rem;
}

.mega-menu .mega-intro h2 {
  font-family: var(--rf-font-slab);
  font-weight: var(--rf-fw-medium);
  font-size: 2.8rem;
  color: #1a1a1a;
  margin-bottom: 1.6rem;
}

.mega-menu .mega-intro p {
  font-size: 1.5rem;
  font-weight: var(--rf-fw-book);
  line-height: 2.4rem;
  color: var(--rf-text);
  margin-bottom: 2.4rem;
}

.mega-menu .mega-intro .button-pill {
  display: flex;
  width: fit-content;
}

.mega-menu .mega-cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

.mega-menu .mega-col h3 {
  color: var(--rf-red);
  font-size: 1.5rem;
  font-weight: var(--rf-fw-bold);
  padding: 0.8rem 1.2rem;
  border-bottom: 0.1rem solid var(--rf-card-beige);
  margin-bottom: 0.8rem;
}

/* Group heading as optional link — inherits h3 styling, no link decoration */
.mega-menu .mega-col-head {
  text-decoration: none;
  color: inherit;
  display: block;
}

.mega-menu .mega-col a:not(.mega-col-head) {
  display: block;
  padding: 1rem 1.2rem;
  color: var(--rf-text);
  font-size: 1.5rem;
  font-weight: var(--rf-fw-book);
  border-radius: 0.4rem;
  transition: background-color var(--rf-ease);
}

.mega-menu .mega-col a:not(.mega-col-head):hover,
.mega-menu .mega-col a:not(.mega-col-head):focus-visible {
  background: var(--rf-pink-tint);
}

.mega-menu .mega-col-head:hover,
.mega-menu .mega-col-head:focus-visible {
  background: var(--rf-pink-tint);
}

.mega-menu .mega-promos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.4rem;
  margin-top: 4rem;
}

.mega-menu .mega-promo {
  display: flex;
  align-items: center;
  gap: 2rem;
  background: #f5f4f2;
  border-radius: 1.2rem;
  padding: 2rem 2.4rem;
}

.mega-menu .mega-promo img {
  width: 15.6rem;
  height: 9.4rem;
  object-fit: cover;
  border-radius: 0.8rem;
  flex: 0 0 auto;
}

.mega-menu .mega-promo h4 {
  font-size: 1.7rem;
  font-weight: var(--rf-fw-bold);
  color: #1a1a1a;
  margin: 0 0 0.6rem;
}

.mega-menu .mega-promo p {
  font-size: 1.4rem;
  font-weight: var(--rf-fw-book);
  line-height: 2rem;
  color: var(--rf-text);
}

.mega-menu .mega-promo .cta-pill {
  flex: 0 0 auto;
  padding: 0 2.4rem;
}

/* ==========================================================================
   SITE FOOTER — copied from reference/styles/refresh.css with live-site
   additions (routing pill, compliance badges, disclaimer)
   ========================================================================== */

.site-footer {
  background: var(--rf-white);
  position: relative;
  overflow: hidden;
  padding: 4.8rem 0 0;
}

.site-footer .footer-inner {
  max-width: var(--rf-chrome-max);
  margin: 0 auto;
  padding: 0 2rem;
}

@media (min-width: 980px) {
  .site-footer .footer-inner {
    padding: 0 5rem;
  }
}

.site-footer .footer-grid {
  display: grid;
  gap: 3.6rem;
}

@media (min-width: 980px) {
  .site-footer .footer-grid {
    grid-template-columns: 24rem repeat(3, 1fr) auto;
    gap: 2.4rem;
  }
}

.site-footer .footer-brand img {
  width: 14.8rem;
}

.site-footer .footer-brand .footer-buttons {
  display: flex;
  gap: 1.2rem;
  margin-top: 4rem;
}

.site-footer h3 {
  font-size: 1.8rem;
  font-weight: var(--rf-fw-bold);
  color: var(--rf-text);
  margin-bottom: 2rem;
}

.site-footer .footer-col a {
  display: block;
  padding: 0.7rem 0;
  color: var(--rf-text);
  font-size: 1.5rem;
  font-weight: var(--rf-fw-book);
}

.site-footer .footer-col a:hover,
.site-footer .footer-col a:focus-visible {
  color: var(--rf-red);
  text-decoration: underline;
}

.site-footer .footer-aside {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2.4rem;
}

@media (min-width: 980px) {
  .site-footer .footer-aside {
    align-items: flex-end;
  }
}

/* Composite badge image (reference pattern) */
.site-footer .footer-aside .badges img {
  width: 24.9rem;
  margin-top: -3.4rem;
}

.site-footer .footer-aside .app-badges {
  display: flex;
  gap: 0.8rem;
}

.site-footer .footer-aside .app-badges img {
  width: 12rem;
}

@media (min-width: 980px) {
  .site-footer .footer-aside .app-badges {
    position: absolute;
    right: max(5rem, calc((100% - 116rem) / 2));
    bottom: 8.5rem;
    z-index: 2;
  }
}

/* routing number pill — live text, not composite image */
.site-footer .routing-pill {
  display: inline-flex;
  align-items: baseline;
  gap: 0.8rem;
  border: 0.1rem solid #d9d4d2;
  border-radius: 2rem;
  padding: 0.8rem 1.8rem;
  font-size: 1.3rem;
  white-space: nowrap;
}

.site-footer .routing-pill strong {
  color: var(--rf-red);
  font-weight: var(--rf-fw-bold);
  font-size: 1.4rem;
}

.site-footer .compliance-badges img {
  max-width: 22.4rem;
}

/* Disclaimer (rendered above footer in Razor, styled here for legacy compat) */
.site-disclaimers {
  padding: 2rem 0;
}

.footer-disclaimer {
  font-size: 1.2rem;
  line-height: 1.8rem;
  color: #8a8582;
}

.footer-disclaimer a {
  color: inherit;
  text-decoration: underline;
}

.site-footer .footer-pattern {
  margin-top: 3.2rem;
  max-height: 16rem;
  overflow: hidden;
  pointer-events: none;
}

.site-footer .footer-pattern img {
  display: block;
  width: 96rem;
  max-width: none;
  height: auto;
}

.site-footer .footer-legal {
  position: relative;
  z-index: 2;
  background: var(--rf-page-bg);
}

.site-footer .footer-legal-inner {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  justify-content: space-between;
  max-width: var(--rf-chrome-max);
  margin: 0 auto;
  padding: 1.6rem 2rem 2rem;
  font-size: var(--rf-fs-legal);
  font-weight: var(--rf-fw-book);
}

@media (min-width: 768px) {
  .site-footer .footer-legal-inner {
    flex-direction: row;
    align-items: center;
    padding: 1.6rem 5rem 2rem;
  }
}

.site-footer .footer-legal a {
  color: var(--rf-text);
  margin-left: 0;
}

@media (min-width: 768px) {
  .site-footer .footer-legal a {
    margin-left: 2.4rem;
  }
}

.site-footer .footer-legal a:hover {
  text-decoration: underline;
}

/* ====================================================================
   Mobile drill-down menu
   ==================================================================== */

.mobile-menu {
  display: none;
  background: var(--rf-white);
  border-top: 0.1rem solid var(--rf-card-beige, #eceae8);
}

.mobile-menu.open {
  display: block;
  min-height: calc(100vh - 12rem);
}

@media (min-width: 980px) {
  .mobile-menu,
  .mobile-menu.open {
    display: none;
  }
}

/* Hamburger → X morph */
.menu-toggle span {
  transition: transform 0.3s ease, opacity 0.3s ease, background-color 0.3s ease;
}

.menu-toggle[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(0.7rem) rotate(45deg);
  background: var(--rf-red);
}

.menu-toggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}

.menu-toggle[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-0.7rem) rotate(-45deg);
  background: var(--rf-red);
}

/* Drill animations */
.mobile-level.drill-in {
  animation: mobile-slide-right 280ms ease both;
}

.mobile-level.drill-back {
  animation: mobile-slide-left 280ms ease both;
}

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

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

/* Nav rows */
.mobile-nav-row {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 1.6rem;
  padding: 1.8rem 2rem;
  background: none;
  border: 0;
  border-bottom: 0.1rem solid #eceae8;
  font-family: var(--rf-font-body);
  font-size: 1.6rem;
  font-weight: var(--rf-fw-medium, 500);
  color: var(--rf-text);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.mobile-nav-row::after {
  content: "";
  flex: 0 0 auto;
  width: 0.9rem;
  height: 0.9rem;
  border-right: 0.2rem solid var(--rf-text);
  border-bottom: 0.2rem solid var(--rf-text);
  transform: rotate(-45deg);
}

a.mobile-nav-row::after {
  border-color: var(--rf-red);
}

/* Back bar */
.mobile-back {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 1.2rem;
  padding: 1.8rem 2rem;
  background: var(--rf-red);
  border: 0;
  color: var(--rf-white);
  font-family: var(--rf-font-body);
  font-size: 1.6rem;
  font-weight: var(--rf-fw-bold, 700);
  text-align: left;
  cursor: pointer;
}

.mobile-back::before {
  content: "";
  flex: 0 0 auto;
  width: 0.9rem;
  height: 0.9rem;
  border-left: 0.2rem solid var(--rf-white);
  border-bottom: 0.2rem solid var(--rf-white);
  transform: rotate(45deg);
}

/* Utility block (dark) */
.mobile-utility-block {
  margin: 2.4rem 2rem;
  background: #262626;
  border-radius: 1rem;
  padding: 2rem;
}

.mobile-utility-block nav {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.mobile-utility-block nav a {
  display: block;
  padding: 1rem 0;
  color: var(--rf-white);
  font-size: 1.4rem;
  font-weight: var(--rf-fw-medium, 500);
  text-decoration: none;
  border-bottom: 0.1rem solid #555350;
}

.mobile-utility-block nav a:last-child {
  border-bottom: 0;
}

/* Search */
.mobile-search {
  position: relative;
  margin-top: 1.6rem;
}

.mobile-search input {
  width: 100%;
  background: transparent;
  border: 0.1rem solid #555350;
  border-radius: 2.4rem;
  color: var(--rf-white);
  padding: 1.2rem 5rem 1.2rem 1.6rem;
  font-family: var(--rf-font-body);
  font-size: 1.4rem;
}

.mobile-search input::placeholder {
  color: #999;
}

.mobile-search button {
  position: absolute;
  right: 0.6rem;
  top: 50%;
  transform: translateY(-50%);
  width: 3.2rem;
  height: 3.2rem;
  border-radius: 50%;
  background: var(--rf-red);
  border: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.mobile-search button img {
  width: 1.4rem;
  height: 1.4rem;
  filter: brightness(0) invert(1);
}

/* Submenu CTA block (heading, description, button) */
.mobile-submenu-cta {
  padding: 2.4rem 2rem 0;
}

.mobile-submenu-cta h3 {
  font-family: var(--rf-font-slab);
  font-size: 2rem;
  font-weight: var(--rf-fw-bold);
  color: var(--rf-heading-slate);
  margin: 0 0 0.8rem;
}

.mobile-submenu-cta p {
  font-size: 1.4rem;
  line-height: 1.6;
  color: var(--rf-text);
  margin: 0 0 1.6rem;
}

.mobile-submenu-cta .button-pill {
  display: flex;
  width: fit-content;
  margin-top: 1.2rem;
}

/* Feature tiles */
.mobile-features {
  display: grid;
  gap: 1.2rem;
  padding: 2.4rem 2rem;
}

.feature-tile {
  display: flex;
  align-items: center;
  gap: 1.4rem;
  background: #f5f4f2;
  border-radius: 1.2rem;
  padding: 1.4rem 1.6rem;
  text-decoration: none;
  color: var(--rf-text);
}

.feature-tile img {
  width: 6rem;
  height: 6rem;
  border-radius: 0 50% 50% 50%;
  object-fit: cover;
  flex: 0 0 auto;
}

.feature-tile .feature-arrow {
  margin-left: auto;
  flex: 0 0 auto;
  width: 1.4rem;
  height: 1.4rem;
  align-self: center;
  border-radius: 0;
}

.feature-tile h4 {
  font-family: var(--rf-font-slab);
  font-size: 1.4rem;
  font-weight: 700;
  margin: 0 0 0.2rem;
}

.feature-tile p {
  font-size: 1.2rem;
  margin: 0;
  color: #6b6966;
}

/* --- FPO (for placement only) image placeholder -----------------------------
   Ported from component-library/styles/refresh.css. A shared utility: the
   design uses it wherever a component variant has no artwork yet (hero RED,
   rewards media). Rendered by the widget views when no image is set. */

.fpo-image {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  width: 100%;
  min-height: 24rem;
  background: #ababab;
  border-radius: 1.2rem;
  color: #3f3e3d;
  font-size: 1.4rem;
  font-weight: var(--rf-fw-medium);
  text-align: center;
}

.fpo-image::before {
  content: "FPO";
}

.fpo-image::after {
  content: "Image goes here";
  font-weight: var(--rf-fw-book);
}

/* Extends the existing .container primitive (1100px from site.css) for the
   refresh components (~1160px content). Ported from
   component-library/styles/refresh.css. Without this the `wide` modifier was
   inert in production: markup using <div class="container wide"> (the RateCards
   widget) stayed capped at site.css's 1100px, so its tiles rendered ~160px
   narrower than the design, wrapping headings and inflating tile height. */
.container.wide {
  max-width: calc(var(--rf-container-max) + 4rem);
}

@media (min-width: 768px) {
  .container.wide {
    max-width: calc(var(--rf-container-max) + 10rem);
  }
}