@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&display=swap');

/* VALN Interactive Pages — Shared CSS
   - Scoped to .rl-page (recommended).
   - Backward compatible with .rl-page.
   - No CSS variables / :where() so WP's built-in editor linter won't block saves.
*/

/* Root wrapper */
.rl-page{
  font-family: "Inter", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  color:#0f172a;

  background:
    background: #FAFAF7;

  padding:28px 16px 72px;
}

@media (max-width:640px){
  .rl-page{ padding:20px 12px 64px; }
}

.rl-page,
.rl-page *{ box-sizing:border-box; }

/* Focus */
.rl-page a:focus,
.rl-page button:focus,
.rl-page input:focus,
.rl-page select:focus,
.rl-page summary:focus,
.rl-page textarea:focus{
  outline:3px solid rgba(200,16,46,.35);
  outline-offset:2px;
  border-radius:10px;
}

.rl-page a{ color:#C8102E; text-decoration:none; }
.rl-page a:hover{ text-decoration:underline; }

/* Wrap */
.rl-page .rl-wrap{ max-width:1120px; margin:0 auto; }

/* Hide helper (JS can override with inline style when needed) */
.rl-page .rl-hide{ display:none; }

/* Honeypot wrapper for forms */
.rl-page .rl-hp-wrap{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

/* Defensive typography against theme overrides */
.rl-page p,
.rl-page li,
.rl-page td,
.rl-page th,
.rl-page dt,
.rl-page dd,
.rl-page label,
.rl-page input,
.rl-page select,
.rl-page button,
.rl-page summary{
  font-size:14px;
  line-height:1.65;
}

.rl-page h1,
.rl-page h2,
.rl-page h3,
.rl-page h4{
  font-family: 'Fraunces', Georgia, serif !important;
  color:#3B0000 !important;
  letter-spacing:-.01em;
  margin:0;
}

/* Headings (avoid clamp() so WP linter won't complain) */
.rl-page h1{
  font-size:36px;
  font-weight:900;
  line-height:1.12;
}
@media (max-width:640px){
  .rl-page h1{ font-size:30px; }
}

.rl-page h2{
  font-size:26px;
  font-weight:850;
  line-height:1.22;
}
@media (max-width:640px){
  .rl-page h2{ font-size:22px; }
}

.rl-page h3{
  font-size:16px;
  font-weight:850;
  line-height:1.22;
}

.rl-page h4{
  font-size:15px;
  font-weight:850;
  line-height:1.25;
}

.rl-page p{
  margin:0 0 10px;
  color:#475569;
  max-width:100% !important;
}
.rl-page p:last-child{ margin-bottom:0; }

/* Skip link */
.rl-page .rl-skip{
  position:absolute;
  left:-9999px;
  top:10px;
  z-index:9999;
  background:#fff;
  color:#0f172a;
  border:2px solid #C8102E;
  border-radius:12px;
  padding:10px 12px;
  font-weight:850;
}
.rl-page .rl-skip:focus{ left:12px; }

/* Cards */
.rl-page .rl-card{
  background:#ffffff;
  border:1px solid #e2e8f0;
  border-radius:24px;
  box-shadow:0 12px 34px rgba(15,23,42,.10), 0 2px 10px rgba(15,23,42,.06);
}
.rl-page .rl-card-inner{ padding:22px 22px 20px; }
@media (max-width:640px){
  .rl-page .rl-card-inner{ padding:16px 14px; }
}

/* Hero */
.rl-page .rl-hero{ margin-bottom:18px; }

.rl-page .rl-breadcrumb{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
  color:#475569;
  font-size:12.5px;
}
.rl-page .rl-breadcrumb a{ font-weight:800; }
.rl-page .rl-breadcrumb .sep,
.rl-page .rl-breadcrumb span[aria-hidden="true"]{ color:#94a3b8; }

.rl-page .rl-eyebrow,
.rl-page .rl-eyebrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 12px;
  border-radius:999px;
  background:#fff;
  border:1px solid rgba(22,163,74,.45);
  color:#475569;
  font-size:11.5px;
  text-transform:uppercase;
  letter-spacing:.06em;
  margin-top:10px;
}

.rl-page .rl-eyebrow .dot,
.rl-page .rl-hero-dot{
  width:9px; height:9px; border-radius:999px;
  background:#16a34a;
  box-shadow:0 0 0 5px rgba(22,163,74,.22);
}

.rl-page .rl-eyebrow strong,
.rl-page .rl-accent-word{ color:#16a34a; font-weight:900; }

.rl-page .rl-meta,
.rl-page .rl-hero-meta{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
  margin-top:8px;
  color:#475569;
  font-size:12.5px;
  width:100%;
}

.rl-page .rl-meta strong{ color:#0f172a; font-weight:800; }
.rl-page .rl-meta .sep{ color:#94a3b8; }

.rl-page .rl-hero-lead,
.rl-page .rl-hero-lead{
  margin-top:10px;
  color:#475569;
  width:100%;
  max-width:100% !important;
}

/* Pills */
.rl-page .rl-pills,
.rl-page .rl-hero-jumps{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:12px;
  padding:0;
}

@media (max-width:760px){
  .rl-page .rl-pills,
  .rl-page .rl-hero-jumps{
    flex-wrap:nowrap;
    overflow-x:auto;
    padding-bottom:6px;
    -webkit-overflow-scrolling:touch;
  }
  .rl-page .rl-pills::-webkit-scrollbar,
  .rl-page .rl-hero-jumps::-webkit-scrollbar{ display:none; }
}

.rl-page .rl-pill,
.rl-page .rl-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid #c7d2fe;
  background:#fff;
  color:#0F1F4A;
  font-weight:850;
  font-size:12.5px;
  white-space:nowrap;
  text-decoration:none !important;
  user-select:none;
}

.rl-page .rl-pill:hover,
.rl-page .rl-pill:hover{ background:#eef2ff; text-decoration:none !important; }

/* Buttons */
.rl-page .rl-btn-row,
.rl-page .rl-ctas,
.rl-page .rl-form-actions,
.rl-page .rl-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:14px;
  align-items:center;
}

.rl-page .rl-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  border-radius:999px;
  border:1px solid transparent;
  padding:11px 18px;
  font-weight:900;
  font-size:14px;
  cursor:pointer;
  text-decoration:none !important;
  line-height:1.2;
  user-select:none;
}

@media (max-width:640px){
  .rl-page .rl-btn{ padding:10px 14px; font-size:13.5px; }
}

.rl-page .rl-btn--primary,
.rl-page .rl-pill{
  background:#0F1F4A;
  border-color:#0F1F4A;
  color:#fff !important;
}
.rl-page .rl-btn--primary:hover,
.rl-page .rl-pill:hover{ background:#082f7f; border-color:#082f7f; }

.rl-page .rl-btn--secondary,
.rl-page .rl-btn--ghost{
  background:#fff;
  border-color:#c7d2fe;
  color:#0F1F4A !important;
}
.rl-page .rl-btn--secondary:hover,
.rl-page .rl-btn--ghost:hover{ background:#f1f5ff; }

.rl-page .rl-btn--success,
.rl-page .rl-btn--successPill{
  background:#0F1F4A;
  border-color:#0F1F4A;
  color:#fff !important;
}
.rl-page .rl-btn--success:hover,
.rl-page .rl-btn--successPill:hover{ background:#082f7f; border-color:#082f7f; }

/* Optional green filled button (use intentionally; not the default primary CTA) */
.rl-page .rl-btn--green{
  background:#16a34a;
  border-color:#16a34a;
  color:#fff !important;
}
.rl-page .rl-btn--green:hover{ background:#15803d; border-color:#15803d; }

/* Compare/Offer buttons: white with green border + green text */
.rl-page .rl-btn--compare,
.rl-page a.rl-btn--compare{
  background:#fff !important;
  border-color:rgba(22,163,74,.55) !important;
  color:#15803d !important;
  text-decoration:none !important;
}
.rl-page .rl-btn--compare:hover,
.rl-page a.rl-btn--compare:hover{
  background:#ecfdf5 !important;
  border-color:rgba(22,163,74,.65) !important;
  color:#15803d !important;
  text-decoration:none !important;
}

/* Reset: red text, no pill */
.rl-page .rl-btn--reset,
.rl-page button.rl-btn--reset{
  background:transparent !important;
  border:0 !important;
  padding:0 !important;
  border-radius:0 !important;
  color:#dc2626 !important;
  font-weight:900;
}
.rl-page .rl-btn--reset:hover{ text-decoration:underline !important; background:transparent !important; }

/* Small button */
.rl-page .rl-btn--small{ padding:8px 14px; font-size:13px; }

/* Quick cards */
.rl-page .rl-quick-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
  margin-top:14px;
}
@media (max-width:860px){ .rl-page .rl-quick-grid{ grid-template-columns:minmax(0,1fr); } }

.rl-page .rl-quick-card{
  border-radius:18px;
  border:1px solid #bfdbfe;
  background:linear-gradient(180deg, rgba(239,246,255,.96) 0%, rgba(255,255,255,.98) 100%);
  padding:14px 14px 12px;
  box-shadow:0 12px 30px rgba(15,23,42,.08);
}
.rl-page .rl-quick-card h3{ font-size:15px; font-weight:900; margin-bottom:8px; color:#0F1F4A; }

.rl-page .rl-quick-card ul,
.rl-page .rl-result-body ul,
.rl-page .rl-callout ul{
  margin:0 !important;
  padding-left:18px !important;
  list-style-type:disc !important;
  list-style-position:outside !important;
  color:#475569;
}
.rl-page .rl-quick-card li,
.rl-page .rl-result-body li,
.rl-page .rl-callout li{ margin:8px 0; display:list-item !important; }

/* Sections */
.rl-page .rl-section{ margin-top:26px; }
.rl-page .rl-section-head,
.rl-page .rl-section-head{ margin-bottom:10px; }
.rl-page .rl-section-head p,
.rl-page .rl-section-head p{ margin:6px 0 0; color:#475569; max-width:100% !important; }

/* Tables */
.rl-page .rl-table-scroll{
  width:100%;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  border-radius:18px;
  border:1px solid #e2e8f0;
  background:#fff;
}

/* If a theme sets tables to display:block, force table layout inside VLN wrapper */
.rl-page table{ display:table; border-collapse:collapse; }

.rl-page .rl-table,
.rl-page .rl-compare-table{
  width:100%;
  border-collapse:collapse;
  table-layout:auto;
  font-size:13px;
}

/* Default: allow tables to shrink on mobile without forcing huge min-width.
   If you need horizontal scroll, add data-vln-table="scroll" on the table. */
.rl-page .rl-table[data-vln-table="scroll"],
.rl-page .rl-compare-table[data-vln-table="scroll"]{
  min-width:640px;
}

.rl-page .rl-table th,
.rl-page .rl-table td,
.rl-page .rl-compare-table th,
.rl-page .rl-compare-table td{
  border-bottom:1px solid #e2e8f0;
  padding:10px 10px;
  text-align:left;
  vertical-align:top;
}

@media (max-width:640px){
  .rl-page .rl-table th,
  .rl-page .rl-table td,
  .rl-page .rl-compare-table th,
  .rl-page .rl-compare-table td{
    padding:8px 8px;
  }
}

.rl-page .rl-table thead th,
.rl-page .rl-compare-table thead th{
  background:#f8fafc;
  color:#0f172a;
  font-weight:850;
}

/* Keep key cells (like “30-year fixed”) on one line */
.rl-page .rl-table th:first-child,
.rl-page .rl-table td:first-child{
  white-space:nowrap;
  width:46%;
}
.rl-page .rl-table th:not(:first-child),
.rl-page .rl-table td:not(:first-child){
  white-space:nowrap;
}

/* Tool shell */
.rl-page .rl-tool-shell{
  border-radius:24px;
  border:1px solid #e2e8f0;
  background:rgba(248,250,252,.92);
  padding:16px;
  box-shadow:0 12px 34px rgba(15,23,42,.10), 0 2px 10px rgba(15,23,42,.06);
}
@media (max-width:640px){ .rl-page .rl-tool-shell{ padding:12px; } }

/*
  vlnToolGrid is used for BOTH:
  - Tool shells (inputs + results) where the left column should be slightly wider.
  - General two-column content (like the VA Rates snapshot panes) where columns should be equal.
  
  Base (outside tool shells): equal columns.
  Tool shells override: slight left-column bias.
*/
.rl-page .rl-tool-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:16px;
}
.rl-page .rl-tool-grid > *{ min-width:0; }
.rl-page .rl-tool-shell .rl-tool-grid{
  grid-template-columns:minmax(0,1.15fr) minmax(0,1.1fr);
}
@media (max-width:900px){
  .rl-page .rl-tool-grid{ grid-template-columns:minmax(0,1fr); }
  .rl-page .rl-tool-shell .rl-tool-grid{ grid-template-columns:minmax(0,1fr); }
}

.rl-page .rl-pane,
.rl-page .rl-form,
.rl-page .rl-result{
  border-radius:18px;
  border:1px solid #e2e8f0;
  background:#fff;
  padding:18px 18px 16px;
  box-shadow:0 12px 30px rgba(15,23,42,.08);
  min-width:0;
}
@media (max-width:640px){
  .rl-page .rl-pane,
  .rl-page .rl-form,
  .rl-page .rl-result{
    padding:14px 14px 12px;
  }
}

.rl-page .rl-pane-title{
  font-size:15px;
  font-weight:950;
  margin:0 0 10px;
  color:#0F1F4A;
}

/* Form fields */
.rl-page .rl-row-2,
.rl-page .rl-form-row{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}
@media (max-width:640px){
  .rl-page .rl-row-2,
  .rl-page .rl-form-row{ grid-template-columns:minmax(0,1fr); }
}

.rl-page .rl-field,
.rl-page .rl-form-group{ display:flex; flex-direction:column; min-width:0; margin-bottom:12px; }

.rl-page .rl-field label,
.rl-page .rl-form-label{ font-weight:850; margin-bottom:6px; color:#0f172a; display:block; }

.rl-page .rl-field input,
.rl-page .rl-field select,
.rl-page .rl-form-input,
.rl-page .rl-form-select{
  border-radius:12px;
  border:1px solid #e2e8f0;
  padding:10px 10px;
  background:#fff;
  color:#0f172a;
  font-size:14px;
  width:100%;
}

.rl-page .rl-field input:focus,
.rl-page .rl-field select:focus,
.rl-page .rl-form-input:focus,
.rl-page .rl-form-select:focus{
  outline:none;
  border-color:#C8102E;
  box-shadow:0 0 0 1px rgba(200,16,46,.35);
}

.rl-page .rl-field input[type="range"]{ width:100%; }

.rl-page .rl-range-row{
  display:flex;
  justify-content:space-between;
  gap:8px;
  margin-top:6px;
  color:#475569;
  font-size:12.5px;
}

.rl-page .rl-help,
.rl-page .rl-form-help{ margin-top:6px; color:#475569; font-size:12.5px; line-height:1.55; }

.rl-page .rl-error,
.rl-page .rl-form-error{ margin-top:10px; color:#dc2626; font-weight:750; }

/* Callouts */
.rl-page .rl-callout{
  border-radius:18px;
  border:1px solid #e2e8f0;
  background:#fff;
  padding:12px 12px 10px;
  box-shadow:0 12px 30px rgba(15,23,42,.08);
  margin-top:12px;
}
.rl-page .rl-callout h3{ font-size:15px; margin:0 0 6px; }
.rl-page .rl-callout p{ margin:0; color:#475569; font-size:13px; line-height:1.6; }

.rl-page .rl-callout-warn{ border-color:#fed7aa; background:linear-gradient(180deg,#fffbeb 0%, #fff 100%); }
.rl-page .rl-callout-blue{ border-color:#bfdbfe; background:linear-gradient(180deg,#eff6ff 0%, #fff 100%); }

/* Results */
.rl-page .rl-result-main{
  border-radius:18px;
  border:1px solid #e2e8f0;
  background:linear-gradient(180deg,#f8fafc 0%, #fff 100%);
  padding:16px 16px 14px;
  margin-bottom:12px;
}

.rl-page .rl-result-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
  margin-bottom:10px;
}

.rl-page .rl-tag{
  display:inline-flex;
  align-items:center;
  padding:6px 10px;
  border-radius:999px;
  background:#eef2ff;
  border:1px solid #c7d2fe;
  color:#0F1F4A;
  font-weight:950;
  font-size:12.5px;
  white-space:nowrap;
}

.rl-page .rl-note{ color:#475569; font-size:12.5px; }

.rl-page .rl-metrics{ display:grid; grid-template-columns:1fr; gap:12px; margin-top:10px; }

.rl-page .rl-metric .label{ color:#475569; font-size:12.5px; line-height:1.2; }
.rl-page .rl-metric .value{ margin-top:4px; color:#0f172a; font-size:26px; font-weight:950; line-height:1.15; }
.rl-page .rl-metric .value.small{ font-size:20px; font-weight:950; }

.rl-page .rl-stack{ display:grid; grid-template-columns:1fr; gap:12px; }
.rl-page .rl-mini-card{
  border-radius:18px;
  border:1px solid #e2e8f0;
  background:linear-gradient(180deg,#fff 0%, #f8fafc 100%);
  padding:12px 12px 10px;
  box-shadow:0 12px 30px rgba(15,23,42,.08);
}

.rl-page .rl-mini-card h3{ font-size:15px; margin:0 0 8px; }

.rl-page .rl-kv-list{ list-style:none; padding:0; margin:0 0 8px; color:#475569; }
.rl-page .rl-kv-list li{ display:flex; justify-content:space-between; gap:10px; margin-bottom:6px; }
.rl-page .rl-kv-list span:last-child{ font-weight:850; color:#0f172a; white-space:nowrap; }

.rl-page .rl-stats{ margin:0; }
.rl-page .rl-stats div{ display:flex; justify-content:space-between; gap:10px; margin-bottom:6px; color:#475569; }
.rl-page .rl-stats dt{ font-weight:700; }
.rl-page .rl-stats dd{ margin:0; font-weight:850; color:#0f172a; white-space:nowrap; }

/* Traffic cards */
.rl-page .rl-traffic-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
@media (max-width:960px){ .rl-page .rl-traffic-grid{ grid-template-columns:minmax(0,1fr); } }

.rl-page .rl-traffic-card{
  border-radius:18px;
  background:#fff;
  padding:12px 12px 10px;
  box-shadow:0 12px 30px rgba(15,23,42,.08);
  min-width:0;
  border:1px solid #e2e8f0;
}
.rl-page .rl-traffic-card[data-tone="green"]{ border-color:rgba(22,163,74,.35); }
.rl-page .rl-traffic-card[data-tone="yellow"]{ border-color:rgba(202,138,4,.35); }
.rl-page .rl-traffic-card[data-tone="red"]{ border-color:rgba(220,38,38,.30); }

.rl-page .rl-traffic-title{ margin:0 0 6px; font-size:16px; font-weight:950; line-height:1.22; }
.rl-page .rl-traffic-title.green{ color:#16a34a; }
.rl-page .rl-traffic-title.yellow{ color:#ca8a04; }
.rl-page .rl-traffic-title.red{ color:#dc2626; }

/* FAQ */
.rl-page .rl-faq,
.rl-page .rl-faq-list{
  margin-top:12px;
  border:1px solid #e2e8f0;
  border-radius:24px;
  background:#fff;
  overflow:hidden;
  box-shadow:0 18px 45px rgba(15,23,42,.10);
}

.rl-page .rl-faq details,
.rl-page .rl-faq-item{ border:0; }

.rl-page .rl-faq details:not(:first-child),
.rl-page .rl-faq-item:not(:first-child){ border-top:1px solid #e2e8f0; }

.rl-page .rl-faq summary,
.rl-page .rl-faq-item summary{
  cursor:pointer;
  list-style:none;
  padding:16px 16px;
  font-weight:950;
  color:#0f172a;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

.rl-page .rl-faq summary::-webkit-details-marker,
.rl-page .rl-faq-item summary::-webkit-details-marker{ display:none; }

/* Default +/- icon if page doesn't provide custom icon */
.rl-page .rl-faq summary:after{
  content:"+";
  width:28px; height:28px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  border:1px solid #c7d2fe;
  background:#f8fafc;
  color:#64748b;
  font-weight:950;
  flex:0 0 auto;
}

.rl-page .rl-faq details[open] summary:after{ content:"–"; }

.rl-page .rl-faq .ans,
.rl-page .rl-faqBody{
  border-top:1px solid #e2e8f0;
  padding:12px 16px 16px;
}

.rl-page .rl-faq .ans p{ margin:0; color:#475569; }

/* References */
.rl-page .rl-refs,
.rl-page .rl-sources{
  margin-top:12px;
  border:1px solid #e2e8f0;
  border-radius:24px;
  background:#fff;
  box-shadow:0 18px 45px rgba(15,23,42,.10);
  overflow:hidden;
}

.rl-page .rl-refs-inner{ padding:16px 16px 14px; }
.rl-page .rl-refs-label{ margin:0 0 10px; color:#475569; font-weight:850; font-size:12.5px; }

.rl-page .rl-refs ul,
.rl-page .rl-sources-list{
  margin:0 !important;
  padding-left:18px !important;
  list-style-type:disc !important;
  list-style-position:outside !important;
  color:#475569;
}

.rl-page .rl-refs li,
.rl-page .rl-sources-list li{ margin:8px 0; display:list-item !important; }

/* Utility: visually hidden */
.rl-page .rl-sr-only{
  position:absolute !important;
  left:-9999px !important;
  width:1px !important;
  height:1px !important;
  overflow:hidden !important;
}


/* Compare table best row highlight */
.rl-page .rl-best-row td{
  background:linear-gradient(90deg, rgba(22,163,74,.10) 0%, rgba(22,163,74,.04) 100%);
}
.rl-page .rl-best-row td:first-child{
  position:relative;
}
.rl-page .rl-best-row td:first-child:before{
  content:"";
  position:absolute;
  left:0; top:0; bottom:0;
  width:4px;
  background:#16a34a;
}

/* Level pill (readiness/service/property) */
.rl-page .rl-pill,
.rl-page #vaReadyLevelPill,
.rl-page #serviceLevelPill,
.rl-page #propertyLevelPill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid #c7d2fe;
  background:#eef2ff;
  color:#0F1F4A;
  font-weight:950;
  font-size:12.5px;
  white-space:nowrap;
}

.rl-page .rl-pill[data-level="ready"],
.rl-page #vaReadyLevelPill[data-level="ready"],
.rl-page #serviceLevelPill[data-level="ready"],
.rl-page #propertyLevelPill[data-level="ready"]{
  background:rgba(22,163,74,.10);
  border-color:rgba(22,163,74,.35);
  color:#15803d;
}

.rl-page .rl-pill[data-level="close"],
.rl-page #vaReadyLevelPill[data-level="close"],
.rl-page #serviceLevelPill[data-level="close"],
.rl-page #propertyLevelPill[data-level="close"]{
  background:rgba(202,138,4,.10);
  border-color:rgba(202,138,4,.35);
  color:#a16207;
}

.rl-page .rl-pill[data-level="prep"],
.rl-page #vaReadyLevelPill[data-level="prep"],
.rl-page #serviceLevelPill[data-level="prep"],
.rl-page #propertyLevelPill[data-level="prep"]{
  background:rgba(220,38,38,.08);
  border-color:rgba(220,38,38,.28);
  color:#b91c1c;
}

/* Score bar (optional) */
.rl-page .rl-score-track{
  height:10px;
  border-radius:999px;
  background:#e2e8f0;
  overflow:hidden;
}
.rl-page .rl-score-bar,
.rl-page #vaReadyScoreBar,
.rl-page #serviceScoreBar,
.rl-page #propertyScoreBar{
  height:10px;
  border-radius:999px;
  width:0%;
  background:#0F1F4A;
  transition:width .25s ease;
}


/* ===== Backward compatible selectors (.rl-page) ===== */

/* Root wrapper */
.rl-page{
  font-family: "Inter", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  color:#0f172a;

  background:
    background: #FAFAF7;

  padding:28px 16px 72px;
}

@media (max-width:640px){
  .rl-page{ padding:20px 12px 64px; }
}

.rl-page,
.rl-page *{ box-sizing:border-box; }

/* Focus */
.rl-page a:focus,
.rl-page button:focus,
.rl-page input:focus,
.rl-page select:focus,
.rl-page summary:focus,
.rl-page textarea:focus{
  outline:3px solid rgba(200,16,46,.35);
  outline-offset:2px;
  border-radius:10px;
}

.rl-page a{ color:#C8102E; text-decoration:none; }
.rl-page a:hover{ text-decoration:underline; }

/* Wrap */
.rl-page .rl-wrap{ max-width:1120px; margin:0 auto; }

/* Hide helper (JS can override with inline style when needed) */
.rl-page .rl-hide{ display:none; }

/* Honeypot wrapper for forms */
.rl-page .rl-hp-wrap{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

/* Defensive typography against theme overrides */
.rl-page p,
.rl-page li,
.rl-page td,
.rl-page th,
.rl-page dt,
.rl-page dd,
.rl-page label,
.rl-page input,
.rl-page select,
.rl-page button,
.rl-page summary{
  font-size:14px;
  line-height:1.65;
}

.rl-page h1,
.rl-page h2,
.rl-page h3,
.rl-page h4{
  font-family: 'Fraunces', Georgia, serif !important;
  color:#3B0000 !important;
  letter-spacing:-.01em;
  margin:0;
}

/* Headings (avoid clamp() so WP linter won't complain) */
.rl-page h1{
  font-size:36px;
  font-weight:900;
  line-height:1.12;
}
@media (max-width:640px){
  .rl-page h1{ font-size:30px; }
}

.rl-page h2{
  font-size:26px;
  font-weight:850;
  line-height:1.22;
}
@media (max-width:640px){
  .rl-page h2{ font-size:22px; }
}

.rl-page h3{
  font-size:16px;
  font-weight:850;
  line-height:1.22;
}

.rl-page h4{
  font-size:15px;
  font-weight:850;
  line-height:1.25;
}

.rl-page p{
  margin:0 0 10px;
  color:#475569;
  max-width:100% !important;
}
.rl-page p:last-child{ margin-bottom:0; }

/* Skip link */
.rl-page .rl-skip{
  position:absolute;
  left:-9999px;
  top:10px;
  z-index:9999;
  background:#fff;
  color:#0f172a;
  border:2px solid #C8102E;
  border-radius:12px;
  padding:10px 12px;
  font-weight:850;
}
.rl-page .rl-skip:focus{ left:12px; }

/* Cards */
.rl-page .rl-card{
  background:#ffffff;
  border:1px solid #e2e8f0;
  border-radius:24px;
  box-shadow:0 12px 34px rgba(15,23,42,.10), 0 2px 10px rgba(15,23,42,.06);
}
.rl-page .rl-card-inner{ padding:22px 22px 20px; }
@media (max-width:640px){
  .rl-page .rl-card-inner{ padding:16px 14px; }
}

/* Hero */
.rl-page .rl-hero{ margin-bottom:18px; }

.rl-page .rl-breadcrumb{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
  color:#475569;
  font-size:12.5px;
}
.rl-page .rl-breadcrumb a{ font-weight:800; }
.rl-page .rl-breadcrumb .sep,
.rl-page .rl-breadcrumb span[aria-hidden="true"]{ color:#94a3b8; }

.rl-page .rl-eyebrow,
.rl-page .rl-eyebrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 12px;
  border-radius:999px;
  background:#fff;
  border:1px solid rgba(22,163,74,.45);
  color:#475569;
  font-size:11.5px;
  text-transform:uppercase;
  letter-spacing:.06em;
  margin-top:10px;
}

.rl-page .rl-eyebrow .dot,
.rl-page .rl-hero-dot{
  width:9px; height:9px; border-radius:999px;
  background:#16a34a;
  box-shadow:0 0 0 5px rgba(22,163,74,.22);
}

.rl-page .rl-eyebrow strong,
.rl-page .rl-accent-word{ color:#16a34a; font-weight:900; }

.rl-page .rl-meta,
.rl-page .rl-hero-meta{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
  margin-top:8px;
  color:#475569;
  font-size:12.5px;
  width:100%;
}

.rl-page .rl-meta strong{ color:#0f172a; font-weight:800; }
.rl-page .rl-meta .sep{ color:#94a3b8; }

.rl-page .rl-hero-lead,
.rl-page .rl-hero-lead{
  margin-top:10px;
  color:#475569;
  width:100%;
  max-width:100% !important;
}

/* Pills */
.rl-page .rl-pills,
.rl-page .rl-hero-jumps{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:12px;
  padding:0;
}

@media (max-width:760px){
  .rl-page .rl-pills,
  .rl-page .rl-hero-jumps{
    flex-wrap:nowrap;
    overflow-x:auto;
    padding-bottom:6px;
    -webkit-overflow-scrolling:touch;
  }
  .rl-page .rl-pills::-webkit-scrollbar,
  .rl-page .rl-hero-jumps::-webkit-scrollbar{ display:none; }
}

.rl-page .rl-pill,
.rl-page .rl-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid #c7d2fe;
  background:#fff;
  color:#0F1F4A;
  font-weight:850;
  font-size:12.5px;
  white-space:nowrap;
  text-decoration:none !important;
  user-select:none;
}

.rl-page .rl-pill:hover,
.rl-page .rl-pill:hover{ background:#eef2ff; text-decoration:none !important; }

/* Buttons */
.rl-page .rl-btn-row,
.rl-page .rl-ctas,
.rl-page .rl-form-actions,
.rl-page .rl-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:14px;
  align-items:center;
}

.rl-page .rl-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  border-radius:999px;
  border:1px solid transparent;
  padding:11px 18px;
  font-weight:900;
  font-size:14px;
  cursor:pointer;
  text-decoration:none !important;
  line-height:1.2;
  user-select:none;
}

@media (max-width:640px){
  .rl-page .rl-btn{ padding:10px 14px; font-size:13.5px; }
}

.rl-page .rl-btn--primary,
.rl-page .rl-pill{
  background:#0F1F4A;
  border-color:#0F1F4A;
  color:#fff !important;
}
.rl-page .rl-btn--primary:hover,
.rl-page .rl-pill:hover{ background:#082f7f; border-color:#082f7f; }

.rl-page .rl-btn--secondary,
.rl-page .rl-btn--ghost{
  background:#fff;
  border-color:#c7d2fe;
  color:#0F1F4A !important;
}
.rl-page .rl-btn--secondary:hover,
.rl-page .rl-btn--ghost:hover{ background:#f1f5ff; }

.rl-page .rl-btn--success,
.rl-page .rl-btn--successPill{
  background:#0F1F4A;
  border-color:#0F1F4A;
  color:#fff !important;
}
.rl-page .rl-btn--success:hover,
.rl-page .rl-btn--successPill:hover{ background:#082f7f; border-color:#082f7f; }

/* Optional green filled button (use intentionally; not the default primary CTA) */
.rl-page .rl-btn--green{
  background:#16a34a;
  border-color:#16a34a;
  color:#fff !important;
}
.rl-page .rl-btn--green:hover{ background:#15803d; border-color:#15803d; }

/* Compare/Offer buttons: white with green border + green text */
.rl-page .rl-btn--compare,
.rl-page a.rl-btn--compare{
  background:#fff !important;
  border-color:rgba(22,163,74,.55) !important;
  color:#15803d !important;
  text-decoration:none !important;
}
.rl-page .rl-btn--compare:hover,
.rl-page a.rl-btn--compare:hover{
  background:#ecfdf5 !important;
  border-color:rgba(22,163,74,.65) !important;
  color:#15803d !important;
  text-decoration:none !important;
}

/* Reset: red text, no pill */
.rl-page .rl-btn--reset,
.rl-page button.rl-btn--reset{
  background:transparent !important;
  border:0 !important;
  padding:0 !important;
  border-radius:0 !important;
  color:#dc2626 !important;
  font-weight:900;
}
.rl-page .rl-btn--reset:hover{ text-decoration:underline !important; background:transparent !important; }

/* Small button */
.rl-page .rl-btn--small{ padding:8px 14px; font-size:13px; }

/* Quick cards */
.rl-page .rl-quick-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
  margin-top:14px;
}
@media (max-width:860px){ .rl-page .rl-quick-grid{ grid-template-columns:minmax(0,1fr); } }

.rl-page .rl-quick-card{
  border-radius:18px;
  border:1px solid #bfdbfe;
  background:linear-gradient(180deg, rgba(239,246,255,.96) 0%, rgba(255,255,255,.98) 100%);
  padding:14px 14px 12px;
  box-shadow:0 12px 30px rgba(15,23,42,.08);
}
.rl-page .rl-quick-card h3{ font-size:15px; font-weight:900; margin-bottom:8px; color:#0F1F4A; }

.rl-page .rl-quick-card ul,
.rl-page .rl-result-body ul,
.rl-page .rl-callout ul{
  margin:0 !important;
  padding-left:18px !important;
  list-style-type:disc !important;
  list-style-position:outside !important;
  color:#475569;
}
.rl-page .rl-quick-card li,
.rl-page .rl-result-body li,
.rl-page .rl-callout li{ margin:8px 0; display:list-item !important; }

/* Sections */
.rl-page .rl-section{ margin-top:26px; }
.rl-page .rl-section-head,
.rl-page .rl-section-head{ margin-bottom:10px; }
.rl-page .rl-section-head p,
.rl-page .rl-section-head p{ margin:6px 0 0; color:#475569; max-width:100% !important; }

/* Tables */
.rl-page .rl-table-scroll{
  width:100%;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  border-radius:18px;
  border:1px solid #e2e8f0;
  background:#fff;
}

/* If a theme sets tables to display:block, force table layout inside VLN wrapper */
.rl-page table{ display:table; border-collapse:collapse; }

.rl-page .rl-table,
.rl-page .rl-compare-table{
  width:100%;
  border-collapse:collapse;
  table-layout:auto;
  font-size:13px;
}

/* Default: allow tables to shrink on mobile without forcing huge min-width.
   If you need horizontal scroll, add data-vln-table="scroll" on the table. */
.rl-page .rl-table[data-vln-table="scroll"],
.rl-page .rl-compare-table[data-vln-table="scroll"]{
  min-width:640px;
}

.rl-page .rl-table th,
.rl-page .rl-table td,
.rl-page .rl-compare-table th,
.rl-page .rl-compare-table td{
  border-bottom:1px solid #e2e8f0;
  padding:10px 10px;
  text-align:left;
  vertical-align:top;
}

@media (max-width:640px){
  .rl-page .rl-table th,
  .rl-page .rl-table td,
  .rl-page .rl-compare-table th,
  .rl-page .rl-compare-table td{
    padding:8px 8px;
  }
}

.rl-page .rl-table thead th,
.rl-page .rl-compare-table thead th{
  background:#f8fafc;
  color:#0f172a;
  font-weight:850;
}

/* Keep key cells (like “30-year fixed”) on one line */
.rl-page .rl-table th:first-child,
.rl-page .rl-table td:first-child{
  white-space:nowrap;
  width:46%;
}
.rl-page .rl-table th:not(:first-child),
.rl-page .rl-table td:not(:first-child){
  white-space:nowrap;
}

/* Tool shell */
.rl-page .rl-tool-shell{
  border-radius:24px;
  border:1px solid #e2e8f0;
  background:rgba(248,250,252,.92);
  padding:16px;
  box-shadow:0 12px 34px rgba(15,23,42,.10), 0 2px 10px rgba(15,23,42,.06);
}
@media (max-width:640px){ .rl-page .rl-tool-shell{ padding:12px; } }

.rl-page .rl-tool-grid{
  display:grid;
  /* Default: equal split for general two-column content (prevents clipped tables). */
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:16px;
}

/* Tool shells: slightly wider left column (inputs) than right (results) */
.rl-page .rl-tool-shell .rl-tool-grid{
  grid-template-columns:minmax(0,1.15fr) minmax(0,1.1fr);
}

.rl-page .rl-tool-grid > *{ min-width:0; }
@media (max-width:900px){
  .rl-page .rl-tool-grid{ grid-template-columns:minmax(0,1fr); }
  .rl-page .rl-tool-shell .rl-tool-grid{ grid-template-columns:minmax(0,1fr); }
}

.rl-page .rl-pane,
.rl-page .rl-form,
.rl-page .rl-result{
  border-radius:18px;
  border:1px solid #e2e8f0;
  background:#fff;
  padding:18px 18px 16px;
  box-shadow:0 12px 30px rgba(15,23,42,.08);
  min-width:0;
}
@media (max-width:640px){
  .rl-page .rl-pane,
  .rl-page .rl-form,
  .rl-page .rl-result{
    padding:14px 14px 12px;
  }
}

.rl-page .rl-pane-title{
  font-size:15px;
  font-weight:950;
  margin:0 0 10px;
  color:#0F1F4A;
}

/* Form fields */
.rl-page .rl-row-2,
.rl-page .rl-form-row{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}
@media (max-width:640px){
  .rl-page .rl-row-2,
  .rl-page .rl-form-row{ grid-template-columns:minmax(0,1fr); }
}

.rl-page .rl-field,
.rl-page .rl-form-group{ display:flex; flex-direction:column; min-width:0; margin-bottom:12px; }

.rl-page .rl-field label,
.rl-page .rl-form-label{ font-weight:850; margin-bottom:6px; color:#0f172a; display:block; }

.rl-page .rl-field input,
.rl-page .rl-field select,
.rl-page .rl-form-input,
.rl-page .rl-form-select{
  border-radius:12px;
  border:1px solid #e2e8f0;
  padding:10px 10px;
  background:#fff;
  color:#0f172a;
  font-size:14px;
  width:100%;
}

.rl-page .rl-field input:focus,
.rl-page .rl-field select:focus,
.rl-page .rl-form-input:focus,
.rl-page .rl-form-select:focus{
  outline:none;
  border-color:#C8102E;
  box-shadow:0 0 0 1px rgba(200,16,46,.35);
}

.rl-page .rl-field input[type="range"]{ width:100%; }

.rl-page .rl-range-row{
  display:flex;
  justify-content:space-between;
  gap:8px;
  margin-top:6px;
  color:#475569;
  font-size:12.5px;
}

.rl-page .rl-help,
.rl-page .rl-form-help{ margin-top:6px; color:#475569; font-size:12.5px; line-height:1.55; }

.rl-page .rl-error,
.rl-page .rl-form-error{ margin-top:10px; color:#dc2626; font-weight:750; }

/* Callouts */
.rl-page .rl-callout{
  border-radius:18px;
  border:1px solid #e2e8f0;
  background:#fff;
  padding:12px 12px 10px;
  box-shadow:0 12px 30px rgba(15,23,42,.08);
  margin-top:12px;
}
.rl-page .rl-callout h3{ font-size:15px; margin:0 0 6px; }
.rl-page .rl-callout p{ margin:0; color:#475569; font-size:13px; line-height:1.6; }

.rl-page .rl-callout-warn{ border-color:#fed7aa; background:linear-gradient(180deg,#fffbeb 0%, #fff 100%); }
.rl-page .rl-callout-blue{ border-color:#bfdbfe; background:linear-gradient(180deg,#eff6ff 0%, #fff 100%); }

/* Results */
.rl-page .rl-result-main{
  border-radius:18px;
  border:1px solid #e2e8f0;
  background:linear-gradient(180deg,#f8fafc 0%, #fff 100%);
  padding:16px 16px 14px;
  margin-bottom:12px;
}

.rl-page .rl-result-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
  margin-bottom:10px;
}

.rl-page .rl-tag{
  display:inline-flex;
  align-items:center;
  padding:6px 10px;
  border-radius:999px;
  background:#eef2ff;
  border:1px solid #c7d2fe;
  color:#0F1F4A;
  font-weight:950;
  font-size:12.5px;
  white-space:nowrap;
}

.rl-page .rl-note{ color:#475569; font-size:12.5px; }

.rl-page .rl-metrics{ display:grid; grid-template-columns:1fr; gap:12px; margin-top:10px; }

.rl-page .rl-metric .label{ color:#475569; font-size:12.5px; line-height:1.2; }
.rl-page .rl-metric .value{ margin-top:4px; color:#0f172a; font-size:26px; font-weight:950; line-height:1.15; }
.rl-page .rl-metric .value.small{ font-size:20px; font-weight:950; }

.rl-page .rl-stack{ display:grid; grid-template-columns:1fr; gap:12px; }
.rl-page .rl-mini-card{
  border-radius:18px;
  border:1px solid #e2e8f0;
  background:linear-gradient(180deg,#fff 0%, #f8fafc 100%);
  padding:12px 12px 10px;
  box-shadow:0 12px 30px rgba(15,23,42,.08);
}

.rl-page .rl-mini-card h3{ font-size:15px; margin:0 0 8px; }

.rl-page .rl-kv-list{ list-style:none; padding:0; margin:0 0 8px; color:#475569; }
.rl-page .rl-kv-list li{ display:flex; justify-content:space-between; gap:10px; margin-bottom:6px; }
.rl-page .rl-kv-list span:last-child{ font-weight:850; color:#0f172a; white-space:nowrap; }

.rl-page .rl-stats{ margin:0; }
.rl-page .rl-stats div{ display:flex; justify-content:space-between; gap:10px; margin-bottom:6px; color:#475569; }
.rl-page .rl-stats dt{ font-weight:700; }
.rl-page .rl-stats dd{ margin:0; font-weight:850; color:#0f172a; white-space:nowrap; }

/* Traffic cards */
.rl-page .rl-traffic-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
@media (max-width:960px){ .rl-page .rl-traffic-grid{ grid-template-columns:minmax(0,1fr); } }

.rl-page .rl-traffic-card{
  border-radius:18px;
  background:#fff;
  padding:12px 12px 10px;
  box-shadow:0 12px 30px rgba(15,23,42,.08);
  min-width:0;
  border:1px solid #e2e8f0;
}
.rl-page .rl-traffic-card[data-tone="green"]{ border-color:rgba(22,163,74,.35); }
.rl-page .rl-traffic-card[data-tone="yellow"]{ border-color:rgba(202,138,4,.35); }
.rl-page .rl-traffic-card[data-tone="red"]{ border-color:rgba(220,38,38,.30); }

.rl-page .rl-traffic-title{ margin:0 0 6px; font-size:16px; font-weight:950; line-height:1.22; }
.rl-page .rl-traffic-title.green{ color:#16a34a; }
.rl-page .rl-traffic-title.yellow{ color:#ca8a04; }
.rl-page .rl-traffic-title.red{ color:#dc2626; }

/* FAQ */
.rl-page .rl-faq,
.rl-page .rl-faq-list{
  margin-top:12px;
  border:1px solid #e2e8f0;
  border-radius:24px;
  background:#fff;
  overflow:hidden;
  box-shadow:0 18px 45px rgba(15,23,42,.10);
}

.rl-page .rl-faq details,
.rl-page .rl-faq-item{ border:0; }

.rl-page .rl-faq details:not(:first-child),
.rl-page .rl-faq-item:not(:first-child){ border-top:1px solid #e2e8f0; }

.rl-page .rl-faq summary,
.rl-page .rl-faq-item summary{
  cursor:pointer;
  list-style:none;
  padding:16px 16px;
  font-weight:950;
  color:#0f172a;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

.rl-page .rl-faq summary::-webkit-details-marker,
.rl-page .rl-faq-item summary::-webkit-details-marker{ display:none; }

/* Default +/- icon if page doesn't provide custom icon */
.rl-page .rl-faq summary:after{
  content:"+";
  width:28px; height:28px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  border:1px solid #c7d2fe;
  background:#f8fafc;
  color:#64748b;
  font-weight:950;
  flex:0 0 auto;
}

.rl-page .rl-faq details[open] summary:after{ content:"–"; }

.rl-page .rl-faq .ans,
.rl-page .rl-faqBody{
  border-top:1px solid #e2e8f0;
  padding:12px 16px 16px;
}

.rl-page .rl-faq .ans p{ margin:0; color:#475569; }

/* References */
.rl-page .rl-refs,
.rl-page .rl-sources{
  margin-top:12px;
  border:1px solid #e2e8f0;
  border-radius:24px;
  background:#fff;
  box-shadow:0 18px 45px rgba(15,23,42,.10);
  overflow:hidden;
}

.rl-page .rl-refs-inner{ padding:16px 16px 14px; }
.rl-page .rl-refs-label{ margin:0 0 10px; color:#475569; font-weight:850; font-size:12.5px; }

.rl-page .rl-refs ul,
.rl-page .rl-sources-list{
  margin:0 !important;
  padding-left:18px !important;
  list-style-type:disc !important;
  list-style-position:outside !important;
  color:#475569;
}

.rl-page .rl-refs li,
.rl-page .rl-sources-list li{ margin:8px 0; display:list-item !important; }

/* Utility: visually hidden */
.rl-page .rl-sr-only{
  position:absolute !important;
  left:-9999px !important;
  width:1px !important;
  height:1px !important;
  overflow:hidden !important;
}


/* Compare table best row highlight */
.rl-page .rl-best-row td{
  background:linear-gradient(90deg, rgba(22,163,74,.10) 0%, rgba(22,163,74,.04) 100%);
}
.rl-page .rl-best-row td:first-child{
  position:relative;
}
.rl-page .rl-best-row td:first-child:before{
  content:"";
  position:absolute;
  left:0; top:0; bottom:0;
  width:4px;
  background:#16a34a;
}

/* Level pill (readiness/service/property) */
.rl-page .rl-pill,
.rl-page #vaReadyLevelPill,
.rl-page #serviceLevelPill,
.rl-page #propertyLevelPill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid #c7d2fe;
  background:#eef2ff;
  color:#0F1F4A;
  font-weight:950;
  font-size:12.5px;
  white-space:nowrap;
}

.rl-page .rl-pill[data-level="ready"],
.rl-page #vaReadyLevelPill[data-level="ready"],
.rl-page #serviceLevelPill[data-level="ready"],
.rl-page #propertyLevelPill[data-level="ready"]{
  background:rgba(22,163,74,.10);
  border-color:rgba(22,163,74,.35);
  color:#15803d;
}

.rl-page .rl-pill[data-level="close"],
.rl-page #vaReadyLevelPill[data-level="close"],
.rl-page #serviceLevelPill[data-level="close"],
.rl-page #propertyLevelPill[data-level="close"]{
  background:rgba(202,138,4,.10);
  border-color:rgba(202,138,4,.35);
  color:#a16207;
}

.rl-page .rl-pill[data-level="prep"],
.rl-page #vaReadyLevelPill[data-level="prep"],
.rl-page #serviceLevelPill[data-level="prep"],
.rl-page #propertyLevelPill[data-level="prep"]{
  background:rgba(220,38,38,.08);
  border-color:rgba(220,38,38,.28);
  color:#b91c1c;
}

/* Score bar (optional) */
.rl-page .rl-score-track{
  height:10px;
  border-radius:999px;
  background:#e2e8f0;
  overflow:hidden;
}
.rl-page .rl-score-bar,
.rl-page #vaReadyScoreBar,
.rl-page #serviceScoreBar,
.rl-page #propertyScoreBar{
  height:10px;
  border-radius:999px;
  width:0%;
  background:#0F1F4A;
  transition:width .25s ease;
}



/* ===== Builder/Divi safety nets ===== */

/* Divi sometimes injects <br> between pill links and inside paragraphs */
.rl-page .rl-pills br,
.rl-page .rl-pills br,
.rl-page .rl-hero-lead br,
.rl-page .rl-hero-lead br { display:none !important; }

/* Divi sometimes injects <p>&nbsp;</p> into grid wrappers (breaks layout) */
.rl-page .rl-tool-grid > p,
.rl-page .rl-tool-grid > p,
.rl-page .rl-tool-grid > br,
.rl-page .rl-tool-grid > br,
.rl-page .rl-row-2 > p,
.rl-page .rl-row-2 > p,
.rl-page .rl-row-2 > br,
.rl-page .rl-row-2 > br,
.rl-page .rl-btn-row > p,
.rl-page .rl-btn-row > p,
.rl-page .rl-btn-row > br,
.rl-page .rl-btn-row > br,
.rl-page .rl-result-top > p,
.rl-page .rl-result-top > p,
.rl-page .rl-result-top > br,
.rl-page .rl-result-top > br { display:none !important; margin:0 !important; padding:0 !important; }

/* Force primary/success button text to white (Divi can override link colors) */
.rl-page a.rl-btn.rl-btn--primary,
.rl-page a.rl-btn.rl-btn--primary,
.rl-page a.rl-btn.rl-btn--success,
.rl-page a.rl-btn.rl-btn--success { color:#fff !important; -webkit-text-fill-color:#fff !important; }

/* Force compare button text to green (Divi can override link colors via -webkit-text-fill-color) */
.rl-page a.rl-btn.rl-btn--compare,
.rl-page a.rl-btn.rl-btn--compare,
.rl-page button.rl-btn.rl-btn--compare,
.rl-page button.rl-btn.rl-btn--compare {
  color:#15803d !important;
  -webkit-text-fill-color:#15803d !important;
}

/* Lane tones */
.rl-page .rl-lane-green,
.rl-page .rl-lane-green { color:#15803d !important; }
.rl-page .rl-lane-yellow,
.rl-page .rl-lane-yellow { color:#ca8a04 !important; }
.rl-page .rl-lane-red,
.rl-page .rl-lane-red { color:#dc2626 !important; }

/* ============================================================
   Mobile-only unboxing (Desktop stays identical)

   Why this exists:
   - On mobile, the gradient wrapper + stacked cards/pills makes
     the content column too narrow and wastes above-the-fold space.
   - We keep the desktop design untouched.

   What this does (<=760px):
   - Plain white wrapper background (no gradient)
   - Remove borders/shadows/radius on “card” containers
   - Remove extra padding (wrapper + card-inner)
   - Hide breadcrumb / eyebrow pill / sources-at-top / jump pills
   ============================================================ */

@media (max-width: 760px){
  /* 1) Wrapper: no gradient, no extra padding */
  .rl-page,
  .rl-page{
    background: #ffffff !important;
    padding: 0 !important;
  }

  .rl-page .rl-wrap,
  .rl-page .rl-wrap{
    padding: 0 !important;
  }

  /* 2) Remove boxed containers (keep structure, lose the chrome) */
  .rl-page .rl-card,
  .rl-page .rl-card,
  .rl-page .rl-section,
  .rl-page .rl-section,
  .rl-page .rl-hero-quick,
  .rl-page .rl-hero-quick,
  .rl-page .rl-quick-card,
  .rl-page .rl-quick-card,
  .rl-page .rl-quick-card,
  .rl-page .rl-quick-card,
  .rl-page .rl-tool-shell,
  .rl-page .rl-tool-shell,
  .rl-page .rl-pane,
  .rl-page .rl-pane,
  .rl-page .rl-form,
  .rl-page .rl-form,
  .rl-page .rl-result,
  .rl-page .rl-result,
  .rl-page .rl-types-grid,
  .rl-page .rl-types-grid,
  .rl-page .rl-type-tabs,
  .rl-page .rl-type-tabs,
  .rl-page .rl-type-detail,
  .rl-page .rl-type-detail,
  .rl-page .rl-faq-list,
  .rl-page .rl-faq-list,
  .rl-page .rl-faq-item,
  .rl-page .rl-faq-item,
  .rl-page .rl-refs,
  .rl-page .rl-refs,
  .rl-page .rl-sources,
  .rl-page .rl-sources,
  .rl-page .rl-mini-card,
  .rl-page .rl-mini-card{
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
	    padding: 0 !important;
  }

  /* 3) Remove the inner padding that makes the text column skinny */
  .rl-page .rl-card-inner,
  .rl-page .rl-card-inner,
  .rl-page .rl-section-head,
  .rl-page .rl-section-head,
  .rl-page .rl-section-head,
  .rl-page .rl-section-head{
    padding: 0 !important;
  }

  /* 4) Hide above-the-fold “chrome” that wastes space */
  .rl-page .rl-breadcrumb,
  .rl-page .rl-breadcrumb,
  .rl-page .rl-eyebrow,
  .rl-page .rl-eyebrow,
  .rl-page .rl-eyebrow,
  .rl-page .rl-eyebrow,
  .rl-page .rl-hero-meta,
  .rl-page .rl-hero-meta,
  .rl-page .rl-hero .rl-meta,
  .rl-page .rl-hero .rl-meta,
  .rl-page .rl-hero-jumps,
  .rl-page .rl-hero-jumps,
  .rl-page .rl-pills,
  .rl-page .rl-pills{
    display: none !important;
  }

  /* 5) Keep things readable when we remove cards */
  .rl-page .rl-section,
  .rl-page .rl-section{
    margin: 18px 0 !important;
  }

  .rl-page .rl-hero,
  .rl-page .rl-hero{
    margin-bottom: 18px !important;
  }
}

/* =======================================================================
   DESKTOP CONSISTENCY PATCH
   -----------------------------------------------------------------------
   Some themes/builders apply navigation typography (uppercase + letter
   spacing) to <nav> elements and their links. That can leak into VLN
   breadcrumbs and make them look “more spaced” vs other pages.

   Also, if a builder wraps hero content in a flex column with the default
   align-items: stretch, inline-flex “pills” can be blockified and expand to
   full width. These rules harden the layout so the pill stays shrink-to-fit.

   Finally, earlier templates use vlnHero-* class variants; ensure their
   <strong> styles match the newer vln* classes.
   ======================================================================= */

/* Breadcrumbs: force normal casing and tight tracking */
.rl-page .rl-breadcrumb,
.rl-page .rl-breadcrumb a,
.rl-page .rl-breadcrumb span,
.rl-page .rl-breadcrumb,
.rl-page .rl-breadcrumb a,
.rl-page .rl-breadcrumb span{
  text-transform: none !important;
  letter-spacing: normal !important;
}

/* Eyebrow pill: keep shrink-to-fit even inside flex wrappers */
.rl-page .rl-eyebrow,
.rl-page .rl-eyebrow,
.rl-page .rl-eyebrow,
.rl-page .rl-eyebrow{
  width: fit-content;
  max-width: 100%;
  align-self: flex-start;
  white-space: normal;
}

/* Legacy hero variants: match strong styling to newer classes */
.rl-page .rl-eyebrow strong,
.rl-page .rl-eyebrow strong{
  color: var(--vlnGood);
  font-weight: 950;
}

.rl-page .rl-hero-meta strong,
.rl-page .rl-hero-meta strong{
  color: var(--vlnInk);
  font-weight: 900;
}

/* =======================================================================
   VLN MOBILE FIXES
   1) Stop iOS/mobile horizontal “page drift” (text sliding off-screen)
   2) Keep the light-blue bullet/quick cards on mobile (requested)
   ======================================================================= */

/* Skip-link: hide without pushing content far off-canvas (prevents x-overflow on some mobile browsers) */
.rl-page .rl-skip,
.rl-page .rl-skip{
  left: 0 !important;
  top: 0 !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
}

.rl-page .rl-skip:focus,
.rl-page .rl-skip:focus{
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 10px 12px !important;
  overflow: visible !important;
  clip: auto !important;
  clip-path: none !important;
  left: 12px !important;
  top: 12px !important;
  background: #ffffff !important;
  color: var(--ink) !important;
  border: 2px solid var(--brand) !important;
  border-radius: 12px !important;
  font-weight: 900 !important;
  z-index: 9999 !important;
}

@media (max-width: 760px){
  /* Prevent any child overflow from turning into page-level horizontal scroll */
  .rl-page,
  .rl-page{
    overflow-x: hidden !important;
  }

  /* Keep the “bullet section” cards (Quick Answers / takeaways) on mobile */
  .rl-page .rl-quick-card,
  .rl-page .rl-quick-card,
  .rl-page .rl-quick-card,
  .rl-page .rl-quick-card{
    background: #ffffff !important;
    border: 1px solid #bfdbfe !important; /* light blue */
    border-radius: 18px !important;
    padding: 14px 14px 12px !important;
    box-shadow: none !important;
  }

  /* Keep normal bullets inside those cards */
  .rl-page .rl-quick-card ul,
  .rl-page .rl-quick-card ul,
  .rl-page .rl-quick-card ul,
  .rl-page .rl-quick-card ul{
    padding-left: 10px !important;
    list-style: disc !important;
  }

  /* Reduce scroll-chaining into the page when swiping horizontally in a table/pill scroller */
  .rl-page .rl-table-scroll,
  .rl-page .rl-table-scroll,
  .rl-page .rl-pills,
  .rl-page .rl-pills{
    overscroll-behavior-x: contain;
  }
}

/* ==========================================================
   Builder-proof overrides
   Some page builders (ex: Divi) inject module CSS late and
   can override link colors, fonts, and display properties.
   These rules keep the VLN design consistent across pages.
   ========================================================== */

.rl-page{
  background: linear-gradient(180deg, #eaf2ff 0%, #f6f9ff 42%, #ffffff 100%) !important;
  padding: 44px 0 !important;
}

.rl-page :is(h1,h2,h3,h4,h5,h6,p,ul,ol,li,a,span,strong,em,small,button,input,select,textarea,label,summary,dt,dd){
  font-family: var(--vlnFont) !important;
}

.rl-page :is(h1,h2,h3,h4,h5,h6){
  color: var(--vlnHeading) !important;
}

/* Breadcrumbs must stay compact + dark (not theme-blue) */
.rl-page .rl-breadcrumb{
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
}
.rl-page .rl-breadcrumb a{
  color: var(--vlnInk) !important;
  text-decoration: none !important;
}

.rl-page .rl-breadcrumb,
.rl-page .rl-breadcrumb *{
  text-transform: none !important;
  letter-spacing: normal !important;
}
.rl-page .rl-breadcrumb .sep{
  color: var(--vlnMuted) !important;
}

/* Eyebrow pill must hug content (not stretch full width) */
.rl-page .rl-eyebrow,
.rl-page .rl-eyebrow{
  display: inline-flex !important;
  width: auto !important;
  max-width: 100% !important;
  align-self: flex-start !important;
}

.rl-page .rl-eyebrow,
.rl-page .rl-eyebrow *,
.rl-page .rl-eyebrow,
.rl-page .rl-eyebrow *{
  text-transform: none !important;
  letter-spacing: normal !important;
}

/* Default link color inside VLN pages (exclude buttons) */
.rl-page a:not(.rl-btn):not(.rl-pill):not(.rl-pill){
  color: var(--vlnHeading) !important;
}

/* Pills should not inherit theme link styles */
.rl-page .rl-pill,
.rl-page .rl-pill{
  color: var(--vlnHeadingSoft, #0b2a6f) !important;
  text-decoration: none !important;
}

.rl-page .rl-pill,
.rl-page .rl-pill{
  text-transform: none !important;
  letter-spacing: normal !important;
}

/* ====================================================================== 
   VLN CONSISTENCY OVERRIDES (v1.4.6)
   Purpose: Make every VLN page render identically regardless of theme
   link/heading styles or editor-inserted <br> tags.
====================================================================== */

.rl-page,
.rl-page{
  --vlnFont: system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji";
  --vlnInk: #0f172a;
  --vlnHeading: #0F1F4A;
  --vlnMuted: #475569;
  --vlnLine: rgba(200,16,46,.25);
  --vlnHeadingSoft: #0F1F4A;
  --vlnGood: #16a34a;
  --vlnGreenBg: rgba(255,255,255,.85);
  --vlnGreenLine: rgba(22,163,74,.35);
}

/* Force our gradient + typography (beat most theme styles) */
.rl-page,
.rl-page{
  font-family: var(--vlnFont) !important;
  color: var(--vlnInk) !important;
  background: linear-gradient(180deg, #e8f1ff 0%, #ffffff 30%) !important;
}

.rl-page :where(p,li,span,small,strong,em,summary,label,button,input,select,textarea,th,td,dt,dd),
.rl-page :where(p,li,span,small,strong,em,summary,label,button,input,select,textarea,th,td,dt,dd){
  font-family: var(--vlnFont) !important;
}

/* Headings */
.rl-page :where(h1,h2,h3,h4),
.rl-page :where(h1,h2,h3,h4){
  color: var(--vlnHeading) !important;
}

/* Text links (do NOT clobber buttons or pills) */
.rl-page a:not(.rl-btn):not(.rl-pill):not(.rl-pill),
.rl-page a:not(.rl-btn):not(.rl-pill):not(.rl-pill){
  color: var(--vlnHeading) !important;
  text-decoration: none;
}
.rl-page a:not(.rl-btn):not(.rl-pill):not(.rl-pill):hover,
.rl-page a:not(.rl-btn):not(.rl-pill):not(.rl-pill):hover{
  text-decoration: underline;
}

/* Breadcrumb + Primary sources (meta) */
.rl-page .rl-breadcrumb,
.rl-page .rl-breadcrumb,
.rl-page .rl-meta,
.rl-page .rl-meta,
.rl-page .rl-hero-meta,
.rl-page .rl-hero-meta{
  color: var(--vlnMuted) !important;
}

.rl-page .rl-breadcrumb a,
.rl-page .rl-breadcrumb a{
  color: var(--vlnHeading) !important;
  text-decoration: none;
}
.rl-page .rl-breadcrumb a:hover,
.rl-page .rl-breadcrumb a:hover{
  text-decoration: underline;
}

.rl-page .rl-meta a,
.rl-page .rl-meta a,
.rl-page .rl-hero-meta a,
.rl-page .rl-hero-meta a{
  color: var(--vlnHeading) !important;
  font-weight: 800;
  text-decoration: none;
}
.rl-page .rl-meta a:hover,
.rl-page .rl-meta a:hover,
.rl-page .rl-hero-meta a:hover,
.rl-page .rl-hero-meta a:hover{
  text-decoration: underline;
}

/* Fix WP/Divi auto-inserted line breaks inside meta/breadcrumbs */
.rl-page .rl-meta br,
.rl-page .rl-meta br,
.rl-page .rl-hero-meta br,
.rl-page .rl-hero-meta br,
.rl-page .rl-breadcrumb br,
.rl-page .rl-breadcrumb br,
.rl-page .rl-eyebrow br,
.rl-page .rl-eyebrow br,
.rl-page .rl-eyebrow br,
.rl-page .rl-eyebrow br{
  display:none !important;
}

/* If the editor wraps items in <p>, neutralize block behavior */
.rl-page .rl-meta > p,
.rl-page .rl-meta > p,
.rl-page .rl-hero-meta > p,
.rl-page .rl-hero-meta > p{
  margin:0 !important;
  display:inline !important;
}

/* Ensure active pills keep their intended contrast even after link-color normalization */
.rl-page .rl-pill.is-active,
.rl-page .rl-pill.is-active,
.rl-page .rl-pill.is-active,
.rl-page .rl-pill.is-active{
  color:#fff !important;
}


/* === VLN consistency fixes (v1.4.7) === */
.rl-page .rl-meta,
.rl-page .rl-meta{
  display:flex !important;
  flex-wrap:wrap !important;
  align-items:center !important;
  gap:8px !important;
}
.rl-page .rl-meta > span,
.rl-page .rl-meta > span,
.rl-page .rl-meta > p,
.rl-page .rl-meta > p{
  display:inline-flex !important;
  flex-wrap:wrap !important;
  align-items:center !important;
  gap:8px !important;
}

/* Normalize card headings even if authors use h2/h3 */
.rl-page .rl-quick-card :is(h2,h3,h4),
.rl-page .rl-quick-card :is(h2,h3,h4){
  font-size:16px !important;
  line-height:1.2 !important;
  font-weight:900 !important;
  margin:0 0 10px !important;
  letter-spacing:-0.01em !important;
}

/* Eyebrow pill should hug content, never stretch full width */
.rl-page .rl-eyebrow,
.rl-page .rl-eyebrow,
.rl-page .rl-eyebrow,
.rl-page .rl-eyebrow{
  width:max-content !important;
  max-width:100% !important;
}

/* =====================================================================
   VLN hard-lock styling (v1.4.8)
   Goal: different WordPress templates/builders should still render
   *identical* VLN pages.

   Strategy:
   1) Boost selector specificity with ".rl-page.rl-page" so our rules win
      even against theme rules that use !important.
   2) Explicitly set heading, pill, and breadcrumb colors (no inheritance).
   3) Mobile: hide the decorative chrome (gradient/bg + breadcrumb + eyebrow)
      per design requirement.
   ===================================================================== */

/* Base typography + link reset (scoped) */
.rl-page.rl-page,
.rl-page.rl-page{
  font-family: var(--vlnFont, system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif) !important;
  color: var(--vlnInk, #0f172a) !important;
}

/* Headings: always brand navy */
.rl-page.rl-page h1,
.rl-page.rl-page h2,
.rl-page.rl-page h3,
.rl-page.rl-page h4,
.rl-page.rl-page h1,
.rl-page.rl-page h2,
.rl-page.rl-page h3,
.rl-page.rl-page h4{
  color: var(--vlnHeading, #0F1F4A) !important;
}

/* Non-pill/non-button links use brand navy (keeps sources consistent) */
.rl-page.rl-page a:not(.rl-btn):not(.rl-pill):not(.rl-pill),
.rl-page.rl-page a:not(.rl-btn):not(.rl-pill):not(.rl-pill){
  color: var(--vlnHeading, #0F1F4A) !important;
}

/* Breadcrumbs: always muted grey (links included) */
.rl-page.rl-page .rl-breadcrumb,
.rl-page.rl-page .rl-breadcrumb a,
.rl-page.rl-page .rl-breadcrumb,
.rl-page.rl-page .rl-breadcrumb a{
  color: var(--vlnMuted, #475569) !important;
}
.rl-page.rl-page .rl-breadcrumb a:hover,
.rl-page.rl-page .rl-breadcrumb a:hover{
  color: var(--vlnHeading, #0F1F4A) !important;
  text-decoration: underline;
}

/* Pills: always brand navy text */
.rl-page.rl-page .rl-pill,
.rl-page.rl-page .rl-pill,
.rl-page.rl-page .rl-pill,
.rl-page.rl-page .rl-pill{
  color: var(--vlnHeading, #0F1F4A) !important;
  border-color: #bcd3ff !important;
}

/* Ensure themes can't restyle pill text via -webkit-text-fill-color */
.rl-page.rl-page .rl-pill,
.rl-page.rl-page .rl-pill,
.rl-page.rl-page .rl-pill,
.rl-page.rl-page .rl-pill{
  -webkit-text-fill-color: var(--vlnHeading, #0F1F4A) !important;
}

/* Mobile: hide gradient + breadcrumb + eyebrow pill */
@media (max-width: 720px){
  .rl-page.rl-page,
  .rl-page.rl-page{
    background: #fff !important;
  }

  .rl-page.rl-page .rl-breadcrumb,
  .rl-page.rl-page .rl-breadcrumb,
  .rl-page.rl-page .rl-eyebrow,
  .rl-page.rl-page .rl-eyebrow,
  .rl-page.rl-page .rl-eyebrow,
  .rl-page.rl-page .rl-eyebrow{
    display:none !important;
  }
}

/* =======================
   PATCH 1.4.11
   Fixes:
   - Tables with long text columns getting clipped/truncated (wrap text)
   - FAQ focus/active outline getting clipped by the accordion container (use inset ring)
   ======================= */

/* TABLES: allow text wrapping in .rl-table/.rl-table by default.
   Numeric body cells stay non-wrapping via the .num class. */
.rl-page.rl-page .rl-table th,
.rl-page.rl-page .rl-table td,
.rl-page.rl-page .rl-table th,
.rl-page.rl-page .rl-table td{
  white-space: normal !important;
  overflow-wrap: anywhere;
  word-break: normal;
}

/* Keep numeric body cells tidy */
.rl-page.rl-page .rl-table tbody td.num,
.rl-page.rl-page .rl-table tbody td.num{
  white-space: nowrap !important;
}

/* Header labels can wrap even if marked .num (prevents truncated headings like “Points (at cost)”). */
.rl-page.rl-page .rl-table thead th.num,
.rl-page.rl-page .rl-table thead th.num{
  white-space: normal !important;
}

/* FAQ: replace browser outline (which can get clipped) with an inset focus/open ring */
.rl-page.rl-page .rl-faq summary:focus,
.rl-page.rl-page .rl-faq summary:focus-visible,
.rl-page.rl-page .rl-faq summary:focus,
.rl-page.rl-page .rl-faq summary:focus-visible{
  outline: none !important;
}

.rl-page.rl-page .rl-faq summary,
.rl-page.rl-page .rl-faq summary{
  border-radius: 16px;
}

.rl-page.rl-page .rl-faq summary:focus-visible,
.rl-page.rl-page .rl-faq details[open] > summary,
.rl-page.rl-page .rl-faq summary:focus-visible,
.rl-page.rl-page .rl-faq details[open] > summary{
  box-shadow: inset 0 0 0 2px rgba(220,37,56,.45);
}

/* =======================
   PATCH 1.4.12
   Fix:
   - FAQ open/focus ring corners: replace inset box-shadow with a true rounded border drawn inside
     the summary row. This eliminates occasional anti-alias “missing corner” artifacts.
   ======================= */

/* Turn off the inset shadow ring from 1.4.11 */
.rl-page.rl-page .rl-faq summary:focus-visible,
.rl-page.rl-page .rl-faq details[open] > summary,
.rl-page.rl-page .rl-faq summary:focus-visible,
.rl-page.rl-page .rl-faq details[open] > summary{
  box-shadow: none !important;
}

/* Draw a crisp rounded ring *inside* the summary row */
.rl-page.rl-page .rl-faq summary::before,
.rl-page.rl-page .rl-faq summary::before{
  content: "";
  position: absolute;
  inset: 2px;
  border-radius: 14px;
  border: 2px solid rgba(220,37,56,.45);
  opacity: 0;
  pointer-events: none;
  transition: opacity .15s ease;
}

.rl-page.rl-page .rl-faq summary:focus-visible::before,
.rl-page.rl-page .rl-faq details[open] > summary::before,
.rl-page.rl-page .rl-faq summary:focus-visible::before,
.rl-page.rl-page .rl-faq details[open] > summary::before{
  opacity: 1;
}


/* =======================
   1.4.13 PATCH
   - Sticky results column for tool layouts (desktop)
   - Center CTA buttons in result cards
   ======================= */

@media (min-width: 901px){
  /* Make the RIGHT column (results) stay visible while scrolling long tool inputs.
     Scope: only tool grids inside .rl-tool-shell so snapshot grids are unaffected. */
  .rl-page .rl-tool-shell .rl-tool-grid > .rl-pane:nth-child(2),
  .rl-page .rl-tool-shell .rl-tool-grid > .rl-pane:nth-child(2){
    position: sticky;
    top: var(--vlnStickyTop, 12px);
    align-self: start;
  }
}

/* Center CTA buttons inside result cards (e.g., Credit tool snapshot CTAs) */
.rl-page .rl-result-main .rl-btn-row,
.rl-page .rl-result-main .rl-btn-row{
  justify-content: center;
}

/* Defensive: ensure button label looks centered even if a theme overrides link text-align */
.rl-page .rl-btn,
.rl-page .rl-btn{
  text-align: center;
}

/* -------------------------------------------------------------------------- */
/* VA Affordability Calculator (embed module)                                 */
/* Markup: any element with [data-va-affcalc]. No inline <style> needed.      */
/* -------------------------------------------------------------------------- */

[data-va-affcalc] {
  --good: #15803d;
  --warn: #c2410c;
  --bad: #b91c1c;

  --ink: #0b1f3a;
  --muted: #5b6573;
  --border: rgba(11, 31, 58, 0.14);
  --surface: #ffffff;
  --link: #C8102E;
  --focus: #0b1f3a;
  --track: #eef2f7;
  --thumb-border: var(--link);
  --thumb-active: var(--ink);

  /* Status color */
  --status: var(--good);

  /* DTI meter thresholds mapped to a 0–60% display scale */
  --dti36: 60%;
  --dti41: 68.3333%;
  --dtiPos: 0%;

  font-family: "Inter", -apple-system, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--ink);
}

[data-va-affcalc].is-good { --status: var(--good); }
[data-va-affcalc].is-warn { --status: var(--warn); }
[data-va-affcalc].is-bad  { --status: var(--bad); }

[data-va-affcalc],
[data-va-affcalc] * { box-sizing: border-box; }

[data-va-affcalc] {
  display: flex;
  gap: 20px;
  width: 100%;
  max-width: 1100px;
  margin: 16px auto;
  padding: 18px;
  background: var(--surface);
  border-radius: 14px;
  border: 1px solid var(--border);
  box-shadow: 0 16px 44px rgba(11, 31, 58, 0.10);
}

[data-va-affcalc] .va-affcalc__col { flex: 1; min-width: 0; }

[data-va-affcalc] .va-affcalc__title {
  margin: 0 0 10px;
  font-size: 26px;
  line-height: 1.2;
  font-weight: 900;
  letter-spacing: -0.02em;
}

[data-va-affcalc] .va-affcalc__section { margin-bottom: 10px; }

[data-va-affcalc] .va-affcalc__label {
  display: block;
  font-size: 15px;
  font-weight: 800;
  color: #0b1f3a;
  margin-bottom: 6px;
}

[data-va-affcalc] .va-affcalc__label--small { font-size: 13px; margin: 0; }

[data-va-affcalc] .va-affcalc__input,
[data-va-affcalc] .va-affcalc__select {
  width: 100%;
  min-height: 44px;
  padding: 8px 10px;
  border: 1px solid rgba(11, 31, 58, 0.16);
  border-radius: 10px;
  background: #fff;
  color: #0b1f3a;
  font-size: 15px;
  box-shadow: none;
}

[data-va-affcalc] .va-affcalc__input[readonly] { background: rgba(11, 31, 58, 0.04); }
[data-va-affcalc] .va-affcalc__input--small { min-height: 40px; padding: 6px 10px; }

[data-va-affcalc] .va-affcalc__hint {
  margin: 6px 0 0;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.35;
}

[data-va-affcalc] .va-affcalc__muted { color: var(--muted); }
[data-va-affcalc] .va-affcalc__dot { margin: 0 6px; }

/* Location */
[data-va-affcalc] .va-affcalc__location-top {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: baseline;
  flex-wrap: wrap;
}

[data-va-affcalc] .va-affcalc__location-right {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
}

[data-va-affcalc] .va-affcalc__location-value { font-weight: 900; color: var(--ink); }

[data-va-affcalc] .va-affcalc__badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
  color: #0b1f3a;
  border: 1px solid rgba(11, 31, 58, 0.18);
  background: rgba(11, 31, 58, 0.05);
  line-height: 1.1;
}

[data-va-affcalc] .va-affcalc__location-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 6px;
}

[data-va-affcalc] .va-affcalc__linkbtn {
  appearance: none;
  background: none;
  border: 0;
  padding: 8px 0;
  min-height: 40px;
  cursor: pointer;
  color: var(--link);
  text-decoration: underline;
  font: inherit;
  font-size: 14px;
}

[data-va-affcalc] .va-affcalc__linkbtn--small {
  font-size: 13px;
  min-height: 34px;
  padding: 4px 0;
}

[data-va-affcalc] .va-affcalc__manual-location { margin-top: 8px; }

/* Grid */
[data-va-affcalc] .va-affcalc__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 10px;
}

[data-va-affcalc] .va-affcalc__grid-item { min-width: 0; }
[data-va-affcalc] .va-affcalc__grid-item--span { grid-column: 1 / -1; }

/* Sliders */
[data-va-affcalc] .va-affcalc__slider-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: center;
}

[data-va-affcalc] input[type="range"].va-affcalc__slider {
  width: 100%;
  height: 10px;
  border-radius: 999px;
  background: var(--track);
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}

[data-va-affcalc] input[type="range"].va-affcalc__slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px;
  height: 22px;
  background: #ffffff;
  border: 3px solid var(--thumb-border);
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
  transition: transform 0.12s ease, border-color 0.12s ease;
}

[data-va-affcalc] input[type="range"].va-affcalc__slider::-webkit-slider-thumb:active {
  transform: scale(1.04);
  border-color: var(--thumb-active);
}

[data-va-affcalc] input[type="range"].va-affcalc__slider::-moz-range-thumb {
  width: 22px;
  height: 22px;
  background: #ffffff;
  border: 3px solid var(--thumb-border);
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
}

[data-va-affcalc] .va-affcalc__output {
  min-width: 78px;
  text-align: right;
  font-weight: 900;
  color: var(--ink);
}

[data-va-affcalc] .va-affcalc__output--center {
  display: inline-block;
  font-weight: 900;
  color: var(--ink);
}

[data-va-affcalc] .va-affcalc__between {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  margin-top: 8px;
}

/* Taxes auto toggle */
[data-va-affcalc] .va-affcalc__row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: center;
}

[data-va-affcalc] .va-affcalc__row--tight {
  grid-template-columns: 1fr 140px;
  margin-top: 8px;
}

[data-va-affcalc] .va-affcalc__toggle {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  border: 1px solid rgba(11, 31, 58, 0.16);
  border-radius: 999px;
  padding: 8px 12px;
  background: rgba(11, 31, 58, 0.03);
  font-weight: 900;
  color: #0b1f3a;
  user-select: none;
  cursor: pointer;
}

[data-va-affcalc] .va-affcalc__toggle input { transform: translateY(1px); }

/* Results */
[data-va-affcalc] .va-affcalc__results {
  padding: 14px;
  border: 1px solid rgba(11, 31, 58, 0.16);
  border-radius: 14px;
  text-align: center;
}

[data-va-affcalc] .va-affcalc__results-title {
  margin: 0 0 8px;
  font-size: 18px;
  font-weight: 900;
}

[data-va-affcalc] .va-affcalc__price {
  font-size: 36px;
  font-weight: 900;
  line-height: 1.05;
  margin: 0 0 8px;
  color: var(--status);
}

[data-va-affcalc] .va-affcalc__pill {
  display: inline-block;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--status);
  color: #fff;
  font-weight: 900;
  font-size: 14px;
  margin-bottom: 8px;
}

[data-va-affcalc] .va-affcalc__meta { text-align: left; margin-top: 6px; }

[data-va-affcalc] .va-affcalc__meta-row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 14px;
  margin-bottom: 6px;
}

/* DTI meter */
[data-va-affcalc] .va-affcalc__dti-meter {
  position: relative;
  height: 10px;
  border-radius: 999px;
  background: linear-gradient(to right,
    var(--good) 0%,
    var(--good) var(--dti36),
    var(--warn) var(--dti36),
    var(--warn) var(--dti41),
    var(--bad)  var(--dti41),
    var(--bad)  100%
  );
  margin: 8px 0 10px;
}

[data-va-affcalc] .va-affcalc__dti-pointer {
  position: absolute;
  top: 50%;
  left: var(--dtiPos);
  width: 16px;
  height: 16px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: #fff;
  border: 3px solid var(--status);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
}

[data-va-affcalc] .va-affcalc__dti-tick {
  position: absolute;
  top: -18px;
  font-size: 11px;
  font-weight: 900;
  color: var(--muted);
}

[data-va-affcalc] .va-affcalc__dti-tick--36 { left: var(--dti36); transform: translateX(-50%); }
[data-va-affcalc] .va-affcalc__dti-tick--41 { left: var(--dti41); transform: translateX(-50%); }

[data-va-affcalc] .va-affcalc__meta-text {
  margin: 8px 0 0;
  font-size: 13.5px;
  line-height: 1.4;
  color: #0b1f3a;
}

[data-va-affcalc] .va-affcalc__alert {
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(185, 28, 28, 0.25);
  background: rgba(185, 28, 28, 0.06);
  color: #7f1d1d;
  text-align: left;
  font-size: 14px;
  line-height: 1.4;
}

[data-va-affcalc] .va-affcalc__cta {
  display: block;
  margin: 12px auto 0;
  text-decoration: none;
  text-align: center;
  font-weight: 900;
  font-size: 17px;
  padding: 12px 16px;
  border-radius: 12px;
  background: var(--link) !important;
  color: #fff !important;
  max-width: 84%;
}

[data-va-affcalc] .va-affcalc__cta:hover { filter: brightness(0.98); }

[data-va-affcalc] .va-affcalc__disclaimer {
  margin: 10px 0 0;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.35;
}

/* Breakdown */
[data-va-affcalc] .va-affcalc__breakdown {
  margin-top: 12px;
  border-top: 2px solid rgba(11, 31, 58, 0.08);
  padding-top: 10px;
}

[data-va-affcalc] .va-affcalc__break-row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px dotted rgba(11, 31, 58, 0.10);
  font-size: 15px;
}

[data-va-affcalc] .va-affcalc__break-row span:last-child { font-weight: 900; }

[data-va-affcalc] .va-affcalc__break-row--total {
  font-weight: 900;
  font-size: 16px;
  border-bottom: none;
}

[data-va-affcalc] .va-affcalc__break-row--muted {
  font-size: 13px;
  color: var(--muted);
  border-bottom: none;
  padding-top: 10px;
}

/* Chart */
[data-va-affcalc] .va-affcalc__chart {
  width: 100%;
  max-width: 250px;
  height: 250px;
  margin: 14px auto 0;
}

[data-va-affcalc] .va-affcalc__canvas {
  width: 100%;
  height: 100%;
  display: block;
}

/* Details */
[data-va-affcalc] .va-affcalc__details {
  margin-top: 10px;
  border: 1px solid rgba(11, 31, 58, 0.16);
  border-radius: 14px;
  padding: 10px 12px;
  background: rgba(11, 31, 58, 0.02);
}

[data-va-affcalc] .va-affcalc__details-summary {
  cursor: pointer;
  font-weight: 900;
  color: var(--ink);
  padding: 6px 2px;
}

[data-va-affcalc] .va-affcalc__details-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 10px;
}

/* Focus */
[data-va-affcalc] :focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

/* SR only */
[data-va-affcalc] .va-affcalc__sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Mobile */
@media (max-width: 767px) {
  [data-va-affcalc] { flex-direction: column; gap: 16px; padding: 14px; }
  [data-va-affcalc] .va-affcalc__grid { grid-template-columns: 1fr; }
  [data-va-affcalc] .va-affcalc__details-grid { grid-template-columns: 1fr; }
  [data-va-affcalc] .va-affcalc__chart { max-width: 100%; height: 220px; }
  [data-va-affcalc] .va-affcalc__cta { max-width: 100%; }
  [data-va-affcalc] .va-affcalc__row--tight { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  [data-va-affcalc] * { transition: none !important; scroll-behavior: auto !important; }
}

/* =========================================================
   VA Fee Scenarios Simulator
   - Scoped to [data-va-fee-sim] so it can be embedded anywhere (Divi-safe)
   - JS behavior is powered by plugin JS (no inline script needed)
========================================================= */

/* ========== Scope: everything is under [data-va-fee-sim] to avoid Divi/WP conflicts ========== */
[data-va-fee-sim]{
  /* Brand tokens (keep your palette) */
  --brand-400:#60a5fa;
  --brand-500:#DC2538;
  --brand-600:#C8102E;
  --brand-700:#1d4ed8;
  --brand-800:#1e40af;
  --text:#111827;
  --muted:#6b7280;
  --bg:#ffffff;
  --panel:#ffffff;
  --subtle:#f8fafc;
  --border:var(--brand-700);
  max-width:1100px;
  margin:24px auto;
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  font-size:14px;
  line-height:1.35;
  color:var(--text);
  background:transparent;
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
  color-scheme:light;
}

[data-va-fee-sim] *{box-sizing:border-box}

[data-va-fee-sim] button,
[data-va-fee-sim] input,
[data-va-fee-sim] select,
[data-va-fee-sim] a{font:inherit}

/* ---------- Layout ---------- */
[data-va-fee-sim] .vf-card{
  border:1px solid var(--border);
  border-radius:12px;
  padding:16px;
  background:var(--panel);
  box-shadow:0 1px 3px rgba(0,0,0,.04);
}

[data-va-fee-sim] .vf-grid{display:grid;gap:16px}

@media(min-width:960px){
  [data-va-fee-sim] .vf-grid-3{grid-template-columns:1fr 1fr 1fr}
}

[data-va-fee-sim] .vf-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px;gap:8px;flex-wrap:wrap}
[data-va-fee-sim] .vf-badges{display:flex;gap:6px;flex-wrap:wrap}
[data-va-fee-sim] .vf-row{display:grid;grid-template-columns:180px 1fr;gap:8px;align-items:start;margin:8px 0}
[data-va-fee-sim] .vf-row > label{color:var(--text);font-weight:700;padding-top:10px}

@media(max-width:680px){
  [data-va-fee-sim] .vf-row{grid-template-columns:1fr}
  [data-va-fee-sim] .vf-row > label{padding-top:0;margin-bottom:6px}
}

[data-va-fee-sim] .vf-control{min-width:0}
[data-va-fee-sim] .vf-inline{display:flex;gap:8px;flex-wrap:wrap;align-items:center}

/* ---------- Inputs ---------- */
[data-va-fee-sim] .vf-input,
[data-va-fee-sim] .vf-select{
  width:100%;
  padding:10px 12px;
  border:1px solid #d1d5db;
  border-radius:10px;
  font-size:16px;
  min-height:44px;
  background:#fff;
  color:var(--text);
}

[data-va-fee-sim] .vf-input[type=number]::-webkit-outer-spin-button,
[data-va-fee-sim] .vf-input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}

[data-va-fee-sim] .vf-input[type=number]{-moz-appearance:textfield}

[data-va-fee-sim] .vf-input:focus-visible,
[data-va-fee-sim] .vf-select:focus-visible{
  outline:none;
  border-color:#111827;
  box-shadow:0 0 0 3px rgba(17,24,39,.16);
}

[data-va-fee-sim] .vf-input[aria-invalid="true"],
[data-va-fee-sim] .vf-select[aria-invalid="true"]{
  border-color:#b91c1c;
  box-shadow:0 0 0 3px rgba(185,28,28,.18);
}

/* ---------- Text + badges ---------- */
[data-va-fee-sim] .vf-h{font-size:18px;font-weight:800;color:var(--text);margin:0}
[data-va-fee-sim] .vf-sub{font-size:12px;color:var(--muted);margin:6px 0 8px}
[data-va-fee-sim] .vf-sub.vf-sub-tight{margin:6px 0 0}
[data-va-fee-sim] .vf-muted{color:var(--muted)}

[data-va-fee-sim] .vf-pill{
  display:inline-block;
  padding:4px 8px;
  border-radius:999px;
  background:#f3f4f6;
  color:#374151;
  font-size:12px;
  white-space:nowrap;
}

[data-va-fee-sim] .vf-badge{
  font-size:11px;
  border:1px solid #e5e7eb;
  border-radius:999px;
  padding:2px 8px;
  background:#fafafa;
  color:#374151;
}

[data-va-fee-sim] .vf-hr{height:1px;background:#f1f5f9;margin:12px 0}

/* ---------- Messages ---------- */
[data-va-fee-sim] .vf-alert,
[data-va-fee-sim] .vf-toast{
  margin-top:10px;
  border-radius:10px;
  padding:10px 12px;
  font-size:12px;
}

[data-va-fee-sim] .vf-alert{
  color:#991b1b;background:#fee2e2;border:1px solid #fecaca;
}

[data-va-fee-sim] .vf-toast{
  color:#0f172a;background:#eff6ff;border:1px solid rgba(29,78,216,.35);
}

[data-va-fee-sim] .vf-field-error{margin-top:6px;font-size:12px;color:#b91c1c}

/* ---------- Actions ---------- */
[data-va-fee-sim] .vf-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}

@media(max-width:680px){
  [data-va-fee-sim] .vf-actions .vf-btn,
  [data-va-fee-sim] .vf-actions .vf-cta{flex:1 1 100%}
}

[data-va-fee-sim] .vf-btn{
  display:inline-flex;
  justify-content:center;
  align-items:center;
  gap:8px;
  background:#111827;
  color:#fff;
  border:1px solid transparent;
  border-radius:10px;
  padding:12px 16px;
  font-weight:800;
  cursor:pointer;
  min-height:44px;
  transition:transform .08s ease, box-shadow .12s ease, background-color .12s ease;
  user-select:none;
  -webkit-tap-highlight-color:transparent;
}

[data-va-fee-sim] .vf-btn:hover{box-shadow:0 6px 18px rgba(17,24,39,.12)}
[data-va-fee-sim] .vf-btn:active{transform:translateY(1px)}
[data-va-fee-sim] .vf-btn:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(200,16,46,.28), 0 6px 18px rgba(17,24,39,.12)}
[data-va-fee-sim] .vf-btn:disabled{opacity:.6;cursor:not-allowed}

/* ---------- CTA (clean blue gradient, no shimmer; improved contrast) ---------- */
[data-va-fee-sim] .vf-cta{
  display:inline-flex;
  justify-content:center;
  align-items:center;
  text-decoration:none;
  color:#fff;
  font-weight:900;
  padding:12px 18px;
  border-radius:12px;
  min-height:44px;
  background-image:linear-gradient(90deg,#1e40af 0%, #C8102E 55%, #DC2538 100%);
  background-size:100% 100%;
  box-shadow:0 8px 24px rgba(200,16,46,.35);
  border:1px solid rgba(13,27,76,.6);
  transition:transform .12s ease, box-shadow .12s ease;
  -webkit-tap-highlight-color:transparent;
  text-shadow:0 1px 2px rgba(0,0,0,.35);
}

[data-va-fee-sim] .vf-cta:hover{transform:translateY(-1px);box-shadow:0 10px 28px rgba(200,16,46,.45)}
[data-va-fee-sim] .vf-cta:active{transform:translateY(0)}
[data-va-fee-sim] .vf-cta:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(255,255,255,.95), 0 0 0 6px rgba(200,16,46,.35), 0 10px 28px rgba(200,16,46,.45)}

/* ---------- Scenarios ---------- */
[data-va-fee-sim] .vf-results{margin-top:16px}
[data-va-fee-sim] .vf-scen{border:1px solid var(--border);border-radius:12px;padding:12px;background:#fcfdff}
[data-va-fee-sim] .vf-scen h4{margin:0 0 6px;font-size:14px}
[data-va-fee-sim] .vf-kv{display:flex;justify-content:space-between;gap:12px;margin:6px 0}
[data-va-fee-sim] .vf-kv b{color:var(--text)}
[data-va-fee-sim] .vf-total{font-weight:900;font-size:18px}
[data-va-fee-sim] .vf-explain{font-size:12px;color:#374151;margin-top:8px}

[data-va-fee-sim] .vf-note{
  font-size:12px;
  color:#4b5563;
  background:#f9fafb;
  border:1px dashed #e5e7eb;
  border-radius:10px;
  padding:10px;
  margin-top:12px;
}

/* ---------- Dark theme (only if you set data-theme="dark") ---------- */
[data-va-fee-sim][data-theme="dark"]{
  --text:#f8fafc;
  --muted:#94a3b8;
  --bg:#0b0d10;
  --panel:#0b0d10;
  --subtle:#0f1216;
  --border:#1e2a55;
  color-scheme:dark;
}

[data-va-fee-sim][data-theme="dark"] .vf-card,
[data-va-fee-sim][data-theme="dark"] .vf-scen{background:var(--subtle);border-color:var(--border);box-shadow:none}
[data-va-fee-sim][data-theme="dark"] .vf-hr{background:#1f2937}
[data-va-fee-sim][data-theme="dark"] .vf-input,
[data-va-fee-sim][data-theme="dark"] .vf-select{background:#0b0d10;color:#e5e7eb;border-color:#374151}
[data-va-fee-sim][data-theme="dark"] .vf-badge{background:#111827;border-color:#1f2937;color:#cbd5e1}
[data-va-fee-sim][data-theme="dark"] .vf-pill{background:#111827;color:#cbd5e1}
[data-va-fee-sim][data-theme="dark"] .vf-note{background:#111827;border-color:#1f2937;color:#cbd5e1}
[data-va-fee-sim][data-theme="dark"] .vf-explain{color:#cbd5e1}

@media (prefers-reduced-motion: reduce){
  [data-va-fee-sim] .vf-btn,
  [data-va-fee-sim] .vf-cta{transition:none}
}

/* Screen-reader only */
[data-va-fee-sim] .vf-sr{
  position:absolute !important;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);
  white-space:nowrap;border:0;
}

/* ======================================================================
   VLN/VALN ADMIN CONTROLS (v1.5.0)
   - Fix excessive above-the-fold whitespace (desktop + mobile)
   - Allow admin-controlled typography (heading/body font)
   - Allow admin-controlled spacing (wrapper padding + optional pull-up)
   - Fix FAQ focus-ring bug (pseudo-element was absolute without positioning)
   ====================================================================== */

/* Default tokens (can be overwritten via wp_add_inline_style) */
.rl-page.rl-page,
.rl-page.rl-page{
  --vlnPadTopD: 18px;
  --vlnPadBotD: 44px;
  --vlnPadXD: 16px;
  --vlnPadTopM: 12px;
  --vlnPadBotM: 28px;
  --vlnPadXM: 16px;
  --vlnOuterMTD: 0px;
  --vlnOuterMTM: -40px;
  --vlnPostOuterMTD: -20px;
  --vlnPostOuterMTM: 0px;
  --vlnContentMax: 1120px;
  --vlnCardRadius: 24px;
  --vlnHeadingFont: var(--vlnFont, system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif);
}

/* Wrapper spacing (beats theme/builder padding rules) */
.rl-page.rl-page,
.rl-page.rl-page{
  box-sizing: border-box;
  clear: both !important;
  font-size: 14px;
  line-height: 1.65;
  padding: var(--vlnPadTopD) var(--vlnPadXD) var(--vlnPadBotD) !important;
  /* Base top offset (admin setting) + optional auto-normalized adjustment */
  margin-top: calc(var(--vlnOuterMTD) + var(--vlnAutoMTD, 0px)) !important;
}

/* Posts/CPTs often have extra theme spacing vs pages — lift only on single posts/CPTs */
body.single:not(.page) .rl-page.rl-page,
body.single:not(.page) .rl-page.rl-page{
  margin-top: calc(var(--vlnOuterMTD) + var(--vlnPostOuterMTD) + var(--vlnAutoMTD, 0px)) !important;
}

@media (max-width: 760px){
  .rl-page.rl-page,
  .rl-page.rl-page{
    font-size: 16px;
    padding: var(--vlnPadTopM) var(--vlnPadXM) var(--vlnPadBotM) !important;
    /* Base top offset (admin setting) + optional auto-normalized adjustment */
    margin-top: calc(var(--vlnOuterMTM) + var(--vlnAutoMTM, 0px)) !important;
  }

  body.single:not(.page) .rl-page.rl-page,
  body.single:not(.page) .rl-page.rl-page{
    margin-top: calc(var(--vlnOuterMTM) + var(--vlnPostOuterMTM) + var(--vlnAutoMTM, 0px)) !important;
  }
}

/* Normalize list text sizing to match paragraphs (themes often upsize <li>) */
.rl-page.rl-page p,
.rl-page.rl-page li,
.rl-page.rl-page p,
.rl-page.rl-page li{
  font-size: 1em !important;
  line-height: inherit !important;
}

/* Content column */
.rl-page.rl-page .rl-wrap,
.rl-page.rl-page .rl-wrap{
  max-width: var(--vlnContentMax) !important;
}

/* Card radius */
.rl-page.rl-page .rl-card,
.rl-page.rl-page .rl-card{
  border-radius: var(--vlnCardRadius) !important;
}

/* Heading font */
.rl-page.rl-page h1,
.rl-page.rl-page h2,
.rl-page.rl-page h3,
.rl-page.rl-page h4,
.rl-page.rl-page h1,
.rl-page.rl-page h2,
.rl-page.rl-page h3,
.rl-page.rl-page h4{
  font-family: var(--vlnHeadingFont) !important;
}

/* Next step pill (matches the green hub breadcrumb pill) */
.rl-page .rl-next-pill,
.rl-page .rl-next-pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 12px;
  border-radius:999px;
  background:#fff;
  border:1px solid rgba(22,163,74,.45);
  color:#475569;
  font-size:13px;
  line-height:1.2;
  font-weight:700;
  width:fit-content;
  max-width:100%;
}

.rl-page .rl-next-label,
.rl-page .rl-next-label{
  color:#475569;
  font-weight:800;
}

.rl-page .rl-next-link,
.rl-page .rl-next-link{
  color:#16a34a !important;
  -webkit-text-fill-color:#16a34a !important;
  font-weight:900;
  text-decoration:none !important;
}

.rl-page .rl-next-link:hover,
.rl-page .rl-next-link:hover{ text-decoration:underline !important; }

/* Fix: FAQ ring pseudo-element must be anchored to the summary row */
.rl-page.rl-page .rl-faq summary,
.rl-page.rl-page .rl-faq summary{
  position: relative;
}

/* =========================================================
   PATCH 1.5.3 — Mobile width + focus cleanup
   ---------------------------------------------------------
   Goals:
   - Stop VLN sections from causing page-level horizontal scrolling.
   - Disable jump pills on mobile again (no horizontal pill scroller).
   - Remove any focus/open borders on FAQ toggles.

   Note:
   - Mobile “full bleed” is handled in CSS (100vw breakout) and we
     also harden overflow on <body> for iOS.
   ========================================================= */

/* If WP inserts <br> between the skip link and wrapper, kill it. */
.rl-page > br,
.rl-page > br{
  display:none !important;
}

/* Keep "Next step" pill from turning into a tall stack when wpautop inserts <br> */
.rl-page .rl-next-pill br,
.rl-page .rl-next-pill br{
  display:none !important;
}

@media (max-width: 820px){
  /* Mobile defaults: NEVER use the legacy calc() full-bleed technique.
     It breaks in certain theme/container contexts and causes sideways panning.
     Full-bleed is only enabled when JS measures an accurate offset. */
  .rl-page,
  .rl-page{
    width:100% !important;
    max-width:100% !important;
    margin-left:0 !important;
    margin-right:0 !important;
  }

  /* Always prevent page-level horizontal drift */
  .rl-page,
  .rl-page{
    overflow-x:hidden !important;
  }

  /* Disable jump pills on mobile */
  .rl-page .rl-pills,
  .rl-page .rl-pills,
  .rl-page .rl-hero-jumps,
  .rl-page .rl-hero-jumps{
    display:none !important;
  }

  /* Prevent anchor targets from hiding under the sticky header. */
  .rl-page section[id],
  .rl-page article[id],
  .rl-page section[id],
  .rl-page article[id]{
    scroll-margin-top: 90px;
  }
}

/* FAQ: kill focus/open rings and any pseudo-element border */
.rl-page .rl-faq summary:focus,
.rl-page .rl-faq summary:focus-visible,
.rl-page .rl-faq summary:active,
.rl-page .rl-faq details[open] > summary,
.rl-page .rl-faq summary:focus,
.rl-page .rl-faq summary:focus-visible,
.rl-page .rl-faq summary:active,
.rl-page .rl-faq details[open] > summary{
  outline:none !important;
  box-shadow:none !important;
}

.rl-page .rl-faq summary::before,
.rl-page .rl-faq summary::before{
  content:none !important;
  display:none !important;
  border:0 !important;
}

/* =====================================================================
   1.5.7 PATCH: Mobile full-width without sideways scrolling
   Why: CSS-only 100vw + calc(50% - 50vw) drifts when the theme/container
        isn't perfectly centered. We now use JS to set --vlnBleedML to the
        exact pixel offset, then clamp overflow on <html>/<body>.
   ===================================================================== */

/* Visually-hidden helpers must NOT use huge negative left offsets (they create horizontal scroll). */
.rl-page .rl-sr-only,
.rl-page .rl-sr-only,
.rl-page .rl-hp-wrap,
.rl-page .rl-hp-wrap{
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  padding:0 !important;
  margin:-1px !important;
  overflow:hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border:0 !important;
  left:0 !important;
  top:0 !important;
}

/* WP/Divi sometimes injects <br> directly inside the section (often right after the skip link). */
.rl-page > br,
.rl-page > br{
  display:none !important;
}

/* Typography consistency: make list items inherit the same size as paragraphs. */
.rl-page.rl-page p,
.rl-page.rl-page li,
.rl-page.rl-page p,
.rl-page.rl-page li{
  font-size: 1em !important;
}

@media (max-width: 820px){
  html.vln-ip-has-page,
  body.vln-ip-has-page{
    overflow-x:hidden !important;
  }

  /* True full-bleed on mobile.
     IMPORTANT: Only enable after JS has measured the page offset.
     Otherwise, width:100vw inside a padded theme container can create
     horizontal “page drift” on iOS (right side slides off-screen). */

  /* Keep readable padding + respect iOS safe areas. */
  .rl-page.rl-page,
  .rl-page.rl-page{
    padding-left: calc(var(--vlnPadXM, 12px) + env(safe-area-inset-left)) !important;
    padding-right: calc(var(--vlnPadXM, 12px) + env(safe-area-inset-right)) !important;
  }
}

/* PATCH 1.5.8
   - Prevent long “Next step” pills from forcing horizontal overflow on mobile.
     (Inline-flex items can refuse to shrink on iOS unless min-width is reset.) */
@media (max-width: 820px){
  .rl-page .rl-next-pill,
  .rl-page .rl-next-pill{
    flex-wrap: wrap;
    row-gap: 4px;
  }

  .rl-page .rl-next-link,
  .rl-page .rl-next-link{
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: anywhere;
  }
}

/* PATCH 1.5.10
   - Disable the legacy calc() based mobile full-bleed rule (PATCH 1.5.3).
     That technique can drift inside different theme/container contexts and causes iOS sideways scroll.
   - Default to a normal, centered layout on mobile.
   - Keep full-bleed ONLY when JS successfully measures the offset and sets vln-ip-bleed + --vlnBleedML.
*/
@media (max-width: 820px){
  /* Default: no breakout (prevents sideways drift on templates with odd wrappers) */
  .rl-page,
  .rl-page{
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    overflow-x: hidden !important;
  }

  /* Full-bleed: ONLY when measured */

  /* Clamp horizontal overflow at the document level (iOS is picky) */
  html.vln-ip-has-page,
  body.vln-ip-has-page{
    overflow-x: hidden !important;
  }
}

/* ---
  FAQ container: remove drop shadow completely (requested).
  The FAQ already has a clear border; the extra shadow reads like a rendering bug.
--- */
.rl-page .rl-faq,
.rl-page .rl-faq-list,
.rl-page .rl-faq,
.rl-page .rl-faq-list{
  box-shadow: none !important;
}

.rl-page .rl-faq,
.rl-page .rl-faq-list{
  box-shadow: none !important;
}

/* ================================
   PATCH 1.7.8 – FAQ marker + author box overlap
   ================================ */

/* Support cases where the class is applied directly on <details> (details.rl-faq / details.rl-faq)
   and ensure disclosure markers are consistently removed across browsers. */
.rl-faq summary::marker,
.rl-faq summary::marker,
details.rl-faq > summary::marker,
details.rl-faq > summary::marker{
  content: "";
}

.rl-faq summary::-webkit-details-marker,
.rl-faq summary::-webkit-details-marker,
details.rl-faq > summary::-webkit-details-marker,
details.rl-faq > summary::-webkit-details-marker{
  display: none;
}

/* Give the FAQ block breathing room so it cannot visually overlap the author box below. */
.rl-faq,
.rl-faq,
details.rl-faq,
details.rl-faq{
  margin-bottom: 24px !important;
  position: relative;
  z-index: 0;
}

/* Simple Author Box (plugin) sometimes uses negative margins; prevent it from sliding under FAQs. */
.saboxplugin-wrap,
.saboxplugin-authorbox{
  margin-top: 24px !important;
  clear: both;
  position: relative;
  z-index: 1;
}

/* If a FAQ section is built with plain <details> (no .rl-faq wrapper),
   still apply a sane accordion style inside VLN wrappers. */
.rl-page details,
.rl-page details{
  background: #fff;
  border: 1px solid #c9d8ff;
  border-radius: 16px;
  overflow: hidden;
}
.rl-page details + details,
.rl-page details + details{
  margin-top: 12px;
}
.rl-page details > summary,
.rl-page details > summary{
  list-style: none;
  cursor: pointer;
  padding: 16px 18px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  outline: none;
}
.rl-page details > summary::after,
.rl-page details > summary::after{
  content: "+";
  font-size: 18px;
  line-height: 1;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #c9d8ff;
  border-radius: 999px;
  flex: 0 0 32px;
  color: #0F1F4A;
}
.rl-page details[open] > summary::after,
.rl-page details[open] > summary::after{
  content: "–";
}
.rl-page details > *:not(summary),
.rl-page details > *:not(summary){
  padding: 0 18px 16px;
  color: #334155;
}
/* ===========================
   VLN Traffic-Light Callouts
   Scoped to .rl-page only
   =========================== */

.rl-page .bullet-section-green,
.rl-page .bullet-section-yellow,
.rl-page .bullet-section-red {
  border-radius: 16px;
  padding: 16px 18px;
  margin: 18px 0;
  border: 1px solid;
  box-shadow: none !important; /* hard kill any inherited shadow */
}

/* Backgrounds + borders */
.rl-page .bullet-section-green {
  background: #ecfdf5; /* soft green */
  border-color: rgba(22, 163, 74, 0.35);
}
.rl-page .bullet-section-yellow {
  background: #fffbeb; /* soft amber */
  border-color: rgba(245, 158, 11, 0.40);
}
.rl-page .bullet-section-red {
  background: #fef2f2; /* soft red */
  border-color: rgba(239, 68, 68, 0.38);
}

/* Optional: left accent stripe (adds scan-ability) */
.rl-page .bullet-section-green,
.rl-page .bullet-section-yellow,
.rl-page .bullet-section-red {
  border-left-width: 6px;
}
.rl-page .bullet-section-green { border-left-color: #16a34a; }
.rl-page .bullet-section-yellow { border-left-color: #f59e0b; }
.rl-page .bullet-section-red { border-left-color: #ef4444; }

/* Title row inside a callout */
.rl-page .rl-callout-title {
  font-weight: 800;
  margin: 0 0 10px;
  line-height: 1.25;
}

/* Tighten list spacing inside callouts */
.rl-page .bullet-section-green ul,
.rl-page .bullet-section-yellow ul,
.rl-page .bullet-section-red ul,
.rl-page .bullet-section-green ol,
.rl-page .bullet-section-yellow ol,
.rl-page .bullet-section-red ol {
  margin: 0;
  padding-left: 20px;
}
.rl-page .bullet-section-green li,
.rl-page .bullet-section-yellow li,
.rl-page .bullet-section-red li {
  margin: 6px 0;
}

/* Optional: small “badge” label */
.rl-page .rl-badge {
  display: inline-block;
  font-size: 0.85rem;
  font-weight: 800;
  line-height: 1;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid;
  margin-bottom: 10px;
}
.rl-page .rl-badge--green { background: rgba(22,163,74,0.10); border-color: rgba(22,163,74,0.35); }
.rl-page .rl-badge--yellow { background: rgba(245,158,11,0.12); border-color: rgba(245,158,11,0.40); }
.rl-page .rl-badge--red { background: rgba(239,68,68,0.10); border-color: rgba(239,68,68,0.38); }

/* ===========================
   Layout helpers (2-col / 3-col)
   =========================== */

.rl-page .rl-grid-2,
.rl-page .rl-grid-3 {
  display: grid;
  gap: 16px;
  align-items: start;
}

/* 2 columns on desktop, stack on mobile */
.rl-page .rl-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 900px) {
  .rl-page .rl-grid-2 { grid-template-columns: 1fr; }
}

/* 3 columns on desktop, stack on mobile */
.rl-page .rl-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 980px) {
  .rl-page .rl-grid-3 { grid-template-columns: 1fr; }
}
/* =========================================================
   VLN Callouts + 2-column shaded boxes (scoped to .rl-page)
   ========================================================= */

/* 2-column wrapper (auto stacks on mobile) */
.rl-page .rl-callout-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin: 18px 0 22px;
}

@media (max-width: 820px){
  .rl-page .rl-callout-grid{
    grid-template-columns: 1fr;
    gap: 12px;
  }
}

/* Base callout/card */
.rl-page .rl-callout{
  /* defaults (can be overridden by variants below) */
  --vlnCalloutBg: #ffffff;
  --vlnCalloutBorder: rgba(15, 23, 42, 0.12);
  --vlnCalloutAccent: #f59e0b; /* default accent (amber) */

  background: var(--vlnCalloutBg);
  border: 1px solid var(--vlnCalloutBorder);
  border-radius: 18px;
  padding: 16px 16px 14px;
  box-shadow: none; /* keep it clean & consistent */
  min-width: 0;
}

.rl-page .rl-callout > *:first-child{ margin-top: 0; }
.rl-page .rl-callout > *:last-child{ margin-bottom: 0; }

/* Kicker row (yellow square + label like "Pro Tip", "Disclosure") */
.rl-page .rl-callout-kicker{
  display: flex;
  align-items: center;
  gap: 10px;

  font-weight: 800;
  font-size: 0.90rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;

  color: #0f172a;
  margin: 0 0 10px;
}

.rl-page .rl-callout-kicker::before{
  content: "";
  width: 12px;
  height: 12px;
  border-radius: 4px; /* “square” but slightly softened like your design */
  background: var(--vlnCalloutAccent);
  flex: 0 0 12px;
}

/* Headings inside callouts */
.rl-page .rl-callout h3,
.rl-page .rl-callout h4{
  margin: 0 0 8px;
  line-height: 1.25;
}

/* Body text inside callouts */
.rl-page .rl-callout p,
.rl-page .rl-callout li{
  color: #334155;
}

/* Lists inside callouts */
.rl-page .rl-callout ul,
.rl-page .rl-callout ol{
  margin: 10px 0 0 18px;
  padding: 0;
}
.rl-page .rl-callout li{ margin: 6px 0; }

/* --- Variants --- */

/* PRO TIP (yellow) */
.rl-page .rl-callout--tip{
  --vlnCalloutBg: #fff7e6;          /* soft amber */
  --vlnCalloutBorder: rgba(245, 158, 11, 0.40);
  --vlnCalloutAccent: #f59e0b;
}

/* DISCLOSURE (neutral gray “official looking”) */
.rl-page .rl-callout--disclosure{
  --vlnCalloutBg: #f8fafc;
  --vlnCalloutBorder: rgba(100, 116, 139, 0.28);
  --vlnCalloutAccent: #64748b;
}

/* NOTE (blue-ish) */
.rl-page .rl-callout--note{
  --vlnCalloutBg: #eff6ff;
  --vlnCalloutBorder: rgba(59, 130, 246, 0.35);
  --vlnCalloutAccent: #C8102E;
}

/* WARNING (red-ish) */
.rl-page .rl-callout--warning{
  --vlnCalloutBg: #fff1f2;
  --vlnCalloutBorder: rgba(239, 68, 68, 0.35);
  --vlnCalloutAccent: #ef4444;
}

/* =========================================================
   Optional: compact inline badges (if you want)
   ========================================================= */
.rl-page .rl-badge{
  display: inline-flex;
  align-items: center;
  gap: 8px;

  font-weight: 800;
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;

  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(15, 23, 42, 0.12);
  background: #fff;
  color: #0f172a;
}

.rl-page .rl-badge::before{
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 3px;
  background: #f59e0b; /* default */
}

.rl-page .rl-badge--tip{
  background: #fff7e6;
  border-color: rgba(245, 158, 11, 0.40);
}
.rl-page .rl-badge--tip::before{ background: #f59e0b; }

.rl-page .rl-badge--disclosure{
  background: #f8fafc;
  border-color: rgba(100, 116, 139, 0.28);
}
.rl-page .rl-badge--disclosure::before{ background: #64748b; }
/* ============================================================
   VLN ADD-ON (safe, append-only)
   Paste this at the VERY BOTTOM of your current CSS file
   OR (recommended) in Divi > Theme Options > Custom CSS /
   Appearance > Customize > Additional CSS.

   Purpose:
   - Traffic-light callouts + bullet sections (green/yellow/red)
   - Pro Tip + Disclosure/Resources box (smaller text)
   - Add breathing room for article pages (your "spacing is tight" issue)
   - No CSS variables, no :is/:where, no grid required
   ============================================================ */


/* -----------------------------
   1) ARTICLE SPACING (optional)
   Only applies when wrapper has: class="vlnPage main-content"
   ----------------------------- */
.rl-page.main-content h2,
.rl-page.main-content h2{
  margin: 28px 0 12px;
}

.rl-page.main-content h3,
.rl-page.main-content h3{
  margin: 18px 0 10px;
}

.rl-page.main-content p,
.rl-page.main-content p{
  margin: 0 0 12px;
}

/* Keep hero heading from getting big top margins */
.rl-page.main-content .rl-hero h1,
.rl-page.main-content .rl-hero h2,
.rl-page.main-content .rl-hero h1,
.rl-page.main-content .rl-hero h2{
  margin: 0 0 10px;
}

/* Hide empty headings that Divi/wpautop sometimes injects */
.rl-page.main-content h2:empty,
.rl-page.main-content h3:empty,
.rl-page.main-content h2:empty,
.rl-page.main-content h3:empty{
  display: none;
}


/* -----------------------------
   2) BULLET SECTIONS (traffic light)
   Your markup uses:
   .bullet-section-gray / blue / yellow
   Add these too: .bullet-section-green / .bullet-section-red
   ----------------------------- */
.rl-page .bullet-section-gray,
.rl-page .bullet-section-blue,
.rl-page .bullet-section-yellow,
.rl-page .bullet-section-green,
.rl-page .bullet-section-red,
.rl-page .bullet-section-gray,
.rl-page .bullet-section-blue,
.rl-page .bullet-section-yellow,
.rl-page .bullet-section-green,
.rl-page .bullet-section-red{
  border: 1px solid #e2e8f0;
  border-radius: 18px;
  padding: 14px 16px;
  margin: 16px 0;
  background: #ffffff;
  box-shadow: 0 10px 22px rgba(15,23,42,.04);
  color: #334155;
}

/* Bullet section headings inside the box */
.rl-page .bullet-section-gray h3,
.rl-page .bullet-section-blue h3,
.rl-page .bullet-section-yellow h3,
.rl-page .bullet-section-green h3,
.rl-page .bullet-section-red h3,
.rl-page .bullet-section-gray h3,
.rl-page .bullet-section-blue h3,
.rl-page .bullet-section-yellow h3,
.rl-page .bullet-section-green h3,
.rl-page .bullet-section-red h3{
  margin: 0 0 8px;
  font-size: 16px;
  font-weight: 900;
  color: #0F1F4A;
}

/* Lists inside bullet sections */
.rl-page .bullet-section-gray ul,
.rl-page .bullet-section-gray ol,
.rl-page .bullet-section-blue ul,
.rl-page .bullet-section-blue ol,
.rl-page .bullet-section-yellow ul,
.rl-page .bullet-section-yellow ol,
.rl-page .bullet-section-green ul,
.rl-page .bullet-section-green ol,
.rl-page .bullet-section-red ul,
.rl-page .bullet-section-red ol,
.rl-page .bullet-section-gray ul,
.rl-page .bullet-section-gray ol,
.rl-page .bullet-section-blue ul,
.rl-page .bullet-section-blue ol,
.rl-page .bullet-section-yellow ul,
.rl-page .bullet-section-yellow ol,
.rl-page .bullet-section-green ul,
.rl-page .bullet-section-green ol,
.rl-page .bullet-section-red ul,
.rl-page .bullet-section-red ol{
  margin: 0;
  padding-left: 20px;
}

.rl-page .bullet-section-gray li,
.rl-page .bullet-section-blue li,
.rl-page .bullet-section-yellow li,
.rl-page .bullet-section-green li,
.rl-page .bullet-section-red li,
.rl-page .bullet-section-gray li,
.rl-page .bullet-section-blue li,
.rl-page .bullet-section-yellow li,
.rl-page .bullet-section-green li,
.rl-page .bullet-section-red li{
  margin: 8px 0;
}

/* Tones */
.rl-page .bullet-section-gray,
.rl-page .bullet-section-gray{
  background: #f8fafc;
  border-color: #e2e8f0;
  border-left: 6px solid #cbd5e1;
}

.rl-page .bullet-section-blue,
.rl-page .bullet-section-blue{
  background: #eff6ff;
  border-color: #bfdbfe;
  border-left: 6px solid #DC2538;
}

.rl-page .bullet-section-yellow,
.rl-page .bullet-section-yellow{
  background: #fffbeb;
  border-color: #fde68a;
  border-left: 6px solid #f59e0b;
}

.rl-page .bullet-section-green,
.rl-page .bullet-section-green{
  background: #ecfdf5;
  border-color: #bbf7d0;
  border-left: 6px solid #16a34a;
}

.rl-page .bullet-section-red,
.rl-page .bullet-section-red{
  background: #fef2f2;
  border-color: #fecaca;
  border-left: 6px solid #dc2626;
}


/* -----------------------------
   3) CALLOUTS (vlnCallout + modifiers)
   You already have .rl-callout in plugin CSS.
   This adds:
   - bottom margin (fix tight spacing)
   - new modifiers:
     .rl-callout-green / .rl-callout-yellow / .rl-callout-red
   - alias support for your current usage:
     .rl-pro-tip (blue)
     .rl-disclosure (resources/disclosure)
   ----------------------------- */

/* Make callouts breathe (top + bottom) */
.rl-page .rl-callout,
.rl-page .rl-callout{
  margin: 16px 0;
}

/* Normalize callout headings inside the box */
.rl-page .rl-callout h2,
.rl-page .rl-callout h3,
.rl-page .rl-callout h2,
.rl-page .rl-callout h3{
  margin: 0 0 8px;
}

/* ===== Traffic-light callout tones ===== */

/* GREEN */
.rl-page .rl-callout.rl-callout-green,
.rl-page .rl-callout-green,
.rl-page .rl-callout.rl-callout-green,
.rl-page .rl-callout-green{
  background: #ecfdf5;
  border-color: #bbf7d0;
  border-left: 6px solid #16a34a;
}

/* YELLOW */
.rl-page .rl-callout.rl-callout-yellow,
.rl-page .rl-callout-yellow,
.rl-page .rl-callout.rl-callout-yellow,
.rl-page .rl-callout-yellow{
  background: #fffbeb;
  border-color: #fde68a;
  border-left: 6px solid #f59e0b;
}

/* RED */
.rl-page .rl-callout.rl-callout-red,
.rl-page .rl-callout-red,
.rl-page .rl-callout.rl-callout-red,
.rl-page .rl-callout-red{
  background: #fef2f2;
  border-color: #fecaca;
  border-left: 6px solid #dc2626;
}

/* Pro Tip (blue) — your markup: <div class="vlnCallout vlnProTip"> */
.rl-page .rl-callout.rl-pro-tip,
.rl-page .rl-pro-tip,
.rl-page .rl-callout.rl-pro-tip,
.rl-page .rl-pro-tip{
  background: #eff6ff;
  border-color: #bfdbfe;
  border-left: 6px solid #C8102E;
}

/* Disclosure / Resources (smaller text) — your markup: <div class="vlnCallout vlnDisclosure"> */
.rl-page .rl-callout.rl-disclosure,
.rl-page .rl-disclosure,
.rl-page .rl-callout.rl-disclosure,
.rl-page .rl-disclosure{
  background: #fff7ed;
  border-color: #fed7aa;
  border-left: 6px solid #f59e0b;
  font-size: 13px;
  line-height: 1.55;
  color: #334155;
}

/* Keep Resources title readable but not huge */
.rl-page .rl-disclosure h2,
.rl-page .rl-disclosure h3,
.rl-page .rl-disclosure h2,
.rl-page .rl-disclosure h3{
  font-size: 16px;
  font-weight: 950;
  color: #0F1F4A;
  margin: 0 0 10px;
}

/* Resources list tightening */
.rl-page .rl-disclosure ul,
.rl-page .rl-disclosure ol,
.rl-page .rl-disclosure ul,
.rl-page .rl-disclosure ol{
  margin: 0;
  padding-left: 18px;
}

.rl-page .rl-disclosure li,
.rl-page .rl-disclosure li{
  margin: 6px 0;
}

/* Resources links: make them obviously links even if theme tries to kill underlines */
.rl-page .rl-disclosure a,
.rl-page .rl-disclosure a{
  text-decoration: underline;
  text-underline-offset: 2px;
}
/* ============================================================
   VLN ADD-ON (safe, append-only)
   Paste this at the VERY BOTTOM of your current CSS file
   OR (recommended) in Divi > Theme Options > Custom CSS /
   Appearance > Customize > Additional CSS.

   Purpose:
   - Traffic-light callouts + bullet sections (green/yellow/red)
   - Pro Tip + Disclosure/Resources box (smaller text)
   - Add breathing room for article pages (your "spacing is tight" issue)
   - No CSS variables, no :is/:where, no grid required
   ============================================================ */


/* -----------------------------
   1) ARTICLE SPACING (optional)
   Only applies when wrapper has: class="vlnPage main-content"
   ----------------------------- */
.rl-page.main-content h2,
.rl-page.main-content h2{
  margin: 28px 0 12px;
}

.rl-page.main-content h3,
.rl-page.main-content h3{
  margin: 18px 0 10px;
}

.rl-page.main-content p,
.rl-page.main-content p{
  margin: 0 0 12px;
}

/* Keep hero heading from getting big top margins */
.rl-page.main-content .rl-hero h1,
.rl-page.main-content .rl-hero h2,
.rl-page.main-content .rl-hero h1,
.rl-page.main-content .rl-hero h2{
  margin: 0 0 10px;
}

/* Hide empty headings that Divi/wpautop sometimes injects */
.rl-page.main-content h2:empty,
.rl-page.main-content h3:empty,
.rl-page.main-content h2:empty,
.rl-page.main-content h3:empty{
  display: none;
}


/* -----------------------------
   2) BULLET SECTIONS (traffic light)
   Your markup uses:
   .bullet-section-gray / blue / yellow
   Add these too: .bullet-section-green / .bullet-section-red
   ----------------------------- */
.rl-page .bullet-section-gray,
.rl-page .bullet-section-blue,
.rl-page .bullet-section-yellow,
.rl-page .bullet-section-green,
.rl-page .bullet-section-red,
.rl-page .bullet-section-gray,
.rl-page .bullet-section-blue,
.rl-page .bullet-section-yellow,
.rl-page .bullet-section-green,
.rl-page .bullet-section-red{
  border: 1px solid #e2e8f0;
  border-radius: 18px;
  padding: 14px 16px;
  margin: 16px 0;
  background: #ffffff;
  box-shadow: 0 10px 22px rgba(15,23,42,.04);
  color: #334155;
}

/* Bullet section headings inside the box */
.rl-page .bullet-section-gray h3,
.rl-page .bullet-section-blue h3,
.rl-page .bullet-section-yellow h3,
.rl-page .bullet-section-green h3,
.rl-page .bullet-section-red h3,
.rl-page .bullet-section-gray h3,
.rl-page .bullet-section-blue h3,
.rl-page .bullet-section-yellow h3,
.rl-page .bullet-section-green h3,
.rl-page .bullet-section-red h3{
  margin: 0 0 8px;
  font-size: 16px;
  font-weight: 900;
  color: #0F1F4A;
}

/* Lists inside bullet sections */
.rl-page .bullet-section-gray ul,
.rl-page .bullet-section-gray ol,
.rl-page .bullet-section-blue ul,
.rl-page .bullet-section-blue ol,
.rl-page .bullet-section-yellow ul,
.rl-page .bullet-section-yellow ol,
.rl-page .bullet-section-green ul,
.rl-page .bullet-section-green ol,
.rl-page .bullet-section-red ul,
.rl-page .bullet-section-red ol,
.rl-page .bullet-section-gray ul,
.rl-page .bullet-section-gray ol,
.rl-page .bullet-section-blue ul,
.rl-page .bullet-section-blue ol,
.rl-page .bullet-section-yellow ul,
.rl-page .bullet-section-yellow ol,
.rl-page .bullet-section-green ul,
.rl-page .bullet-section-green ol,
.rl-page .bullet-section-red ul,
.rl-page .bullet-section-red ol{
  margin: 0;
  padding-left: 20px;
}

.rl-page .bullet-section-gray li,
.rl-page .bullet-section-blue li,
.rl-page .bullet-section-yellow li,
.rl-page .bullet-section-green li,
.rl-page .bullet-section-red li,
.rl-page .bullet-section-gray li,
.rl-page .bullet-section-blue li,
.rl-page .bullet-section-yellow li,
.rl-page .bullet-section-green li,
.rl-page .bullet-section-red li{
  margin: 8px 0;
}

/* Tones */
.rl-page .bullet-section-gray,
.rl-page .bullet-section-gray{
  background: #f8fafc;
  border-color: #e2e8f0;
  border-left: 6px solid #cbd5e1;
}

.rl-page .bullet-section-blue,
.rl-page .bullet-section-blue{
  background: #eff6ff;
  border-color: #bfdbfe;
  border-left: 6px solid #DC2538;
}

.rl-page .bullet-section-yellow,
.rl-page .bullet-section-yellow{
  background: #fffbeb;
  border-color: #fde68a;
  border-left: 6px solid #f59e0b;
}

.rl-page .bullet-section-green,
.rl-page .bullet-section-green{
  background: #ecfdf5;
  border-color: #bbf7d0;
  border-left: 6px solid #16a34a;
}

.rl-page .bullet-section-red,
.rl-page .bullet-section-red{
  background: #fef2f2;
  border-color: #fecaca;
  border-left: 6px solid #dc2626;
}


/* -----------------------------
   3) CALLOUTS (vlnCallout + modifiers)
   You already have .rl-callout in plugin CSS.
   This adds:
   - bottom margin (fix tight spacing)
   - new modifiers:
     .rl-callout-green / .rl-callout-yellow / .rl-callout-red
   - alias support for your current usage:
     .rl-pro-tip (blue)
     .rl-disclosure (resources/disclosure)
   ----------------------------- */

/* Make callouts breathe (top + bottom) */
.rl-page .rl-callout,
.rl-page .rl-callout{
  margin: 16px 0;
}

/* Normalize callout headings inside the box */
.rl-page .rl-callout h2,
.rl-page .rl-callout h3,
.rl-page .rl-callout h2,
.rl-page .rl-callout h3{
  margin: 0 0 8px;
}

/* ===== Traffic-light callout tones ===== */

/* GREEN */
.rl-page .rl-callout.rl-callout-green,
.rl-page .rl-callout-green,
.rl-page .rl-callout.rl-callout-green,
.rl-page .rl-callout-green{
  background: #ecfdf5;
  border-color: #bbf7d0;
  border-left: 6px solid #16a34a;
}

/* YELLOW */
.rl-page .rl-callout.rl-callout-yellow,
.rl-page .rl-callout-yellow,
.rl-page .rl-callout.rl-callout-yellow,
.rl-page .rl-callout-yellow{
  background: #fffbeb;
  border-color: #fde68a;
  border-left: 6px solid #f59e0b;
}

/* RED */
.rl-page .rl-callout.rl-callout-red,
.rl-page .rl-callout-red,
.rl-page .rl-callout.rl-callout-red,
.rl-page .rl-callout-red{
  background: #fef2f2;
  border-color: #fecaca;
  border-left: 6px solid #dc2626;
}

/* Pro Tip (blue) — your markup: <div class="vlnCallout vlnProTip"> */
.rl-page .rl-callout.rl-pro-tip,
.rl-page .rl-pro-tip,
.rl-page .rl-callout.rl-pro-tip,
.rl-page .rl-pro-tip{
  background: #eff6ff;
  border-color: #bfdbfe;
  border-left: 6px solid #C8102E;
}

/* Disclosure / Resources (smaller text) — your markup: <div class="vlnCallout vlnDisclosure"> */
.rl-page .rl-callout.rl-disclosure,
.rl-page .rl-disclosure,
.rl-page .rl-callout.rl-disclosure,
.rl-page .rl-disclosure{
  background: #fff7ed;
  border-color: #fed7aa;
  border-left: 6px solid #f59e0b;
  font-size: 13px;
  line-height: 1.55;
  color: #334155;
}

/* Keep Resources title readable but not huge */
.rl-page .rl-disclosure h2,
.rl-page .rl-disclosure h3,
.rl-page .rl-disclosure h2,
.rl-page .rl-disclosure h3{
  font-size: 16px;
  font-weight: 950;
  color: #0F1F4A;
  margin: 0 0 10px;
}

/* Resources list tightening */
.rl-page .rl-disclosure ul,
.rl-page .rl-disclosure ol,
.rl-page .rl-disclosure ul,
.rl-page .rl-disclosure ol{
  margin: 0;
  padding-left: 18px;
}

.rl-page .rl-disclosure li,
.rl-page .rl-disclosure li{
  margin: 6px 0;
}

/* Resources links: make them obviously links even if theme tries to kill underlines */
.rl-page .rl-disclosure a,
.rl-page .rl-disclosure a{
  text-decoration: underline;
  text-underline-offset: 2px;
}
/* ==========================================================
   VLN shaded callouts + traffic-light bullet boxes
   - Removes the thick left stripe
   - Adds shaded background + thin border (all sides)
   Paste at the VERY BOTTOM of your CSS (or Divi > Custom CSS)
   ========================================================== */

/* ---------- Base: all callouts + bullet sections ---------- */
.rl-callout,
.bullet-section-blue,
.bullet-section-gray,
.bullet-section-yellow,
.bullet-section-green,
.bullet-section-red{
  border: 1px solid #e2e8f0 !important;
  border-left: 1px solid #e2e8f0 !important;   /* kills thick left stripe */
  border-radius: 18px !important;
  background: #f8fafc !important;
  background-image: none !important;          /* kills gradients if any */
  box-shadow: none !important;                /* cleaner “flat” box */
  padding: 16px 18px !important;
  margin: 20px 0 !important;
}

/* If your current stripe is drawn via pseudo-elements, this removes it. */
.rl-callout::before,
.rl-callout::after{
  content: none !important;
  display: none !important;
}

/* ---------- Tone variants (Traffic Light + Pro Tip) ---------- */
.bullet-section-green,
.rl-callout-green{
  background: #ecfdf5 !important;
  border-color: #bbf7d0 !important;
  border-left-color: #bbf7d0 !important;
}

.bullet-section-yellow,
.rl-callout-yellow{
  background: #fffbeb !important;
  border-color: #fde68a !important;
  border-left-color: #fde68a !important;
}

.bullet-section-red,
.rl-callout-red{
  background: #fef2f2 !important;
  border-color: #fecaca !important;
  border-left-color: #fecaca !important;
}

/* Blue tone for bullet sections + Pro Tip callouts */
.bullet-section-blue,
.rl-callout-blue,
.rl-callout.rl-pro-tip{
  background: #eff6ff !important;
  border-color: #bfdbfe !important;
  border-left-color: #bfdbfe !important;
}

/* Gray “neutral” box */
.bullet-section-gray{
  background: #f8fafc !important;
  border-color: #e2e8f0 !important;
  border-left-color: #e2e8f0 !important;
}

/* ---------- Cleaner typography + list spacing inside boxes ---------- */
.rl-callout h2,
.rl-callout h3,
.rl-callout h4,
.bullet-section-blue h2,
.bullet-section-blue h3,
.bullet-section-blue h4,
.bullet-section-gray h2,
.bullet-section-gray h3,
.bullet-section-gray h4,
.bullet-section-green h2,
.bullet-section-green h3,
.bullet-section-green h4,
.bullet-section-yellow h2,
.bullet-section-yellow h3,
.bullet-section-yellow h4,
.bullet-section-red h2,
.bullet-section-red h3,
.bullet-section-red h4{
  margin: 0 0 10px !important;
}

.rl-callout p,
.bullet-section-blue p,
.bullet-section-gray p,
.bullet-section-green p,
.bullet-section-yellow p,
.bullet-section-red p{
  margin: 0 0 10px !important;
}

.rl-callout p:last-child,
.bullet-section-blue p:last-child,
.bullet-section-gray p:last-child,
.bullet-section-green p:last-child,
.bullet-section-yellow p:last-child,
.bullet-section-red p:last-child{
  margin-bottom: 0 !important;
}

.rl-callout ul,
.rl-callout ol,
.bullet-section-blue ul,
.bullet-section-blue ol,
.bullet-section-gray ul,
.bullet-section-gray ol,
.bullet-section-green ul,
.bullet-section-green ol,
.bullet-section-yellow ul,
.bullet-section-yellow ol,
.bullet-section-red ul,
.bullet-section-red ol{
  margin: 0 !important;
  padding-left: 18px !important;
}

.rl-callout li,
.bullet-section-blue li,
.bullet-section-gray li,
.bullet-section-green li,
.bullet-section-yellow li,
.bullet-section-red li{
  margin: 8px 0 !important;
}

/* If you nest a bullet-section inside another, reduce the inner box spacing */
.bullet-section-gray .bullet-section-blue,
.bullet-section-gray .bullet-section-green,
.bullet-section-gray .bullet-section-yellow,
.bullet-section-gray .bullet-section-red{
  margin: 12px 0 0 !important;
}

/* ---------- Resources box: smaller text + tighter bullets ---------- */
.rl-callout.rl-disclosure{
  font-size: 13px !important;
  line-height: 1.55 !important;
}

.rl-callout.rl-disclosure li{
  margin: 6px 0 !important;
}

.rl-callout.rl-disclosure a{
  word-break: break-word;
}

/* ---------- Optional: loosen overall article spacing (scoped) ---------- */
.rl-page h2{ margin: 28px 0 12px !important; }
.rl-page h3{ margin: 18px 0 10px !important; }
.rl-page p{  margin: 0 0 14px !important; }

/* Don’t add extra top margin to the hero title */
.rl-page .rl-hero h2{ margin-top: 0 !important; }
/* ==========================================================
   VLN FIX: Badge squares + traffic-light boxes + shaded callouts
   Paste at the VERY BOTTOM of vln-pages.css
   ========================================================== */

/* ---------------------------
   1) BADGE (the pill at top of each traffic-light card)
   Fix: dot stays orange because ::before never gets overridden.
---------------------------- */
.rl-page.rl-page .rl-badge,
.rl-page.rl-page .rl-badge{
  display:inline-flex !important;
  align-items:center !important;
  gap:8px !important;
  padding:6px 12px !important;
  border-radius:999px !important;

  border:1px solid rgba(15,23,42,.14) !important;
  background:#ffffff !important;

  color:#0f172a !important;
  font-weight:900 !important;
  font-size:12px !important;
  line-height:1 !important;
  letter-spacing:.08em !important;
  text-transform:uppercase !important;
  white-space:nowrap !important;

  box-shadow:none !important;
}

.rl-page.rl-page .rl-badge::before,
.rl-page.rl-page .rl-badge::before{
  content:"" !important;
  width:10px !important;
  height:10px !important;
  border-radius:3px !important;
  background:#f59e0b !important; /* fallback */
  flex:0 0 10px !important;
}

/* GREEN badge */
.rl-page.rl-page .rl-badge--green,
.rl-page.rl-page .rl-badge--green{
  background:rgba(22,163,74,.10) !important;
  border-color:rgba(22,163,74,.35) !important;
}
.rl-page.rl-page .rl-badge--green::before,
.rl-page.rl-page .rl-badge--green::before{
  background:#16a34a !important;
}

/* YELLOW badge */
.rl-page.rl-page .rl-badge--yellow,
.rl-page.rl-page .rl-badge--yellow{
  background:rgba(245,158,11,.12) !important;
  border-color:rgba(245,158,11,.40) !important;
}
.rl-page.rl-page .rl-badge--yellow::before,
.rl-page.rl-page .rl-badge--yellow::before{
  background:#f59e0b !important;
}

/* RED badge */
.rl-page.rl-page .rl-badge--red,
.rl-page.rl-page .rl-badge--red{
  background:rgba(239,68,68,.10) !important;
  border-color:rgba(239,68,68,.38) !important;
}
.rl-page.rl-page .rl-badge--red::before,
.rl-page.rl-page .rl-badge--red::before{
  background:#ef4444 !important;
}


/* ---------------------------
   2) TRAFFIC-LIGHT BOXES (your 3-column fit cards + the blue bullet boxes)
   Fix: theme/builder overrides are winning. Force tones with !important.
---------------------------- */
.rl-page.rl-page .bullet-section-green,
.rl-page.rl-page .bullet-section-yellow,
.rl-page.rl-page .bullet-section-red,
.rl-page.rl-page .bullet-section-blue,
.rl-page.rl-page .bullet-section-gray,
.rl-page.rl-page .bullet-section-green,
.rl-page.rl-page .bullet-section-yellow,
.rl-page.rl-page .bullet-section-red,
.rl-page.rl-page .bullet-section-blue,
.rl-page.rl-page .bullet-section-gray{
  border-radius:18px !important;
  padding:16px 18px !important;
  border:1px solid rgba(15,23,42,.12) !important;
  background:#ffffff !important;
  box-shadow:0 10px 24px rgba(15,23,42,.05) !important;
}

/* Tone fills */
.rl-page.rl-page .bullet-section-green,
.rl-page.rl-page .bullet-section-green{
  background:#ecfdf5 !important;
  border-color:rgba(22,163,74,.32) !important;
}

.rl-page.rl-page .bullet-section-yellow,
.rl-page.rl-page .bullet-section-yellow{
  background:#fffbeb !important;
  border-color:rgba(245,158,11,.38) !important;
}

.rl-page.rl-page .bullet-section-red,
.rl-page.rl-page .bullet-section-red{
  background:#fef2f2 !important;
  border-color:rgba(239,68,68,.35) !important;
}

.rl-page.rl-page .bullet-section-blue,
.rl-page.rl-page .bullet-section-blue{
  background:#eff6ff !important;
  border-color:rgba(220,37,56,.35) !important;
}

.rl-page.rl-page .bullet-section-gray,
.rl-page.rl-page .bullet-section-gray{
  background:#f8fafc !important;
  border-color:rgba(100,116,139,.25) !important;
}

/* Keep the 3-column grid tight (no extra outer margins inside grid) */
.rl-page.rl-page .rl-grid-3 > .bullet-section-green,
.rl-page.rl-page .rl-grid-3 > .bullet-section-yellow,
.rl-page.rl-page .rl-grid-3 > .bullet-section-red,
.rl-page.rl-page .rl-grid-3 > .bullet-section-green,
.rl-page.rl-page .rl-grid-3 > .bullet-section-yellow,
.rl-page.rl-page .rl-grid-3 > .bullet-section-red{
  margin:0 !important;
}

/* List spacing inside these boxes */
.rl-page.rl-page .bullet-section-green ul,
.rl-page.rl-page .bullet-section-yellow ul,
.rl-page.rl-page .bullet-section-red ul,
.rl-page.rl-page .bullet-section-blue ul,
.rl-page.rl-page .bullet-section-gray ul,
.rl-page.rl-page .bullet-section-green ol,
.rl-page.rl-page .bullet-section-yellow ol,
.rl-page.rl-page .bullet-section-red ol,
.rl-page.rl-page .bullet-section-blue ol,
.rl-page.rl-page .bullet-section-gray ol,
.rl-page.rl-page .bullet-section-green ul,
.rl-page.rl-page .bullet-section-yellow ul,
.rl-page.rl-page .bullet-section-red ul,
.rl-page.rl-page .bullet-section-blue ul,
.rl-page.rl-page .bullet-section-gray ul,
.rl-page.rl-page .bullet-section-green ol,
.rl-page.rl-page .bullet-section-yellow ol,
.rl-page.rl-page .bullet-section-red ol,
.rl-page.rl-page .bullet-section-blue ol,
.rl-page.rl-page .bullet-section-gray ol{
  margin:0 !important;
  padding-left:20px !important;
}


/* ---------------------------
   3) CALLOUTS (“Deal Saver”, “Lender Reality Check”, etc.)
   Fix: make them shaded + more “intentional”.
---------------------------- */
.rl-page.rl-page .rl-callout,
.rl-page.rl-page .rl-callout{
  border-radius:18px !important;
  padding:16px 18px !important;
  border:1px solid rgba(15,23,42,.12) !important;
  background:#ffffff !important;
  box-shadow:0 10px 24px rgba(15,23,42,.05) !important;
  margin:20px 0 !important;
}

/* Blue (your existing class: vlnProTip) */
.rl-page.rl-page .rl-callout.rl-pro-tip,
.rl-page.rl-page .rl-callout.rl-pro-tip{
  background:#eff6ff !important;
  border-color:rgba(220,37,56,.35) !important;
}

/* Resources/Disclosure */
.rl-page.rl-page .rl-callout.rl-disclosure,
.rl-page.rl-page .rl-callout.rl-disclosure{
  background:#fff7ed !important;
  border-color:rgba(245,158,11,.35) !important;
}

/* Optional: if you use these tone classes anywhere */
.rl-page.rl-page .rl-callout.rl-callout-green,
.rl-page.rl-page .rl-callout.rl-callout-green{
  background:#ecfdf5 !important;
  border-color:rgba(22,163,74,.32) !important;
}
.rl-page.rl-page .rl-callout.rl-callout-yellow,
.rl-page.rl-page .rl-callout.rl-callout-yellow{
  background:#fffbeb !important;
  border-color:rgba(245,158,11,.38) !important;
}
.rl-page.rl-page .rl-callout.rl-callout-red,
.rl-page.rl-page .rl-callout.rl-callout-red{
  background:#fef2f2 !important;
  border-color:rgba(239,68,68,.35) !important;
}

/* Make callouts NOT feel full-width on desktop (article pages only).
   If you hate this, delete this block. */
@media (min-width: 980px){
  .rl-page.rl-page.main-content .rl-callout:not(.rl-disclosure),
  .rl-page.rl-page.main-content .rl-callout:not(.rl-disclosure){
    width:100% !important;
    max-width:960px !important;
    margin-left:auto !important;
    margin-right:auto !important;
  }
}

/* === LRG PATCH: Article page tweaks === */

/* Hide the rl-hero eyebrow + bare CTA block at top of post_content */
.rl-page .rl-hero {
  display: none !important;
}

/* Remove highlight/glow on opened FAQ <details> */
.rl-page details[open],
.rl-page details[open] summary {
  box-shadow: none !important;
  border-color: #E5E7EB !important;
  background: transparent !important;
}
.rl-page details[open] summary:hover {
  background: #FAFAF7 !important;
}

/* Inject "Frequently Asked Questions" H3 above ATF top-FAQ block */
.rl-page .rl-top-faq::before {
  content: "Frequently Asked Questions";
  display: block;
  font-family: 'Fraunces', Georgia, serif;
  font-size: 22px;
  font-weight: 500;
  color: #3B0000;
  margin: 0 0 16px;
  letter-spacing: -0.015em;
}

/* Remove bullets from Jump-to TOC sidebar / pill list */
.rl-page .rl-pills,
.rl-page ul.rl-pills,
.rl-page .rl-hero-jumps,
.rl-page .vlnHero-jumps,
nav.rl-breadcrumb ul,
.rl-toc ul,
.rl-jumps ul {
  list-style: none !important;
  padding-left: 0 !important;
}
.rl-page .rl-pills li,
.rl-page .rl-hero-jumps li,
.rl-toc li,
.rl-jumps li {
  list-style: none !important;
}
/* Also kill bullets on any <ul> inside a TOC-like container */
aside ul,
[class*="toc"] ul,
[class*="jump"] ul {
  list-style: none !important;
  padding-left: 0 !important;
}

/* Style tables inside articles */
.rl-page table {
  width: 100%;
  border-collapse: collapse;
  margin: 22px 0;
  font-size: 14.5px;
  border: 1px solid #E5E7EB;
  border-radius: 8px;
  overflow: hidden;
}
.rl-page table thead {
  background: #FAFAF7;
}
.rl-page table th {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600;
  color: #3B0000;
  text-align: left;
  padding: 12px 14px;
  border-bottom: 2px solid #E5E7EB;
  font-size: 14px;
  letter-spacing: -0.01em;
}
.rl-page table td {
  padding: 12px 14px;
  border-bottom: 1px solid #E5E7EB;
  color: #475569;
  line-height: 1.5;
  vertical-align: top;
}
.rl-page table tbody tr:last-child td {
  border-bottom: none;
}
.rl-page table tbody tr:hover {
  background: #FAFAF7;
}

/* rl-quick-card: 1px border all sides, no thick left accent */
.rl-page .rl-quick-card,
.rl-page article.rl-quick-card {
  background: #FFFFFF !important;
  border: 1px solid #E5E7EB !important;
  border-left: 1px solid #E5E7EB !important;
  border-radius: 10px !important;
  padding: 20px 22px !important;
}

/* Hide the Divi-level Categories meta line on single posts */
body.single-post .post-meta,
body.single-post .entry-meta,
body.single-post .et_post_meta_wrapper,
body.single-post .et_pb_post_title_meta_inner,
body.single-post .et_pb_post_categories,
body.single-post #left-area .post-categories,
body.single-post .et_pb_title_meta_container {
  display: none !important;
}

/* Align meta header (Written by / Reviewed by / Updated on) flush left
   with the article H1 — remove any auto-margin centering */
.rl-page .rl-byline,
body.single-post .author-byline,
body.single-post .post-byline {
  margin-left: 0 !important;
  text-align: left !important;
}
/* === END LRG PATCH === */

/* ============================================================
   PATCH v2 — Iteration after CSS file actually loads (1.0.1)
   ============================================================ */

/* HEADINGS — force dark red across all article H1/H2/H3/H4 */
.rl-page h1,
.rl-page h2,
.rl-page h3,
.rl-page h4,
.rl-page .rl-section h2,
.rl-page .rl-section h3,
.rl-page .rl-quick-card h3,
.rl-page .rl-quick-card h4,
.rl-page .rl-faq h2,
.rl-page .rl-bluf h2,
.rl-page .rl-resources h2,
.rl-page footer.rl-resources h2 {
  color: #3B0000 !important;
  font-family: 'Fraunces', Georgia, serif !important;
}

/* QUICK-CARDS — visible 1px dark red border all sides */
.rl-page .rl-quick-card,
.rl-page article.rl-quick-card {
  background: #FFFFFF !important;
  border: 1px solid #3B0000 !important;
  border-left: 1px solid #3B0000 !important;
  border-radius: 10px !important;
  padding: 22px 24px !important;
  box-shadow: 0 1px 3px rgba(59, 0, 0, 0.04);
}
.rl-page .rl-quick-card h3,
.rl-page .rl-quick-card h4 {
  color: #3B0000 !important;
  font-family: 'Fraunces', Georgia, serif !important;
  font-size: 17px !important;
  font-weight: 600 !important;
  margin: 0 0 12px !important;
  letter-spacing: -0.01em !important;
}

/* FAQ ACCORDION — strip all open-state highlights aggressively */
.rl-page details,
.rl-page .rl-faq details,
.rl-page .rl-top-faq details {
  border: 1px solid #E5E7EB !important;
  background: #FFFFFF !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  outline: none !important;
  margin-bottom: 10px;
}
.rl-page details[open],
.rl-page .rl-faq details[open],
.rl-page .rl-top-faq details[open] {
  border: 1px solid #E5E7EB !important;
  border-color: #E5E7EB !important;
  background: #FFFFFF !important;
  box-shadow: none !important;
  outline: none !important;
}
.rl-page details summary,
.rl-page details[open] summary {
  background: transparent !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  color: #3B0000 !important;
}
.rl-page details summary:focus,
.rl-page details summary:focus-visible,
.rl-page details summary:focus-within {
  outline: none !important;
  box-shadow: none !important;
}

/* "FREQUENTLY ASKED QUESTIONS" H3 INJECTION — broader targeting */
.rl-page .rl-faq > h2:first-child,
.rl-page .rl-top-faq > h2:first-child {
  display: none;
}
.rl-page .rl-faq::before,
.rl-page .rl-top-faq::before,
.rl-page section.rl-faq::before {
  content: "Frequently Asked Questions";
  display: block;
  font-family: 'Fraunces', Georgia, serif;
  font-size: 24px;
  font-weight: 600;
  color: #3B0000;
  margin: 32px 0 18px;
  letter-spacing: -0.015em;
  line-height: 1.2;
}

/* Standalone <details> blocks (ATF, not inside .rl-faq) */
.rl-page .rl-quick-grid + details::before,
.rl-page > details:first-of-type::before {
  content: "Frequently Asked Questions";
  display: block;
  font-family: 'Fraunces', Georgia, serif;
  font-size: 24px;
  font-weight: 600;
  color: #3B0000;
  margin: 0 0 18px;
  padding: 0 0 0 22px;
  letter-spacing: -0.015em;
}

/* TABLE — force hover and styling visibility */
.rl-page table,
.rl-page .rl-section table {
  width: 100% !important;
  border-collapse: collapse !important;
  margin: 24px 0 !important;
  font-size: 14.5px !important;
  border: 1px solid #E5E7EB !important;
  border-radius: 8px !important;
  overflow: hidden !important;
}
.rl-page table thead,
.rl-page .rl-section table thead {
  background: #FAFAF7 !important;
}
.rl-page table th {
  font-family: 'Fraunces', Georgia, serif !important;
  font-weight: 600 !important;
  color: #3B0000 !important;
  text-align: left !important;
  padding: 14px 16px !important;
  border-bottom: 2px solid #E5E7EB !important;
  font-size: 14.5px !important;
}
.rl-page table td {
  padding: 14px 16px !important;
  border-bottom: 1px solid #E5E7EB !important;
  color: #475569 !important;
  line-height: 1.55 !important;
  vertical-align: top !important;
}
.rl-page table tbody tr:last-child td {
  border-bottom: none !important;
}
.rl-page table tbody tr {
  transition: background 0.15s ease;
}
.rl-page table tbody tr:hover {
  background: #FAFAF7 !important;
}

/* RESOURCES USED — bordered box, header not bolded */
.rl-page .rl-resources,
.rl-page footer.rl-resources {
  border: 1px solid #E5E7EB !important;
  border-radius: 10px !important;
  padding: 22px 26px !important;
  margin: 32px 0 !important;
  background: #FFFFFF !important;
}
.rl-page .rl-resources h2,
.rl-page footer.rl-resources h2 {
  font-family: 'Fraunces', Georgia, serif !important;
  font-weight: 600 !important;
  font-size: 22px !important;
  color: #3B0000 !important;
  margin: 0 0 14px !important;
  letter-spacing: -0.015em !important;
}
.rl-page .rl-resources ul,
.rl-page footer.rl-resources ul {
  margin: 0 !important;
  padding-left: 20px !important;
  list-style: disc !important;
}
.rl-page .rl-resources li,
.rl-page footer.rl-resources li {
  font-weight: 400 !important;
  margin-bottom: 6px !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
}
.rl-page .rl-resources a,
.rl-page footer.rl-resources a {
  color: #3B0000 !important;
  text-decoration: underline !important;
  text-decoration-color: rgba(59, 0, 0, 0.3) !important;
  font-weight: 400 !important;
}
.rl-page .rl-resources a:hover,
.rl-page footer.rl-resources a:hover {
  text-decoration-color: #3B0000 !important;
}

/* BYLINE — left-aligned, flush with H1 */
.rl-page .rl-byline,
body.single-post .author-byline,
body.single-post .post-byline,
.et_pb_column .rss-meta-header,
.rss-meta-header {
  margin-left: 0 !important;
  margin-right: auto !important;
  text-align: left !important;
  max-width: 100% !important;
}

/* HIDE rl-hero (eyebrow + Connect with LRG) — broader selectors */
.rl-page header.rl-hero,
.rl-page .rl-hero,
.rl-page > .rl-wrap > .rl-hero,
header.rl-hero {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
}

/* === END PATCH v2 === */

/* ============================================================
   PATCH v3 — Refinement after v2
   ============================================================ */

/* KILL the blue/cream page background — make .rl-page transparent
   so article body sits on the natural Divi page background */
.rl-page,
.rl-page.rl-page-lrg {
  background: transparent !important;
  padding: 0 !important;
}
.rl-page .rl-wrap {
  background: transparent !important;
}

/* QUICK-CARDS — lighter red tint border (not the heavy #3B0000) */
.rl-page .rl-quick-card,
.rl-page article.rl-quick-card {
  background: #FFFFFF !important;
  border: 1px solid #FECDD3 !important;
  border-left: 1px solid #FECDD3 !important;
  border-radius: 10px !important;
  padding: 22px 24px !important;
  box-shadow: none !important;
}

/* All headings dark red (re-asserting for any selector we missed) */
.rl-page h1, .rl-page h2, .rl-page h3, .rl-page h4, .rl-page h5,
.rl-page .rl-section h2, .rl-page .rl-section h3,
.rl-page .rl-quick-card h3, .rl-page .rl-quick-card h4,
.rl-page .rl-faq h2, .rl-page .rl-bluf h2,
.rl-page .rl-resources h2, .rl-page footer.rl-resources h2,
.rl-page details summary, .rl-page details summary span {
  color: #3B0000 !important;
  font-family: 'Fraunces', Georgia, serif !important;
}

/* BYLINE — flush left, aligned with H1 column. */
.rss-meta-header,
.rss-meta-header__box,
.rss-meta-header__inner,
body.single-post .et_pb_text_inner > .rss-meta-header,
.et_pb_post_content .rss-meta-header,
.et_pb_module .rss-meta-header {
  margin-left: 0 !important;
  margin-right: auto !important;
  text-align: left !important;
  max-width: 100% !important;
  display: block !important;
}

/* If the byline is wrapped in a centered Divi text module, force its 
   inner container to flush-left */
body.single-post .et_pb_text_0_tb_body .et_pb_text_inner,
body.single-post [class*="et_pb_text"] .et_pb_text_inner:has(.rss-meta-header) {
  text-align: left !important;
}

/* === END PATCH v3 === */

/* === PATCH v4: Resources Used box treatment === */
.rl-page .rl-resources,
.rl-page footer.rl-resources {
  background: #fafafa !important;
  border: 1px solid #FECDD3 !important;
  border-radius: 8px !important;
  padding: 24px 28px !important;
  margin: 32px 0 !important;
}
.rl-page .rl-resources h2,
.rl-page footer.rl-resources h2 {
  margin-top: 0 !important;
  font-size: 1.5rem !important;
  color: #3B0000 !important;
  font-family: 'Fraunces', Georgia, serif !important;
}
.rl-page .rl-resources ul,
.rl-page footer.rl-resources ul {
  margin-bottom: 0 !important;
}
/* === END PATCH v4 === */

/* === PATCH v5: Resources box + H2 color consistency === */

/* Fix 2: Resources Used box */
.rl-resources {
  background: #fafafa !important;
  border: 1px solid #fecdd3 !important;
  border-radius: 8px !important;
  padding: 24px 28px !important;
  margin: 32px 0 !important;
}
.rl-resources h2 {
  margin-top: 0 !important;
  font-size: 1.5rem !important;
  color: #3B0000 !important;
  font-family: 'Fraunces', Georgia, serif !important;
}
.rl-resources ul {
  margin-bottom: 0 !important;
  padding-left: 20px !important;
}
.rl-resources li {
  margin-bottom: 8px !important;
}

/* Fix 3: Force ALL H2s dark red — win against Divi/theme navy */
.rl-page h2,
.rl-wrap h2,
.rl-section h2,
.rl-bluf h2,
.rl-faq h2,
.rl-resources h2,
section.rl-section > h2,
section.rl-bluf > h2,
section.rl-faq > h2 {
  color: #3B0000 !important;
  font-family: 'Fraunces', Georgia, serif !important;
  font-weight: 600 !important;
}

/* === END PATCH v5 === */

/* === PATCH v6: RSS TOC sidebar — LRG brand red (#3B0000) === */

.rss-toc-title {
  color: #3B0000 !important;
}

.rss-toc ul li a {
  color: #3B0000 !important;
}

.rss-toc ul li a::before {
  color: #3B0000 !important;
}

.rss-toc ul li a:hover {
  color: #6B1515 !important;
  text-decoration: underline !important;
}

.rss-cta-line1,
.rss-cta-line3 {
  color: #3B0000 !important;
}

.rss-cta-line2 {
  color: #3B0000 !important;
}

.rss-toc-sticky-cta-text {
  color: #3B0000 !important;
}

/* === END PATCH v6 === */


/* ===== Universal heading color enforcement ===== */
/* H1 is handled by Divi layout 4846 Heading module (already #3B0000 Fraunces) */
/* This block enforces H2-H6 site-wide on post bodies */

.rl-page h1,
.rl-page h2,
.rl-page h3,
.rl-page h4,
.rl-page h5,
.rl-page h6,
.rl-wrap h1,
.rl-wrap h2,
.rl-wrap h3,
.rl-wrap h4,
.rl-wrap h5,
.rl-wrap h6,
.rl-section h2,
.rl-section h3,
.rl-section h4,
.rl-bluf h2,
.rl-bluf h3,
.rl-faq h2,
.rl-faq h3,
.rl-resources h2,
.rl-resources h3,
.rl-quick-card h3,
.rl-quick-card h4,
.rl-callout h3,
.rl-callout h4,
.bullet-section-gray h3,
.bullet-section-gray h4,
.rss-mh-block h2,
.rss-mh-block h3 {
  color: #3B0000 !important;
  font-family: 'Fraunces', Georgia, 'Times New Roman', serif !important;
  font-weight: 600 !important;
}

/* Heading sizes (override Divi defaults if needed) */
.rl-page h2, .rl-wrap h2, .rl-section h2 { font-size: 1.875rem; line-height: 1.3; }
.rl-page h3, .rl-wrap h3 { font-size: 1.375rem; line-height: 1.35; }
.rl-page h4, .rl-wrap h4 { font-size: 1.125rem; line-height: 1.4; font-weight: 700; }

/* ===== Table styling ===== */
.rl-page table,
.rl-wrap table,
.rl-section table {
  width: 100%;
  border-collapse: collapse;
  margin: 24px 0;
  font-size: 0.95rem;
  border: 1px solid #d4d4d8;
  background: #ffffff;
}

.rl-page table thead,
.rl-wrap table thead,
.rl-section table thead {
  background: #faf9f7;
}

.rl-page table th,
.rl-wrap table th,
.rl-section table th {
  text-align: left;
  padding: 12px 16px;
  border: 1px solid #d4d4d8;
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600;
  color: #3B0000;
  font-size: 1rem;
}

.rl-page table td,
.rl-wrap table td,
.rl-section table td {
  padding: 12px 16px;
  border: 1px solid #d4d4d8;
  vertical-align: top;
  color: #1f1f1f;
}

/* Alternating row backgrounds */
.rl-page table tbody tr:nth-child(even),
.rl-wrap table tbody tr:nth-child(even),
.rl-section table tbody tr:nth-child(even) {
  background: #fafafa;
}

/* Hover effect */
.rl-page table tbody tr:hover,
.rl-wrap table tbody tr:hover,
.rl-section table tbody tr:hover {
  background: #fef2f4;
  transition: background 0.15s ease;
}

/* Responsive: horizontal scroll on mobile */
@media (max-width: 767px) {
  .rl-page table,
  .rl-wrap table,
  .rl-section table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
  }
}

/* ===== Variant class aliases =====
 * 9 legacy posts use camelCase or alternate class names for the quick-card pattern.
 * Alias them to the canonical styling rather than rewriting content.
 */
.rl-hero-quickCard,
.rl-card {
  display: block;
  background: #ffffff;
  border: 1px solid #FECDD3;
  border-radius: 8px;
  padding: 24px 28px;
  margin: 16px 0;
}

.rl-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin: 24px 0;
}

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


/* =================================================================
   MOBILE FIXES — 2026-05-25
   Fixes 1,2,4,5,6,7,8 (Fix 3 handled via wp option update)
   ================================================================= */

/* --- Fix 1: Mobile side padding ---
   Root cause: "Builder-proof overrides" sets padding: 44px 0 !important
   which zeroes left/right padding on all viewports.               */
@media (max-width: 980px) {
  .rl-page,
  .rl-page-lrg {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
}
@media (max-width: 600px) {
  .rl-page,
  .rl-page-lrg {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
}

/* --- Fix 2: H1 too big on mobile --- */
@media (max-width: 768px) {
  .rl-page h1,
  .et_pb_module_header h1,
  .et_pb_heading h1,
  body .et_pb_heading_0_tb_body h1 {
    font-size: 28px !important;
    line-height: 1.2 !important;
    letter-spacing: -0.01em !important;
  }
}
@media (max-width: 480px) {
  .rl-page h1,
  .et_pb_module_header h1,
  .et_pb_heading h1,
  body .et_pb_heading_0_tb_body h1 {
    font-size: 24px !important;
    line-height: 1.2 !important;
  }
}

/* --- Fix 4: Meta header transparent background --- */
.rss-mh-block,
.rss-mh-inner,
.rss-mh-wrapper {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
.rss-mh-block {
  border-bottom: 1px solid #e5e5e5 !important;
  border-radius: 0 !important;
  padding-bottom: 16px !important;
  margin-bottom: 16px !important;
}

/* --- Fix 5: Levi's role — show "Founder" on mobile, full on desktop ---
   User meta changed to "Founder"; ::after appends company on desktop.  */
@media (min-width: 769px) {
  .rss-mh-line--author .rss-mh-role::after {
    content: ", LRG Realty";
  }
}

/* --- Fix 6: Hide ", Editorial Review" from reviewer line --- */
.rss-mh-role--reviewer {
  display: none !important;
}

/* --- Fix 7: Body FAQ icon overlap ---
   Bare <details> inside .rl-page already have flex summary + ::after
   at lines 3497-3527. Reinforce with !important to beat builder overrides. */
.rl-page details > summary {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  padding: 16px 18px !important;
}
.rl-page details > summary::after {
  flex: 0 0 32px !important;
  min-width: 32px !important;
}

/* --- Fix 8: Tables scroll horizontally on mobile --- */
@media (max-width: 767px) {
  .rl-page .rl-section,
  .rl-page .rl-wrap > * {
    overflow-x: visible !important;
  }

  .rl-page table:not(.rl-table):not(.rl-compare-table),
  .rl-page .rl-table,
  .rl-page .rl-compare-table {
    display: block !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    max-width: 100% !important;
  }

  .rl-page .rl-table,
  .rl-page .rl-compare-table {
    min-width: 540px;
  }
}


/* ===== Fix 1: Hide FAQ + toggle icon on mobile =====
 * The ::after pseudo-element overlaps summary text on phone screens.
 * Added 2026-05-26.
 */
@media (max-width: 768px) {
  .rl-page details summary::after,
  .rl-faq details summary::after,
  .rl-page .rl-faq summary::after,
  details.rl-faq > summary::after,
  details summary::after {
    display: none !important;
    content: none !important;
  }

  .rl-page details summary,
  .rl-faq details summary,
  .rl-page .rl-faq summary,
  details.rl-faq > summary,
  details summary {
    padding-right: 16px !important;
  }
}

/* ===== Fix 2: Hide breadcrumbs on mobile ===== */
@media (max-width: 768px) {
  nav.rl-breadcrumb,
  .rl-breadcrumb {
    display: none !important;
  }
}

/* ===== Fix 3a: Breadcrumb desktop spacing ===== */
@media (min-width: 769px) {
  nav.rl-breadcrumb,
  .rl-breadcrumb {
    margin-bottom: 28px !important;
    padding-bottom: 12px !important;
  }
}

/* ===== Fix 3b: Breadcrumb anchor styling ===== */
nav.rl-breadcrumb a,
.rl-breadcrumb a {
  color: #3B0000 !important;
  text-decoration: none !important;
  font-weight: 600;
  transition: color 0.15s ease;
}

nav.rl-breadcrumb a:hover,
.rl-breadcrumb a:hover {
  color: #8B2424 !important;
  text-decoration: underline !important;
  text-underline-offset: 2px;
}

nav.rl-breadcrumb span[aria-current="page"],
.rl-breadcrumb span[aria-current="page"] {
  color: #666 !important;
  font-weight: 500;
}


/* ===== Hide reviewer avatar — author only =====
 * Shows only Levi's photo, removes overlap margin.
 * Added 2026-05-26.
 */
.rss-mh-avatar--reviewer {
  display: none !important;
}

.rss-mh-avatar--author {
  margin-left: 0 !important;
}


/* ===== Mobile H1 fluid sizing =====
 * clamp() makes H1 adapt to viewport width.
 * Prevents awkward line wraps leaving 25% screen empty.
 * Added 2026-05-26.
 */
@media (max-width: 768px) {
  .rl-page h1,
  .et_pb_module_header,
  .et_pb_heading h1,
  body .et_pb_heading_0_tb_body h1 {
    font-size: clamp(20px, 6vw, 28px) !important;
    line-height: 1.2 !important;
    letter-spacing: -0.01em !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
    hyphens: auto !important;
    -webkit-hyphens: auto !important;
    width: 100% !important;
    max-width: 100% !important;
  }
}

@media (max-width: 480px) {
  .rl-page h1,
  .et_pb_module_header,
  .et_pb_heading h1,
  body .et_pb_heading_0_tb_body h1 {
    font-size: clamp(18px, 6.5vw, 24px) !important;
    line-height: 1.2 !important;
  }
}


/* ===== Logo size — mobile (less aggressive shrink) =====
 * Current logo renders ~40px tall. Reduces to 24px/20px.
 * Added 2026-05-26.
 */
@media (max-width: 768px) {
  .et_pb_menu__logo img,
  .et_pb_menu__logo-wrap img,
  .et_pb_menu--with-logo .et_pb_menu__logo img {
    max-height: 40px !important;
    width: auto !important;
    height: auto !important;
  }
}

@media (max-width: 480px) {
  .et_pb_menu__logo img,
  .et_pb_menu__logo-wrap img,
  .et_pb_menu--with-logo .et_pb_menu__logo img {
    max-height: 36px !important;
  }
}