/* ============================================================================
   RentReporters 2026 reskin — FOUNDATION LAYER
   Loaded after the theme's stylesheet (enqueued last, priority 9999) so these
   rules win the cascade at equal specificity. The theme's colors resolve
   through var(--rentReporters-*), so remapping those re-skins the palette
   site-wide (handoff §2.1). Phase 2 adds typography, shape/shadow, buttons,
   and header-scrolled polish. Per-block/page work is Phase 4.
   ========================================================================== */

/* Web fonts (handoff §2.2). @import kept at top so it's valid. */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Inter:wght@400;500;600;700&display=swap');

/* ---- Phase 1: palette (override the theme's :root custom properties) ---- */
:root {
  /* primary: soft cornflower blue (was #0977e9) */
  --rentReporters-blue:        #3F6BB0;
  --rentReporters-blue-40:     rgba(63, 107, 176, 0.4);
  --rentReporters-blue-10:     #EAF1FA;
  --rentReporters-milky:       rgba(63, 107, 176, 0.1);
  --rentReporters-light-blue:  #2E5394;   /* hover / pressed (was #075fba) */
  --rentReporters-dark-blue:   #2E5394;   /* deep accent (was #213160) */

  /* accent: soft sage. Light = shapes only; deep = readable text */
  --rentReporters-green:       #6FA98C;   /* sage, graphical (was #9ac355) */
  --rentReporters-dark-green:  #2F7D5E;   /* green-ink, readable (was #82b378) */

  /* decorative warmth only, never text */
  --rentReporters-orange:      #D99A4E;   /* amber (was #ed7d2b) */
  --rentReporters-yellow:      #D99A4E;   /* amber (was #ffae39) */

  /* neutrals: warm charcoal text on warm off-white */
  --rentReporters-shark:       #333F4D;   /* primary text (was #303031) */
  --rentReporters-gray:        #566370;   /* secondary text (was #818181) */
  --rentReporters-off-white:   #FBFAF7;   /* warm surface (was #fafafa) */

  /* new design tokens (namespaced) */
  --rr-surface-2:  #F4F1EA;
  --rr-card:       #FFFFFF;
  --rr-line:       #E9E4DA;
  --rr-about-green:#F1F5EA;   /* About + Careers hero wash */
  --rr-radius:     20px;
  --rr-radius-sm:  12px;
  --rr-radius-pill:999px;
  --rr-font-display:'Plus Jakarta Sans', system-ui, -apple-system, Segoe UI, sans-serif;
  --rr-font-body:'Inter', system-ui, -apple-system, Segoe UI, sans-serif;
  /* layered, low-opacity, blue-tinted shadows (handoff §2.3) */
  --rr-shadow-sm:0 1px 2px rgba(46,83,148,.05), 0 2px 8px rgba(46,83,148,.06);
  --rr-shadow:0 8px 24px rgba(46,83,148,.08), 0 2px 6px rgba(14,27,42,.05);
  --rr-shadow-lg:0 24px 60px rgba(46,83,148,.12), 0 6px 18px rgba(14,27,42,.06);
}

/* ---- Mockup design-token aliases ----
   The ported mockup CSS (assistant widget now; per-page CSS in Phase 4) uses
   clean token names (--blue, --ink, --surface, …). Alias them onto the theme's
   variables so that CSS resolves without edits. These names aren't used by the
   original theme (it namespaces everything as --rentReporters-*). */
:root {
  --blue:         var(--rentReporters-blue);
  --blue-deep:    var(--rentReporters-light-blue);
  --blue-tint:    var(--rentReporters-blue-10);
  --green:        var(--rentReporters-green);
  --green-ink:    var(--rentReporters-dark-green);
  --green-soft:   #E7F1EC;
  --amber:        var(--rentReporters-orange);
  --ink:          var(--rentReporters-shark);
  --ink-soft:     var(--rentReporters-gray);
  --surface:      var(--rentReporters-off-white);
  --surface-2:    var(--rr-surface-2);
  --card:         var(--rr-card);
  --line:         var(--rr-line);
  --radius:       var(--rr-radius);
  --radius-sm:    var(--rr-radius-sm);
  --shadow-sm:    var(--rr-shadow-sm);
  --shadow:       var(--rr-shadow);
  --shadow-lg:    var(--rr-shadow-lg);
  --font-display: var(--rr-font-display);
  --font-body:    var(--rr-font-body);
}

/* ---- Phase 2: typography (handoff §2.2) ----
   Body → Inter; display/headings → Plus Jakarta Sans. The theme sets Rubik on
   these elements at equal specificity; this file loads later, so it wins. */
body {
  font-family: var(--rr-font-body);
  background-color: var(--surface);
}
h1, h2, h3, h4, h5, h6,
.headline-1, .headline-2, .headline-3 {
  /* !important beats the blocks' hard-coded Rubik, which style-loader injects after this file */
  font-family: var(--rr-font-display);
  letter-spacing: -0.02em;
  color: var(--ink);
}

/* ---- Phase 2: buttons (handoff §2.3) — pill, filled cornflower / ghost ---- */
.btn {
  border-radius: var(--rr-radius-pill);
  font-family: var(--rr-font-body);
  font-weight: 600;
  letter-spacing: 0;
  font-size: 16px;
  padding: 14px 24px;
  min-width: auto;
}
/* primary hover: subtle lift (theme already darkens the bg) */
.btn:not(.has-border):hover { transform: translateY(-1px); }
/* ghost / outline secondary (theme uses .has-border): light border + dark text, turns cornflower on hover (matches mockup) */
.btn.has-border, body .btn.has-border {
  background-color: transparent;  
  border-color: var(--rr-line);
  color: var(--rentReporters-shark);
  border-radius: var(--rr-radius-pill);
  padding: 14px 24px;
  min-width: auto;  
}
.btn.has-border:hover, body .btn.has-border:hover {
  background-color: transparent;    
  border-color: var(--rentReporters-blue);
  color: var(--rentReporters-blue);
}

@media screen and (max-width: 599.98px) {
  .btn {
    width: 100%;
  }

  .btn.has-border, .btn.btn-ghost {
    color: var(--rentReporters-blue);
  }
}

/* ---- Phase 2: header sticky/scrolled polish (handoff §2.4) ----
   The theme toggles header.sticky on scroll; give it the frosted off-white
   look with a hairline + subtle shadow. Purely additive. */
header.sticky {
  background: rgba(251, 250, 247, 0.94);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--rr-line);
  box-shadow: 0 2px 12px rgba(14, 27, 42, 0.06);
  transition: background-color .5s ease, box-shadow .4s ease, border-color .4s ease;
}
@media (prefers-reduced-motion: reduce) {
  header.sticky { transition: none; }
}

/* ---- Phase 3: AI assistant widget (ported from the 2026 mockup; uses the aliases above) ---- */
/* ===== layered assistant widget ===== */
.rrb-launcher{position:fixed;right:20px;bottom:20px;width:60px;height:60px;border-radius:50%;background:var(--blue);color:#fff;border:none;cursor:pointer;box-shadow:var(--shadow-lg);display:flex;align-items:center;justify-content:center;z-index:9998;transition:transform .15s ease,background .15s ease}
.rrb-launcher:hover{background:var(--blue-deep);transform:translateY(-2px)}
.rrb-launcher svg{width:28px;height:28px}
.rrb-panel{position:fixed;right:20px;bottom:92px;width:380px;max-width:calc(100vw - 32px);height:560px;max-height:calc(100vh - 120px);background:var(--surface);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow-lg);display:none;flex-direction:column;overflow:hidden;z-index:9999;font-family:var(--font-body)}
.rrb-panel.open{display:flex;animation:rrbUp .18s ease}
@keyframes rrbUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.rrb-head{background:linear-gradient(135deg,var(--blue),var(--blue-deep));color:#fff;padding:13px 14px;display:flex;align-items:center;gap:10px}
.rrb-logo{width:36px;height:36px;border-radius:10px;background:rgba(255,255,255,.16);display:none;align-items:center;justify-content:center}
.rrb-titles{flex:1}
.rrb-title{font-family:var(--font-display);font-weight:700;font-size:14.5px}
.rrb-status{font-size:11.5px;opacity:.85;display:flex;align-items:center;gap:6px;margin-top:1px}
.rrb-online{width:7px;height:7px;border-radius:50%;background:#7CF0B6;display:inline-block}
.rrb-x{background:none;border:none;color:#fff;font-size:22px;line-height:1;cursor:pointer;opacity:.85}
.rrb-body{flex:1;overflow-y:auto;padding:15px}
.rrb-row{display:flex;margin-bottom:9px}
.rrb-row.user{justify-content:flex-end}
.rrb-bubble{max-width:82%;padding:9px 13px;border-radius:15px;font-size:14px;line-height:1.5;white-space:pre-wrap}
.rrb-bubble.bot{background:var(--card);color:var(--ink);border:1px solid var(--line);border-bottom-left-radius:4px}
.rrb-bubble.user{background:var(--blue);color:#fff;border-bottom-right-radius:4px}
.rrb-opts{display:flex;flex-direction:column;gap:9px;margin-top:4px}
.rrb-opt{text-align:left;padding:12px 14px;border-radius:12px;border:1px solid var(--line);background:var(--card);cursor:pointer;transition:.15s}
.rrb-opt:hover{border-color:var(--blue);background:var(--blue-tint)}
.rrb-opt b{display:block;font-family:var(--font-display);font-size:14px;color:var(--ink)}
.rrb-opt span{display:block;font-size:12.5px;color:var(--ink-soft);margin-top:2px}
.rrb-handoff{border-radius:12px;padding:14px;margin-top:2px}
.rrb-connect{width:100%;background:var(--green);color:#fff;border:none;border-radius:10px;padding:12px;font-family:var(--font-display);font-weight:700;font-size:14px;cursor:pointer}
.rrb-ok{margin-top:10px;font-size:13px;color:var(--ink)}
.rrb-ok b{color:var(--green)}
.rrb-ok i{color:var(--ink-soft);font-size:12px}
.rrb-phone{margin-top:10px;font-size:12.5px;color:var(--ink-soft)}
.rrb-back{margin-top:12px;background:none;border:none;color:var(--blue);font-weight:600;font-size:13px;cursor:pointer;padding:0}
.rrb-sugs{display:flex;flex-wrap:wrap;gap:7px;margin-top:2px}
.rrb-sug{padding:7px 12px;border-radius:18px;border:1px solid var(--line);background:var(--card);color:var(--blue);font-size:12.5px;font-weight:600;cursor:pointer}
.rrb-sug:hover{background:var(--blue-tint);border-color:var(--blue)}
.rrb-typing{display:flex;gap:4px;padding:8px 13px}
.rrb-typing span{width:7px;height:7px;border-radius:50%;background:var(--ink-soft);animation:rrbb 1.2s infinite ease-in-out}
.rrb-typing span:nth-child(2){animation-delay:.2s}.rrb-typing span:nth-child(3){animation-delay:.4s}
@keyframes rrbb{0%,80%,100%{opacity:.25;transform:translateY(0)}40%{opacity:1;transform:translateY(-3px)}}
.rrb-foot{border-top:1px solid var(--line);background:var(--card);padding:9px;display:flex;gap:8px}
.rrb-in{flex:1;border:1px solid var(--line);border-radius:20px;padding:9px 15px;font-size:14px;font-family:inherit}
.rrb-in:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-tint)}
.rrb-send{width:40px;height:40px;flex:none;border-radius:50%;border:none;background:var(--blue);color:#fff;cursor:pointer;font-size:15px}
.rrb-disc{background:var(--surface);padding:6px 12px;font-size:10px;color:var(--ink-soft);text-align:center;border-top:1px solid var(--line)}
@media(max-width:480px){.rrb-panel{right:8px;left:8px;bottom:84px;width:auto;max-width:none;height:calc(100vh - 100px)}.rrb-launcher{right:14px;bottom:14px}}

/* rendered markdown inside assistant bubbles */
.rrb-bubble strong{font-weight:700}
.rrb-bubble em{font-style:italic}
.rrb-bubble a{color:var(--blue);text-decoration:underline;word-break:break-word}
.rrb-bubble.user a{color:#fff}
.rrb-bubble p{margin:0 0 8px}
.rrb-bubble p:last-child{margin-bottom:0}
.rrb-bubble .rrb-h{font-family:var(--font-display);font-weight:700;font-size:13.5px;margin:10px 0 4px;color:var(--ink)}
.rrb-bubble>.rrb-h:first-child,.rrb-bubble>p:first-child{margin-top:0}
.rrb-bubble .rrb-hr{border:none;border-top:1px solid var(--line);margin:10px 0}
.rrb-bubble ul,.rrb-bubble ol{margin:6px 0;padding-left:20px}
.rrb-bubble li{margin:3px 0;line-height:1.45}
.rrb-bubble>*:first-child{margin-top:0}
.rrb-bubble>*:last-child{margin-bottom:0}

/* real RentReporters logo */
.brand{gap:0}
.brand-logo{height:34px;width:auto;display:block}
footer .brand-logo{height:30px}
@media(max-width:600px){.brand-logo{height:30px}}
.rrb-logo-img{width:26px;height:auto;display:block}

/* ============================================================================
   Phase 4 — page/block reskins (from the rr-*-final mockups)
   ========================================================================== */

/* ---- Home hero (page_header_block.home-hero) ---- */
.rentReporters-block.page_header_block.home-hero {
  background-color: var(--surface);
  background-image:
    radial-gradient(820px 460px at 88% -8%, rgba(63,107,176,.10), transparent 60%),
    radial-gradient(640px 420px at 8% 110%, rgba(111,169,140,.12), transparent 60%);
}
.rentReporters-block.page_header_block.home-hero .headline-1 {
  font-family: var(--rr-font-display);
  font-size: clamp(2.4rem, 4.6vw, 4rem);
  line-height: 1.06;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.rentReporters-block.page_header_block.home-hero .description.paragraph {
  font-size: 1.18rem;
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 42ch;
}
.rentReporters-block.page_header_block.home-hero .rt-hashtag {
  color: var(--green-ink);
  font-weight: 600;
}

/* ---- Pricing confetti CTA: collapse the oversized section padding ---- */
.rentReporters-block.pricing_confetti_cta_block {
  padding-top: clamp(56px, 8vw, 88px);
  padding-bottom: clamp(56px, 8vw, 88px);
}

/* small hard-coded #0977E9 accents inside the guarantee block */
.rentReporters-block.money_back_guarantee_block .btn {
  background-color: var(--rentReporters-blue) !important;
}

.page-transition .container {
  max-width: 1180px;
  padding: 0 20px 0 20px;
}

/* ---- Breadcrumbs (below header on every non-front page) ---- */
.page-transition .breadcrumbs {
  background: #FBFAF7;
}
.page-transition > .breadcrumbs > .container {
  font-family: var(--rr-font-body);
  font-size: 1.3rem;
  line-height: 1.4;
  color: var(--rentReporters-gray);
  padding: 15px 0 15px 20px;
  max-width: 1180px;
}
.page-transition > .breadcrumbs > .container a {
  color: var(--rentReporters-blue);
  text-decoration: none;
}
.page-transition > .breadcrumbs > .container a:hover {
  text-decoration: underline;
}
.page-transition > .breadcrumbs > .container .sep {
  margin: 0 0.6rem;
  opacity: 0.6;
}
.page-transition > .breadcrumbs > .container .current {
  color: var(--rentReporters-gray);
}

body .legal-page-wrapper .doc, body .legal-page-wrapper .doc p , body .legal-page-wrapper .doc li {
  color: var(--ink);
  font-size: 17px;
}

body .legal-page-wrapper .doc li {
  padding: 0 0 15px 15px;
  margin: 0;
}

body .legal-page-wrapper .doc li:before {
  background: none;
  content: '‣';
  transition: none;
  transform: none;
  top: 0;
  font-size: 24px;
  line-height: 28px;
}

/* RR-030 / RR-049: in-page "Common Questions" FAQ gets a subtle band background so
   it reads as its own section, distinct from the (tan) sections around it.
   The full FAQ page uses the .faq-cat variant and is intentionally excluded.
   Placed in the override layer because the block's lazy-loaded CSS chunk is unreliable. */
.faqs_block:not(.faq-cat) {
  background-color: var(--rentReporters-off-white, #FBFAF7);
}

/* RR-036: more breathing room in the pricing cards — space plan-name -> price ->
   subtext. Override layer because the block's own CSS chunk is unreliable to update. */
.pricing_cards_block .pricing-card .title { margin-bottom: 14px !important; }
.pricing_cards_block .pricing-card .price { margin-bottom: 14px !important; }

/* RR-045: hero goal bubbles jump to the 6-tile "Reach your goals" grid; offset the
   landing so it clears the sticky header, and scroll smoothly. */
html { scroll-behavior: smooth; }
#goals-tiles { scroll-margin-top: 110px; }

/* RR-042: Goals hero headline was line-height:normal (~1.2), looser than the rest of
   the reskin heroes; tighten to match the design system. */
.achieve_your_goals_block .left-content .headline-1 { line-height: 1.1; }

/* RR-052: Success Stories stat-band figures were 800 (too heavy); ease to 700 to match demo. */
.starting_points_block.stat-band .tcard h3 { font-weight: 700 !important; }

/* RR-055: Success Stories featured/list — drop the green icons and give the block a
   subtle surface background so it reads as its own section. */
.success_stories_cards_block.stories-featured { background-color: var(--rentReporters-off-white, #FBFAF7); }

/* RR-019: Home "What renters say" (live Google reviews) sat between the near-white
   Unscorables and Home Pricing blocks on the near-white body, so it blended in with
   no separation. Give it the tan surface-2 band the updated demo specifies
   (rr-demo.html: the reviews section carries background:var(--surface-2)) so it reads
   as its own section. Override layer because the block's lazy-loaded CSS chunk is unreliable. */
.google_reviews_block { background-color: var(--rr-surface-2, #F4F1EA); }

/* RR-063: FAQ "Still have a question?" is a plain contact prompt (no confetti) — hide
   the click-confetti canvas and the decorative dots on the opted-in instance. */
.pricing_confetti_cta_block.no-confetti canvas,
.pricing_confetti_cta_block.no-confetti .confetti,
.pricing_confetti_cta_block.no-confetti .content::before,
.pricing_confetti_cta_block.no-confetti .content::after { display: none !important; }

/* RR-001: desktop nav links used a responsive size (1.4rem) that dips below the
   Enroll Now button (fixed 16px) on narrower desktops, so the button read as larger.
   Pin the nav links to 16px so they match the button at every desktop width. */
@media (min-width: 992px) {
  .primary-menu .menu-item a { font-size: 16px !important; }
}

/* RR-001: give the header Enroll Now button a little more length (~2mm each side). */
.nav-cta .btn.btn-primary { padding-left: 32px !important; padding-right: 32px !important; }

/* RR-004: shrink the footer QR code by ~40% (107px -> 64px). */
.qrc .qrcode { width: 64px !important; height: 64px !important; }

/* RR-005: charcoal footer (matches the demo --ink #333F4D) with light text so the
   content stays legible on the dark background. */
footer {
  background-color: #333F4D !important;
  color: #cdd6df !important;
}
footer h4,
footer .foot-col h4 { color: #8b97a4 !important; }
footer p,
footer .foot-contact,
footer .foot-contact p,
footer .foot-brand p { color: #aeb9c6 !important; }
footer a { color: #cdd6df !important; }
footer a:hover { color: #ffffff !important; }
footer .foot-legal { color: #8b97a4 !important; }
footer .foot-bottom {
  border-top-color: #3a4651 !important;
  color: #8b97a4 !important;
}
footer .foot-bottom a { color: #8b97a4 !important; }
/* keep social icons / SVGs visible on the dark bg */
footer .socials a,
footer .socials svg,
footer .socials path { color: #cdd6df !important; }
/* logo wordmark reads low-contrast in brand blue on charcoal — render it white */
/* footer .footer-logo svg path { fill: #ffffff !important; } */
/* QR: give it a white quiet-zone so it stays scannable on the dark footer (RR-004/005) */
footer .qrc .qrcode { 
  background: none; 
  padding: 6px !important; 
  margin: 0 0 0 55px;
  border-radius: 6px !important; box-sizing: content-box; 
}


.rrb-bubble ul li, .rrb-bubble ul:not(.reset-ul) li:not(:last-child) {
  font-size: 14px;
  line-height: normal;
  margin-bottom: 8px;
}

.rrb-bubble ul li:before {
  background: none;
  content: '\002713'; /* ✓ */
}

.rrb-bubble ul li:hover:before {
  transform: none;
}

/* ============================================================================
   Review round 2 — About / Careers / Contact (RR-064+)
   ========================================================================== */

/* RR-068: About > "What we stand for" (starting_points_block) has no subtitle in the
   mockup — just eyebrow + "A few things we believe." The block falls back to its
   generic "Some renters have no credit score…" copy when the description field is
   empty, which is wrong here. Suppress the fallback on the About page only.
   (page-id-253 = EN About, page-id-1719 = ES About.) */
body.page-id-253 .starting_points_block .section-head .description,
body.page-id-1719 .starting_points_block .section-head .description { display: none; }

/* RR-067: About "What we stand for" cards — render the card icon as a green
   rounded-square glyph tile (matches the careers / mockup principle cards).
   Scoped to About (EN 253 + ES 1719) so the homepage glyphs are untouched. */
body.page-id-253 .starting_points_block .tcard,
body.page-id-1719 .starting_points_block .tcard { text-align: left; }
body.page-id-253 .starting_points_block .tcard .dot,
body.page-id-1719 .starting_points_block .tcard .dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 13px;
  background: var(--green-soft, #E7F1EC);
  color: var(--green, #6FA98C);
  margin-bottom: 18px;
}
body.page-id-253 .starting_points_block .tcard .dot svg,
body.page-id-1719 .starting_points_block .tcard .dot svg { width: 24px; height: 24px; }

/* ============================================================================
   Our Customers' Success Stories block — section head (eyebrow + title +
   subtitle), matching newTemplate/rr-demo.html (#/pricing `.tst .section-head`).
   New markup with no base rule, so styled in the site-wide override layer for
   reliability (see block-css memory). rem values (not px) so it scales with the
   theme's responsive 10px root exactly like the other reskin section heads.
   ========================================================================== */
.our_customers_success_stories_block .section-head {
  text-align: center;
  max-width: 56rem;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 3.6rem;
}
.our_customers_success_stories_block .section-head .eyebrow {
  display: inline-block;
  font-family: var(--font-body, 'Inter', system-ui, sans-serif);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: 1.3rem;
  color: var(--blue, #3F6BB0);
  margin-bottom: 10px;
}
.our_customers_success_stories_block .section-head .subtitle {
  color: var(--ink-soft, #566370);
  font-size: 1.7rem;
  line-height: 1.6;
  margin: 0 auto;
  max-width: 52ch;
}

/* Testimonial cards — match rr-demo.html (#/pricing `.tcard`): amber star row
   (replacing the big green quote glyph), plain-weight quote text, and a
   compact avatar + bold name + muted role line. Block markup class = .card.
   `body` prefix bumps specificity above the block's own SCSS chunk (which ties
   these selectors and, as a lazy chunk, can load later — see block-css memory). */
body .our_customers_success_stories_block .card .stars {
  color: var(--amber, #D99A4E);
  letter-spacing: 2px;
  font-size: 1.7rem;
  line-height: 1;
  margin-bottom: 10px;
}
body .our_customers_success_stories_block .card .paragraph {
  font-weight: 400;
  font-size: 1.5rem;
  line-height: 1.6;
  color: var(--ink, #333F4D);
  max-width: none;
}
body .our_customers_success_stories_block .card .person .image-wrapper {
  width: 4.8rem;
  height: 4.8rem;
  margin-right: 1.2rem;
}
body .our_customers_success_stories_block .card .person .info .name {
  font-weight: 700;
  font-size: 1.5rem;
  color: var(--ink, #333F4D);
}
body .our_customers_success_stories_block .card .person .info .role {
  color: var(--ink-soft, #566370);
  font-weight: 400;
  font-size: 1.3rem;
  margin-top: 0.2rem;
}

/* ============================================================================
   Success-stories hero (page_header_block.success-hero.has-image) — MOBILE ONLY.
   The block SCSS `.has-image .content` forces `flex-direction:row` + 70%/40%
   split at ALL widths, so on phones the text and illustration are crammed side
   by side. Larger screens are correct, so only override at <=599.98px: stack the
   illustration BELOW the text and size both to 80% of the SCREEN width. The
   theme `.container` adds ~66px side padding that would otherwise make 80% read
   as 80%-of-the-padded-box, so its horizontal padding is zeroed for this hero
   (children then center inside the full-width content at a true 80vw). `body`
   prefix keeps these above the block's own lazy SCSS chunk (see block-css memory).
   ========================================================================== */
@media screen and (max-width: 599.98px) {
  body .page_header_block.success-hero .container {
    padding-left: 0;
    padding-right: 0;
  }
  body .page_header_block.success-hero.has-image .content {
    flex-direction: column;
    align-items: center;
  }
  body .page_header_block.success-hero.has-image .content .left-content {
    flex-basis: auto;
    width: 80%;
    margin: 0 auto;
  }
  body .page_header_block.success-hero.has-image .content .right-content {
    width: 80%;
    max-width: none;
    margin: 20px auto 0;
  }
  body .page_header_block.success-hero.has-image .content .right-content img {
    display: block;
    width: 100%;
    height: auto;
  }
}

/* ============================================================================
   Blog index hero — "Financial Tips" eyebrow above the H1, matching
   newTemplate/rr-demo.html (#/blog `.blog-hero .eyebrow`). New markup (rendered
   from the editable `eyebrow` ACF field on the posts page) with no base rule, so
   styled here in the site-wide override layer. rem size matches sibling reskin
   eyebrows on the theme's responsive 10px root.
   ========================================================================== */
.financial_tips_block.blog-hero .blog-hero-inner .eyebrow {
  display: inline-block;
  font-family: var(--font-body, 'Inter', system-ui, sans-serif);
  font-weight: 600;
  font-size: 1.3rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--blue, #3F6BB0);
  margin-bottom: 0.6rem;
}

/* ============================================================================
   Contact page — "Chat with us" card (contact_us_cards_block.contact-reskin,
   first column) matching newTemplate/rr-demo.html (#/contact `.chan.primary`).
   In the mockup the primary channel reads as the emphasized one: SOLID blue
   icon bubble with a white glyph (the secondary "Call us" card keeps the
   blue-tint bubble with a blue glyph), and its CTA is `.btn-primary` — filled
   blue pill, white label, blue-tinted lift shadow — rather than the outline
   button the theme's ACF field renders (`.btn.has-border`).
   The block's own style.scss sets the tinted bubble and the site-wide button
   rules above set the outline style, and that SCSS ships as a LAZY chunk which
   can load after this file (see block-css memory), so both selectors here are
   `body`-prefixed to stay above it in the cascade regardless of load order.
   ========================================================================== */
body .contact_us_cards_block.contact-reskin .contact-row .col:first-child .contact-card .card-icon {
  background: var(--blue, #3F6BB0);
  color: #fff;
}
/* `:not(.offline)` leaves the live-chat script's grey after-hours treatment
   (`.btn.offline{background:#999}`, injected inline by the contact page's own
   <style>) intact — it's a real state the mockup has no equivalent for, and this
   selector would otherwise outrank it. */
body .contact_us_cards_block.contact-reskin .contact-row .col:first-child .contact-card .btn:not(.offline),
body .contact_us_cards_block.contact-reskin .contact-row .col:first-child .contact-card .btn.has-border:not(.offline) {
  background-color: var(--blue, #3F6BB0);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 6px 16px rgba(63, 107, 176, .24);
}
body .contact_us_cards_block.contact-reskin .contact-row .col:first-child .contact-card .btn:not(.offline):hover,
body .contact_us_cards_block.contact-reskin .contact-row .col:first-child .contact-card .btn.has-border:not(.offline):hover {
  background-color: var(--blue-deep, #2E5394);
  border-color: transparent;
  color: #fff;
  transform: translateY(-1px);
}
/* Both channel CTAs sit flush LEFT in the mockup. The block SCSS already asks for
   that (`align-self: flex-start`), but the base `.contact_us_cards_block
   .contact-card .btn { margin: auto }` — which the centered, pre-reskin card
   layout needs — resolves the horizontal autos and re-centers the flex item.
   Zero the side margins for the reskinned instances only; keep `margin-top:auto`
   so the CTA still pins to the bottom of an uneven-height card. */
body .contact_us_cards_block.contact-reskin .contact-card .btn {
  margin-left: 0;
  margin-right: 0;
  margin-top: auto;
}

/* ---------------------------------------------------------------------------
   Contact card support-hours line — new `hours` ACF sub-field on the
   contact_us_cards repeater, rendered as `.card-hours` after the CTA. Matches
   the mockup's `.chan .hours` (#/contact): small, muted, sitting under the
   button. Not scoped to `.contact-reskin` so the field also styles correctly if
   an editor fills it in on one of the other pages that reuse this block.
   rem values (not px) so it scales with the theme's responsive 10px root; the
   mockup's .85rem/14px on a 16px base are 1.4rem here. New markup with no base
   rule, so it lives in this override layer (see block-css memory).
   ------------------------------------------------------------------------- */
.contact_us_cards_block .contact-card .card-hours {
  font-family: var(--font-body, 'Inter', system-ui, sans-serif);
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-soft, #566370);
  margin-top: 1.4rem;
}

/* ---------------------------------------------------------------------------
   Goals hero — narrow the illustration column so it stops covering the text.
   `.achieve_your_goals_block .content` is a flex row where `.right-content`
   carries `margin-left: -47%` so the illustration sits over the text column.
   At its base flex-basis of 77.67% the column was wide enough to cover the
   "Enroll now" link and intercept its clicks. Constraining it to 50% keeps the
   intended overlap of the artwork while pulling its box back off the CTA.
   Scoped to the same breakpoint as the negative margin that creates the
   overlap (`min-medium-screen` = 600px); below it the columns stack and cannot
   overlap. Lives here rather than in the block SCSS because that compiles to a
   lazily-loaded chunk (see block-css memory).

   `!important` is required, not stylistic: the block's chunk declares the very
   same selector with `flex-basis: 77.67%`, and because the chunk is injected by
   JS it lands later in the cascade than this file. Equal specificity, so source
   order decides and the chunk would otherwise win. The matching SCSS change is
   in the block source too, so a future rebuild makes this redundant rather than
   conflicting.
   ------------------------------------------------------------------------- */
@media screen and (min-width: 600px) {
  .achieve_your_goals_block .content .right-content {
    flex-basis: 50% !important;
    width: 50% !important;
    margin-left: -47% !important;
  }
}