/* ========================================
   PORTED FROM VLN-PAGES.CSS v1.8.5
   Full component styling (AIO cards, FAQs, tables, callouts, etc.)
   Class renames: vln → cnp, Color renames: blue/green → navy/orange
   Specificity boosted: .cnpPage.cnpPage
   ======================================== */

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

/* Root wrapper */
.cnpPage{
  font-family: system-ui,-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:#0f172a;

  background:
    radial-gradient(1200px 600px at 12% 0, rgba(37,99,235,.12), transparent 55%),
    radial-gradient(900px 500px at 88% 12%, rgba(59,130,246,.10), transparent 60%),
    #f5f7ff;

  padding:28px 16px 72px;
}

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

.cnpPage.cnpPage,
.cnpPage.cnpPage *{ box-sizing:border-box; }

/* Focus */
.cnpPage.cnpPage a:focus,
.cnpPage.cnpPage button:focus,
.cnpPage.cnpPage input:focus,
.cnpPage.cnpPage select:focus,
.cnpPage.cnpPage summary:focus,
.cnpPage.cnpPage textarea:focus{
  outline:3px solid rgba(37,99,235,.35);
  outline-offset:2px;
  border-radius:10px;
}

.cnpPage.cnpPage a{ color:#2563eb; text-decoration:none; }
.cnpPage.cnpPage a:hover{ text-decoration:underline; }

/* Wrap */
.cnpPage.cnpPage .cnpWrap{ max-width:1120px; margin:0 auto; }

/* Hide helper (JS can override with inline style when needed) */
.cnpPage.cnpPage .cnpHide{ display:none; }

/* Honeypot wrapper for forms */
.cnpPage.cnpPage .cnpHpWrap{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

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

.cnpPage.cnpPage h1,
.cnpPage.cnpPage h2,
.cnpPage.cnpPage h3,
.cnpPage.cnpPage h4{
  color:#0f2344 !important;
  letter-spacing:-.01em;
  margin:0;
}

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

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

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

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

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

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

/* Cards */
.cnpPage.cnpPage .cnpCard{
  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);
}
.cnpPage.cnpPage .cnpCard-inner{ padding:22px 22px 20px; }
@media (max-width:640px){
  .cnpPage.cnpPage .cnpCard-inner{ padding:16px 14px; }
}

/* Hero */
.cnpPage.cnpPage .cnpHero{ margin-bottom:18px; }

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

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

.cnpPage.cnpPage .cnpEyebrow .dot,
.cnpPage.cnpPage .cnpHero-dot{
  width:9px; height:9px; border-radius:999px;
  background:#f97316;
  box-shadow:0 0 0 5px rgba(249,115,22,.22);
}

.cnpPage.cnpPage .cnpEyebrow strong,
.cnpPage.cnpPage .cnpAccentWord{ color:#f97316; font-weight:900; }

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

.cnpPage.cnpPage .cnpMeta strong{ color:#0f172a; font-weight:800; }
.cnpPage.cnpPage .cnpMeta .sep{ color:#94a3b8; }

.cnpPage.cnpPage .cnpHeroLead,
.cnpPage.cnpPage .cnpHero-lead{
  margin-top:10px;
  color:#475569;
  width:100%;
  max-width:100% !important;
}

/* Pills */
.cnpPage.cnpPage .cnpPills,
.cnpPage.cnpPage .cnpHero-jumps{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:12px;
  padding:0;
}

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

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

.cnpPage.cnpPage .cnpPill:hover,
.cnpPage.cnpPage .cnpJumpPill:hover{ background:#fff7ed; text-decoration:none !important; }

/* Buttons */
.cnpPage.cnpPage .cnpBtnRow,
.cnpPage.cnpPage .cnpHero-ctas,
.cnpPage.cnpPage .cnpForm-actions,
.cnpPage.cnpPage .cnpActions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:14px;
  align-items:center;
}

.cnpPage.cnpPage .cnpBtn{
  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){
  .cnpPage.cnpPage .cnpBtn{ padding:10px 14px; font-size:13.5px; }
}

.cnpPage.cnpPage .cnpBtn-primary,
.cnpPage.cnpPage .cnpLeadPill{
  background:#0f2344;
  border-color:#0f2344;
  color:#fff !important;
}
.cnpPage.cnpPage .cnpBtn-primary:hover,
.cnpPage.cnpPage .cnpLeadPill:hover{ background:#0a1a33; border-color:#0a1a33; }

.cnpPage.cnpPage .cnpBtn-secondary,
.cnpPage.cnpPage .cnpBtn-ghost{
  background:#fff;
  border-color:#e2e8f0;
  color:#0f2344 !important;
}
.cnpPage.cnpPage .cnpBtn-secondary:hover,
.cnpPage.cnpPage .cnpBtn-ghost:hover{ background:#f1f5ff; }

.cnpPage.cnpPage .cnpBtn-success,
.cnpPage.cnpPage .cnpBtn-successPill{
  background:#0f2344;
  border-color:#0f2344;
  color:#fff !important;
}
.cnpPage.cnpPage .cnpBtn-success:hover,
.cnpPage.cnpPage .cnpBtn-successPill:hover{ background:#0a1a33; border-color:#0a1a33; }

/* Optional green filled button (use intentionally; not the default primary CTA) */
.cnpPage.cnpPage .cnpBtn-green{
  background:#f97316;
  border-color:#f97316;
  color:#fff !important;
}
.cnpPage.cnpPage .cnpBtn-green:hover{ background:#ea680b; border-color:#ea680b; }

/* Compare/Offer buttons: white with green border + green text */
.cnpPage.cnpPage .cnpBtn-compare,
.cnpPage.cnpPage a.cnpBtn-compare{
  background:#fff !important;
  border-color:rgba(249,115,22,.55) !important;
  color:#ea680b !important;
  text-decoration:none !important;
}
.cnpPage.cnpPage .cnpBtn-compare:hover,
.cnpPage.cnpPage a.cnpBtn-compare:hover{
  background:#ecfdf5 !important;
  border-color:rgba(249,115,22,.65) !important;
  color:#ea680b !important;
  text-decoration:none !important;
}

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

/* Small button */
.cnpPage.cnpPage .cnpBtn-small{ padding:8px 14px; font-size:13px; }

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

.cnpPage.cnpPage .cnpQuickCard{
  border-radius:18px;
  border:1px solid #e2e8f0;
  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);
}
.cnpPage.cnpPage .cnpQuickCard h3{ font-size:15px; font-weight:900; margin-bottom:8px; color:#0f2344; }

.cnpPage.cnpPage .cnpQuickCard ul,
.cnpPage.cnpPage .cnpResult-body ul,
.cnpPage.cnpPage .cnpCallout ul{
  margin:0 !important;
  padding-left:18px !important;
  list-style-type:disc !important;
  list-style-position:outside !important;
  color:#475569;
}
.cnpPage.cnpPage .cnpQuickCard li,
.cnpPage.cnpPage .cnpResult-body li,
.cnpPage.cnpPage .cnpCallout li{ margin:8px 0; display:list-item !important; }

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

/* Tables */
.cnpPage.cnpPage .cnpTableScroll{
  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 */
.cnpPage.cnpPage table{ display:table; border-collapse:collapse; }

.cnpPage.cnpPage .cnpTable,
.cnpPage.cnpPage .cnpCompareTable{
  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-cnp-table="scroll" on the table. */
.cnpPage.cnpPage .cnpTable[data-cnp-table="scroll"],
.cnpPage.cnpPage .cnpCompareTable[data-cnp-table="scroll"]{
  min-width:640px;
}

.cnpPage.cnpPage .cnpTable th,
.cnpPage.cnpPage .cnpTable td,
.cnpPage.cnpPage .cnpCompareTable th,
.cnpPage.cnpPage .cnpCompareTable td{
  border-bottom:1px solid #e2e8f0;
  padding:10px 10px;
  text-align:left;
  vertical-align:top;
}

@media (max-width:640px){
  .cnpPage.cnpPage .cnpTable th,
  .cnpPage.cnpPage .cnpTable td,
  .cnpPage.cnpPage .cnpCompareTable th,
  .cnpPage.cnpPage .cnpCompareTable td{
    padding:8px 8px;
  }
}

.cnpPage.cnpPage .cnpTable thead th,
.cnpPage.cnpPage .cnpCompareTable thead th{
  background:#f8fafc;
  color:#0f172a;
  font-weight:850;
}

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

/* Tool shell */
.cnpPage.cnpPage .cnpToolShell{
  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){ .cnpPage.cnpPage .cnpToolShell{ padding:12px; } }

/*
  cnpToolGrid 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.
*/
.cnpPage.cnpPage .cnpToolGrid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:16px;
}
.cnpPage.cnpPage .cnpToolGrid > *{ min-width:0; }
.cnpPage.cnpPage .cnpToolShell .cnpToolGrid{
  grid-template-columns:minmax(0,1.15fr) minmax(0,1.1fr);
}
@media (max-width:900px){
  .cnpPage.cnpPage .cnpToolGrid{ grid-template-columns:minmax(0,1fr); }
  .cnpPage.cnpPage .cnpToolShell .cnpToolGrid{ grid-template-columns:minmax(0,1fr); }
}

.cnpPage.cnpPage .cnpPane,
.cnpPage.cnpPage .cnpForm,
.cnpPage.cnpPage .cnpResult{
  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){
  .cnpPage.cnpPage .cnpPane,
  .cnpPage.cnpPage .cnpForm,
  .cnpPage.cnpPage .cnpResult{
    padding:14px 14px 12px;
  }
}

.cnpPage.cnpPage .cnpPaneTitle{
  font-size:15px;
  font-weight:950;
  margin:0 0 10px;
  color:#0f2344;
}

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

.cnpPage.cnpPage .cnpField,
.cnpPage.cnpPage .cnpForm-group{ display:flex; flex-direction:column; min-width:0; margin-bottom:12px; }

.cnpPage.cnpPage .cnpField label,
.cnpPage.cnpPage .cnpForm-label{ font-weight:850; margin-bottom:6px; color:#0f172a; display:block; }

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

.cnpPage.cnpPage .cnpField input:focus,
.cnpPage.cnpPage .cnpField select:focus,
.cnpPage.cnpPage .cnpForm-input:focus,
.cnpPage.cnpPage .cnpForm-select:focus{
  outline:none;
  border-color:#2563eb;
  box-shadow:0 0 0 1px rgba(37,99,235,.35);
}

.cnpPage.cnpPage .cnpField input[type="range"]{ width:100%; }

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

.cnpPage.cnpPage .cnpHelp,
.cnpPage.cnpPage .cnpForm-help{ margin-top:6px; color:#475569; font-size:12.5px; line-height:1.55; }

.cnpPage.cnpPage .cnpError,
.cnpPage.cnpPage .cnpForm-error{ margin-top:10px; color:#dc2626; font-weight:750; }

/* Callouts */
.cnpPage.cnpPage .cnpCallout{
  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;
}
.cnpPage.cnpPage .cnpCallout h3{ font-size:15px; margin:0 0 6px; }
.cnpPage.cnpPage .cnpCallout p{ margin:0; color:#475569; font-size:13px; line-height:1.6; }

.cnpPage.cnpPage .cnpCallout-warn{ border-color:#fed7aa; background:linear-gradient(180deg,#fffbeb 0%, #fff 100%); }
.cnpPage.cnpPage .cnpCallout-blue{ border-color:#e2e8f0; background:linear-gradient(180deg,#fff7ed 0%, #fff 100%); }

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

.cnpPage.cnpPage .cnpResultTop{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
  margin-bottom:10px;
}

.cnpPage.cnpPage .cnpTag{
  display:inline-flex;
  align-items:center;
  padding:6px 10px;
  border-radius:999px;
  background:#fff7ed;
  border:1px solid #e2e8f0;
  color:#0f2344;
  font-weight:950;
  font-size:12.5px;
  white-space:nowrap;
}

.cnpPage.cnpPage .cnpNote{ color:#475569; font-size:12.5px; }

.cnpPage.cnpPage .cnpMetrics{ display:grid; grid-template-columns:1fr; gap:12px; margin-top:10px; }

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

.cnpPage.cnpPage .cnpStack{ display:grid; grid-template-columns:1fr; gap:12px; }
.cnpPage.cnpPage .cnpMiniCard{
  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);
}

.cnpPage.cnpPage .cnpMiniCard h3{ font-size:15px; margin:0 0 8px; }

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

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

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

.cnpPage.cnpPage .cnpTrafficCard{
  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;
}
.cnpPage.cnpPage .cnpTrafficCard[data-tone="green"]{ border-color:rgba(249,115,22,.35); }
.cnpPage.cnpPage .cnpTrafficCard[data-tone="yellow"]{ border-color:rgba(202,138,4,.35); }
.cnpPage.cnpPage .cnpTrafficCard[data-tone="red"]{ border-color:rgba(220,38,38,.30); }

.cnpPage.cnpPage .cnpTrafficTitle{ margin:0 0 6px; font-size:16px; font-weight:950; line-height:1.22; }
.cnpPage.cnpPage .cnpTrafficTitle.green{ color:#f97316; }
.cnpPage.cnpPage .cnpTrafficTitle.yellow{ color:#ca8a04; }
.cnpPage.cnpPage .cnpTrafficTitle.red{ color:#dc2626; }

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

.cnpPage.cnpPage .cnpFaq details,
.cnpPage.cnpPage .cnpFaqItem{ border:0; }

.cnpPage.cnpPage .cnpFaq details:not(:first-child),
.cnpPage.cnpPage .cnpFaqItem:not(:first-child){ border-top:1px solid #e2e8f0; }

.cnpPage.cnpPage .cnpFaq summary,
.cnpPage.cnpPage .cnpFaqItem 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;
}

.cnpPage.cnpPage .cnpFaq summary::-webkit-details-marker,
.cnpPage.cnpPage .cnpFaqItem summary::-webkit-details-marker{ display:none; }

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

.cnpPage.cnpPage .cnpFaq details[open] summary:after{ content:"–"; }

.cnpPage.cnpPage .cnpFaq .ans,
.cnpPage.cnpPage .cnpFaqBody{
  border-top:1px solid #e2e8f0;
  padding:12px 16px 16px;
}

.cnpPage.cnpPage .cnpFaq .ans p{ margin:0; color:#475569; }

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

.cnpPage.cnpPage .cnpRefsInner{ padding:16px 16px 14px; }
.cnpPage.cnpPage .cnpRefsLabel{ margin:0 0 10px; color:#475569; font-weight:850; font-size:12.5px; }

.cnpPage.cnpPage .cnpRefs ul,
.cnpPage.cnpPage .cnpSourcesList{
  margin:0 !important;
  padding-left:18px !important;
  list-style-type:disc !important;
  list-style-position:outside !important;
  color:#475569;
}

.cnpPage.cnpPage .cnpRefs li,
.cnpPage.cnpPage .cnpSourcesList li{ margin:8px 0; display:list-item !important; }

/* Utility: visually hidden */
.cnpPage.cnpPage .cnpSrOnly{
  position:absolute !important;
  left:-9999px !important;
  width:1px !important;
  height:1px !important;
  overflow:hidden !important;
}


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

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

.cnpPage.cnpPage .cnpLevelPill[data-level="ready"],
.cnpPage.cnpPage #vaReadyLevelPill[data-level="ready"],
.cnpPage.cnpPage #serviceLevelPill[data-level="ready"],
.cnpPage.cnpPage #propertyLevelPill[data-level="ready"]{
  background:rgba(249,115,22,.10);
  border-color:rgba(249,115,22,.35);
  color:#ea680b;
}

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

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

/* Score bar (optional) */
.cnpPage.cnpPage .cnpScoreTrack{
  height:10px;
  border-radius:999px;
  background:#e2e8f0;
  overflow:hidden;
}
.cnpPage.cnpPage .cnpScoreBar,
.cnpPage.cnpPage #vaReadyScoreBar,
.cnpPage.cnpPage #serviceScoreBar,
.cnpPage.cnpPage #propertyScoreBar{
  height:10px;
  border-radius:999px;
  width:0%;
  background:#0f2344;
  transition:width .25s ease;
}


/* ===== Backward compatible selectors (.cnpPage) ===== */

/* Root wrapper */
.cnpPage{
  font-family: system-ui,-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:#0f172a;

  background:
    radial-gradient(1200px 600px at 12% 0, rgba(37,99,235,.12), transparent 55%),
    radial-gradient(900px 500px at 88% 12%, rgba(59,130,246,.10), transparent 60%),
    #f5f7ff;

  padding:28px 16px 72px;
}

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

.cnpPage.cnpPage,
.cnpPage.cnpPage *{ box-sizing:border-box; }

/* Focus */
.cnpPage.cnpPage a:focus,
.cnpPage.cnpPage button:focus,
.cnpPage.cnpPage input:focus,
.cnpPage.cnpPage select:focus,
.cnpPage.cnpPage summary:focus,
.cnpPage.cnpPage textarea:focus{
  outline:3px solid rgba(37,99,235,.35);
  outline-offset:2px;
  border-radius:10px;
}

.cnpPage.cnpPage a{ color:#2563eb; text-decoration:none; }
.cnpPage.cnpPage a:hover{ text-decoration:underline; }

/* Wrap */
.cnpPage.cnpPage .cnpWrap{ max-width:1120px; margin:0 auto; }

/* Hide helper (JS can override with inline style when needed) */
.cnpPage.cnpPage .cnpHide{ display:none; }

/* Honeypot wrapper for forms */
.cnpPage.cnpPage .cnpHpWrap{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

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

.cnpPage.cnpPage h1,
.cnpPage.cnpPage h2,
.cnpPage.cnpPage h3,
.cnpPage.cnpPage h4{
  color:#0f2344 !important;
  letter-spacing:-.01em;
  margin:0;
}

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

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

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

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

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

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

/* Cards */
.cnpPage.cnpPage .cnpCard{
  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);
}
.cnpPage.cnpPage .cnpCard-inner{ padding:22px 22px 20px; }
@media (max-width:640px){
  .cnpPage.cnpPage .cnpCard-inner{ padding:16px 14px; }
}

/* Hero */
.cnpPage.cnpPage .cnpHero{ margin-bottom:18px; }

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

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

.cnpPage.cnpPage .cnpEyebrow .dot,
.cnpPage.cnpPage .cnpHero-dot{
  width:9px; height:9px; border-radius:999px;
  background:#f97316;
  box-shadow:0 0 0 5px rgba(249,115,22,.22);
}

.cnpPage.cnpPage .cnpEyebrow strong,
.cnpPage.cnpPage .cnpAccentWord{ color:#f97316; font-weight:900; }

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

.cnpPage.cnpPage .cnpMeta strong{ color:#0f172a; font-weight:800; }
.cnpPage.cnpPage .cnpMeta .sep{ color:#94a3b8; }

.cnpPage.cnpPage .cnpHeroLead,
.cnpPage.cnpPage .cnpHero-lead{
  margin-top:10px;
  color:#475569;
  width:100%;
  max-width:100% !important;
}

/* Pills */
.cnpPage.cnpPage .cnpPills,
.cnpPage.cnpPage .cnpHero-jumps{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:12px;
  padding:0;
}

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

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

.cnpPage.cnpPage .cnpPill:hover,
.cnpPage.cnpPage .cnpJumpPill:hover{ background:#fff7ed; text-decoration:none !important; }

/* Buttons */
.cnpPage.cnpPage .cnpBtnRow,
.cnpPage.cnpPage .cnpHero-ctas,
.cnpPage.cnpPage .cnpForm-actions,
.cnpPage.cnpPage .cnpActions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:14px;
  align-items:center;
}

.cnpPage.cnpPage .cnpBtn{
  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){
  .cnpPage.cnpPage .cnpBtn{ padding:10px 14px; font-size:13.5px; }
}

.cnpPage.cnpPage .cnpBtn-primary,
.cnpPage.cnpPage .cnpLeadPill{
  background:#0f2344;
  border-color:#0f2344;
  color:#fff !important;
}
.cnpPage.cnpPage .cnpBtn-primary:hover,
.cnpPage.cnpPage .cnpLeadPill:hover{ background:#0a1a33; border-color:#0a1a33; }

.cnpPage.cnpPage .cnpBtn-secondary,
.cnpPage.cnpPage .cnpBtn-ghost{
  background:#fff;
  border-color:#e2e8f0;
  color:#0f2344 !important;
}
.cnpPage.cnpPage .cnpBtn-secondary:hover,
.cnpPage.cnpPage .cnpBtn-ghost:hover{ background:#f1f5ff; }

.cnpPage.cnpPage .cnpBtn-success,
.cnpPage.cnpPage .cnpBtn-successPill{
  background:#0f2344;
  border-color:#0f2344;
  color:#fff !important;
}
.cnpPage.cnpPage .cnpBtn-success:hover,
.cnpPage.cnpPage .cnpBtn-successPill:hover{ background:#0a1a33; border-color:#0a1a33; }

/* Optional green filled button (use intentionally; not the default primary CTA) */
.cnpPage.cnpPage .cnpBtn-green{
  background:#f97316;
  border-color:#f97316;
  color:#fff !important;
}
.cnpPage.cnpPage .cnpBtn-green:hover{ background:#ea680b; border-color:#ea680b; }

/* Compare/Offer buttons: white with green border + green text */
.cnpPage.cnpPage .cnpBtn-compare,
.cnpPage.cnpPage a.cnpBtn-compare{
  background:#fff !important;
  border-color:rgba(249,115,22,.55) !important;
  color:#ea680b !important;
  text-decoration:none !important;
}
.cnpPage.cnpPage .cnpBtn-compare:hover,
.cnpPage.cnpPage a.cnpBtn-compare:hover{
  background:#ecfdf5 !important;
  border-color:rgba(249,115,22,.65) !important;
  color:#ea680b !important;
  text-decoration:none !important;
}

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

/* Small button */
.cnpPage.cnpPage .cnpBtn-small{ padding:8px 14px; font-size:13px; }

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

.cnpPage.cnpPage .cnpQuickCard{
  border-radius:18px;
  border:1px solid #e2e8f0;
  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);
}
.cnpPage.cnpPage .cnpQuickCard h3{ font-size:15px; font-weight:900; margin-bottom:8px; color:#0f2344; }

.cnpPage.cnpPage .cnpQuickCard ul,
.cnpPage.cnpPage .cnpResult-body ul,
.cnpPage.cnpPage .cnpCallout ul{
  margin:0 !important;
  padding-left:18px !important;
  list-style-type:disc !important;
  list-style-position:outside !important;
  color:#475569;
}
.cnpPage.cnpPage .cnpQuickCard li,
.cnpPage.cnpPage .cnpResult-body li,
.cnpPage.cnpPage .cnpCallout li{ margin:8px 0; display:list-item !important; }

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

/* Tables */
.cnpPage.cnpPage .cnpTableScroll{
  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 */
.cnpPage.cnpPage table{ display:table; border-collapse:collapse; }

.cnpPage.cnpPage .cnpTable,
.cnpPage.cnpPage .cnpCompareTable{
  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-cnp-table="scroll" on the table. */
.cnpPage.cnpPage .cnpTable[data-cnp-table="scroll"],
.cnpPage.cnpPage .cnpCompareTable[data-cnp-table="scroll"]{
  min-width:640px;
}

.cnpPage.cnpPage .cnpTable th,
.cnpPage.cnpPage .cnpTable td,
.cnpPage.cnpPage .cnpCompareTable th,
.cnpPage.cnpPage .cnpCompareTable td{
  border-bottom:1px solid #e2e8f0;
  padding:10px 10px;
  text-align:left;
  vertical-align:top;
}

@media (max-width:640px){
  .cnpPage.cnpPage .cnpTable th,
  .cnpPage.cnpPage .cnpTable td,
  .cnpPage.cnpPage .cnpCompareTable th,
  .cnpPage.cnpPage .cnpCompareTable td{
    padding:8px 8px;
  }
}

.cnpPage.cnpPage .cnpTable thead th,
.cnpPage.cnpPage .cnpCompareTable thead th{
  background:#f8fafc;
  color:#0f172a;
  font-weight:850;
}

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

/* Tool shell */
.cnpPage.cnpPage .cnpToolShell{
  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){ .cnpPage.cnpPage .cnpToolShell{ padding:12px; } }

.cnpPage.cnpPage .cnpToolGrid{
  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) */
.cnpPage.cnpPage .cnpToolShell .cnpToolGrid{
  grid-template-columns:minmax(0,1.15fr) minmax(0,1.1fr);
}

.cnpPage.cnpPage .cnpToolGrid > *{ min-width:0; }
@media (max-width:900px){
  .cnpPage.cnpPage .cnpToolGrid{ grid-template-columns:minmax(0,1fr); }
  .cnpPage.cnpPage .cnpToolShell .cnpToolGrid{ grid-template-columns:minmax(0,1fr); }
}

.cnpPage.cnpPage .cnpPane,
.cnpPage.cnpPage .cnpForm,
.cnpPage.cnpPage .cnpResult{
  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){
  .cnpPage.cnpPage .cnpPane,
  .cnpPage.cnpPage .cnpForm,
  .cnpPage.cnpPage .cnpResult{
    padding:14px 14px 12px;
  }
}

.cnpPage.cnpPage .cnpPaneTitle{
  font-size:15px;
  font-weight:950;
  margin:0 0 10px;
  color:#0f2344;
}

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

.cnpPage.cnpPage .cnpField,
.cnpPage.cnpPage .cnpForm-group{ display:flex; flex-direction:column; min-width:0; margin-bottom:12px; }

.cnpPage.cnpPage .cnpField label,
.cnpPage.cnpPage .cnpForm-label{ font-weight:850; margin-bottom:6px; color:#0f172a; display:block; }

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

.cnpPage.cnpPage .cnpField input:focus,
.cnpPage.cnpPage .cnpField select:focus,
.cnpPage.cnpPage .cnpForm-input:focus,
.cnpPage.cnpPage .cnpForm-select:focus{
  outline:none;
  border-color:#2563eb;
  box-shadow:0 0 0 1px rgba(37,99,235,.35);
}

.cnpPage.cnpPage .cnpField input[type="range"]{ width:100%; }

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

.cnpPage.cnpPage .cnpHelp,
.cnpPage.cnpPage .cnpForm-help{ margin-top:6px; color:#475569; font-size:12.5px; line-height:1.55; }

.cnpPage.cnpPage .cnpError,
.cnpPage.cnpPage .cnpForm-error{ margin-top:10px; color:#dc2626; font-weight:750; }

/* Callouts */
.cnpPage.cnpPage .cnpCallout{
  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;
}
.cnpPage.cnpPage .cnpCallout h3{ font-size:15px; margin:0 0 6px; }
.cnpPage.cnpPage .cnpCallout p{ margin:0; color:#475569; font-size:13px; line-height:1.6; }

.cnpPage.cnpPage .cnpCallout-warn{ border-color:#fed7aa; background:linear-gradient(180deg,#fffbeb 0%, #fff 100%); }
.cnpPage.cnpPage .cnpCallout-blue{ border-color:#e2e8f0; background:linear-gradient(180deg,#fff7ed 0%, #fff 100%); }

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

.cnpPage.cnpPage .cnpResultTop{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
  margin-bottom:10px;
}

.cnpPage.cnpPage .cnpTag{
  display:inline-flex;
  align-items:center;
  padding:6px 10px;
  border-radius:999px;
  background:#fff7ed;
  border:1px solid #e2e8f0;
  color:#0f2344;
  font-weight:950;
  font-size:12.5px;
  white-space:nowrap;
}

.cnpPage.cnpPage .cnpNote{ color:#475569; font-size:12.5px; }

.cnpPage.cnpPage .cnpMetrics{ display:grid; grid-template-columns:1fr; gap:12px; margin-top:10px; }

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

.cnpPage.cnpPage .cnpStack{ display:grid; grid-template-columns:1fr; gap:12px; }
.cnpPage.cnpPage .cnpMiniCard{
  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);
}

.cnpPage.cnpPage .cnpMiniCard h3{ font-size:15px; margin:0 0 8px; }

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

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

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

.cnpPage.cnpPage .cnpTrafficCard{
  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;
}
.cnpPage.cnpPage .cnpTrafficCard[data-tone="green"]{ border-color:rgba(249,115,22,.35); }
.cnpPage.cnpPage .cnpTrafficCard[data-tone="yellow"]{ border-color:rgba(202,138,4,.35); }
.cnpPage.cnpPage .cnpTrafficCard[data-tone="red"]{ border-color:rgba(220,38,38,.30); }

.cnpPage.cnpPage .cnpTrafficTitle{ margin:0 0 6px; font-size:16px; font-weight:950; line-height:1.22; }
.cnpPage.cnpPage .cnpTrafficTitle.green{ color:#f97316; }
.cnpPage.cnpPage .cnpTrafficTitle.yellow{ color:#ca8a04; }
.cnpPage.cnpPage .cnpTrafficTitle.red{ color:#dc2626; }

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

.cnpPage.cnpPage .cnpFaq details,
.cnpPage.cnpPage .cnpFaqItem{ border:0; }

.cnpPage.cnpPage .cnpFaq details:not(:first-child),
.cnpPage.cnpPage .cnpFaqItem:not(:first-child){ border-top:1px solid #e2e8f0; }

.cnpPage.cnpPage .cnpFaq summary,
.cnpPage.cnpPage .cnpFaqItem 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;
}

.cnpPage.cnpPage .cnpFaq summary::-webkit-details-marker,
.cnpPage.cnpPage .cnpFaqItem summary::-webkit-details-marker{ display:none; }

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

.cnpPage.cnpPage .cnpFaq details[open] summary:after{ content:"–"; }

.cnpPage.cnpPage .cnpFaq .ans,
.cnpPage.cnpPage .cnpFaqBody{
  border-top:1px solid #e2e8f0;
  padding:12px 16px 16px;
}

.cnpPage.cnpPage .cnpFaq .ans p{ margin:0; color:#475569; }

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

.cnpPage.cnpPage .cnpRefsInner{ padding:16px 16px 14px; }
.cnpPage.cnpPage .cnpRefsLabel{ margin:0 0 10px; color:#475569; font-weight:850; font-size:12.5px; }

.cnpPage.cnpPage .cnpRefs ul,
.cnpPage.cnpPage .cnpSourcesList{
  margin:0 !important;
  padding-left:18px !important;
  list-style-type:disc !important;
  list-style-position:outside !important;
  color:#475569;
}

.cnpPage.cnpPage .cnpRefs li,
.cnpPage.cnpPage .cnpSourcesList li{ margin:8px 0; display:list-item !important; }

/* Utility: visually hidden */
.cnpPage.cnpPage .cnpSrOnly{
  position:absolute !important;
  left:-9999px !important;
  width:1px !important;
  height:1px !important;
  overflow:hidden !important;
}


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

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

.cnpPage.cnpPage .cnpLevelPill[data-level="ready"],
.cnpPage.cnpPage #vaReadyLevelPill[data-level="ready"],
.cnpPage.cnpPage #serviceLevelPill[data-level="ready"],
.cnpPage.cnpPage #propertyLevelPill[data-level="ready"]{
  background:rgba(249,115,22,.10);
  border-color:rgba(249,115,22,.35);
  color:#ea680b;
}

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

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

/* Score bar (optional) */
.cnpPage.cnpPage .cnpScoreTrack{
  height:10px;
  border-radius:999px;
  background:#e2e8f0;
  overflow:hidden;
}
.cnpPage.cnpPage .cnpScoreBar,
.cnpPage.cnpPage #vaReadyScoreBar,
.cnpPage.cnpPage #serviceScoreBar,
.cnpPage.cnpPage #propertyScoreBar{
  height:10px;
  border-radius:999px;
  width:0%;
  background:#0f2344;
  transition:width .25s ease;
}



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

/* Divi sometimes injects <br> between pill links and inside paragraphs */
.cnpPage.cnpPage .cnpPills br,
.cnpPage.cnpPage .cnpPills br,
.cnpPage.cnpPage .cnpHeroLead br,
.cnpPage.cnpPage .cnpHeroLead br { display:none !important; }

/* Divi sometimes injects <p>&nbsp;</p> into grid wrappers (breaks layout) */
.cnpPage.cnpPage .cnpToolGrid > p,
.cnpPage.cnpPage .cnpToolGrid > p,
.cnpPage.cnpPage .cnpToolGrid > br,
.cnpPage.cnpPage .cnpToolGrid > br,
.cnpPage.cnpPage .cnpRow2 > p,
.cnpPage.cnpPage .cnpRow2 > p,
.cnpPage.cnpPage .cnpRow2 > br,
.cnpPage.cnpPage .cnpRow2 > br,
.cnpPage.cnpPage .cnpBtnRow > p,
.cnpPage.cnpPage .cnpBtnRow > p,
.cnpPage.cnpPage .cnpBtnRow > br,
.cnpPage.cnpPage .cnpBtnRow > br,
.cnpPage.cnpPage .cnpResultTop > p,
.cnpPage.cnpPage .cnpResultTop > p,
.cnpPage.cnpPage .cnpResultTop > br,
.cnpPage.cnpPage .cnpResultTop > br { display:none !important; margin:0 !important; padding:0 !important; }

/* Force primary/success button text to white (Divi can override link colors) */
.cnpPage.cnpPage a.cnpBtn.cnpBtn-primary,
.cnpPage.cnpPage a.cnpBtn.cnpBtn-primary,
.cnpPage.cnpPage a.cnpBtn.cnpBtn-success,
.cnpPage.cnpPage a.cnpBtn.cnpBtn-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) */
.cnpPage.cnpPage a.cnpBtn.cnpBtn-compare,
.cnpPage.cnpPage a.cnpBtn.cnpBtn-compare,
.cnpPage.cnpPage button.cnpBtn.cnpBtn-compare,
.cnpPage.cnpPage button.cnpBtn.cnpBtn-compare {
  color:#ea680b !important;
  -webkit-text-fill-color:#ea680b !important;
}

/* Lane tones */
.cnpPage.cnpPage .cnpLaneGreen,
.cnpPage.cnpPage .cnpLaneGreen { color:#ea680b !important; }
.cnpPage.cnpPage .cnpLaneYellow,
.cnpPage.cnpPage .cnpLaneYellow { color:#ca8a04 !important; }
.cnpPage.cnpPage .cnpLaneRed,
.cnpPage.cnpPage .cnpLaneRed { 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 */
  .cnpPage.cnpPage,
  .cnpPage{
    background: #ffffff !important;
    padding: 0 !important;
  }

  .cnpPage.cnpPage .cnpWrap,
  .cnpPage.cnpPage .cnpWrap{
    padding: 0 !important;
  }

  /* 2) Remove boxed containers (keep structure, lose the chrome) */
  .cnpPage.cnpPage .cnpCard,
  .cnpPage.cnpPage .cnpCard,
  .cnpPage.cnpPage .cnpSection,
  .cnpPage.cnpPage .cnpSection,
  .cnpPage.cnpPage .cnpHero-quick,
  .cnpPage.cnpPage .cnpHero-quick,
  .cnpPage.cnpPage .cnpHero-quickCard,
  .cnpPage.cnpPage .cnpHero-quickCard,
  .cnpPage.cnpPage .cnpQuickCard,
  .cnpPage.cnpPage .cnpQuickCard,
  .cnpPage.cnpPage .cnpToolShell,
  .cnpPage.cnpPage .cnpToolShell,
  .cnpPage.cnpPage .cnpPane,
  .cnpPage.cnpPage .cnpPane,
  .cnpPage.cnpPage .cnpForm,
  .cnpPage.cnpPage .cnpForm,
  .cnpPage.cnpPage .cnpResult,
  .cnpPage.cnpPage .cnpResult,
  .cnpPage.cnpPage .cnpTypes-grid,
  .cnpPage.cnpPage .cnpTypes-grid,
  .cnpPage.cnpPage .cnpTypeTabs,
  .cnpPage.cnpPage .cnpTypeTabs,
  .cnpPage.cnpPage .cnpTypeDetail,
  .cnpPage.cnpPage .cnpTypeDetail,
  .cnpPage.cnpPage .cnpFaqList,
  .cnpPage.cnpPage .cnpFaqList,
  .cnpPage.cnpPage .cnpFaqItem,
  .cnpPage.cnpPage .cnpFaqItem,
  .cnpPage.cnpPage .cnpRefs,
  .cnpPage.cnpPage .cnpRefs,
  .cnpPage.cnpPage .cnpSources,
  .cnpPage.cnpPage .cnpSources,
  .cnpPage.cnpPage .cnpMiniCard,
  .cnpPage.cnpPage .cnpMiniCard{
    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 */
  .cnpPage.cnpPage .cnpCard-inner,
  .cnpPage.cnpPage .cnpCard-inner,
  .cnpPage.cnpPage .cnpSectionHead,
  .cnpPage.cnpPage .cnpSectionHead,
  .cnpPage.cnpPage .cnpSection-head,
  .cnpPage.cnpPage .cnpSection-head{
    padding: 0 !important;
  }

  /* 4) Hide above-the-fold “chrome” that wastes space */
  .cnpPage.cnpPage .cnpBreadcrumb,
  .cnpPage.cnpPage .cnpBreadcrumb,
  .cnpPage.cnpPage .cnpHero-eyebrow,
  .cnpPage.cnpPage .cnpHero-eyebrow,
  .cnpPage.cnpPage .cnpEyebrow,
  .cnpPage.cnpPage .cnpEyebrow,
  .cnpPage.cnpPage .cnpHero-meta,
  .cnpPage.cnpPage .cnpHero-meta,
  .cnpPage.cnpPage .cnpHero .cnpMeta,
  .cnpPage.cnpPage .cnpHero .cnpMeta,
  .cnpPage.cnpPage .cnpHero-jumps,
  .cnpPage.cnpPage .cnpHero-jumps,
  .cnpPage.cnpPage .cnpPills,
  .cnpPage.cnpPage .cnpPills{
    display: none !important;
  }

  /* 5) Keep things readable when we remove cards */
  .cnpPage.cnpPage .cnpSection,
  .cnpPage.cnpPage .cnpSection{
    margin: 18px 0 !important;
  }

  .cnpPage.cnpPage .cnpHero,
  .cnpPage.cnpPage .cnpHero{
    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 cnpHero-* class variants; ensure their
   <strong> styles match the newer vln* classes.
   ======================================================================= */

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

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

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

.cnpPage.cnpPage .cnpHero-meta strong,
.cnpPage.cnpPage .cnpHero-meta strong{
  color: var(--cnpInk);
  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) */
.cnpPage.cnpPage .cnpSkip,
.cnpPage.cnpPage .cnpSkip{
  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;
}

.cnpPage.cnpPage .cnpSkip:focus,
.cnpPage.cnpPage .cnpSkip: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 */
  .cnpPage.cnpPage,
  .cnpPage{
    overflow-x: hidden !important;
  }

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

  /* Keep normal bullets inside those cards */
  .cnpPage.cnpPage .cnpQuickCard ul,
  .cnpPage.cnpPage .cnpQuickCard ul,
  .cnpPage.cnpPage .cnpHero-quickCard ul,
  .cnpPage.cnpPage .cnpHero-quickCard ul{
    padding-left: 20px !important;
    list-style: disc !important;
  }

  /* Reduce scroll-chaining into the page when swiping horizontally in a table/pill scroller */
  .cnpPage.cnpPage .cnpTableScroll,
  .cnpPage.cnpPage .cnpTableScroll,
  .cnpPage.cnpPage .cnpPills,
  .cnpPage.cnpPage .cnpPills{
    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.
   ========================================================== */

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

.cnpPage.cnpPage :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(--cnpFont) !important;
}

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

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

.cnpPage.cnpPage .cnpBreadcrumb,
.cnpPage.cnpPage .cnpBreadcrumb *{
  text-transform: none !important;
  letter-spacing: normal !important;
}
.cnpPage.cnpPage .cnpBreadcrumb .sep{
  color: var(--cnpMuted) !important;
}

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

.cnpPage.cnpPage .cnpEyebrow,
.cnpPage.cnpPage .cnpEyebrow *,
.cnpPage.cnpPage .cnpHero-eyebrow,
.cnpPage.cnpPage .cnpHero-eyebrow *{
  text-transform: none !important;
  letter-spacing: normal !important;
}

/* Default link color inside VLN pages (exclude buttons) */
.cnpPage.cnpPage a:not(.cnpBtn):not(.cnpPill):not(.cnpJumpPill){
  color: var(--cnpHeading) !important;
}

/* Pills should not inherit theme link styles */
.cnpPage.cnpPage .cnpPill,
.cnpPage.cnpPage .cnpJumpPill{
  color: var(--cnpHeadingSoft, #0f2344) !important;
  text-decoration: none !important;
}

.cnpPage.cnpPage .cnpPill,
.cnpPage.cnpPage .cnpJumpPill{
  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.
====================================================================== */

.cnpPage.cnpPage,
.cnpPage{
  --cnpFont: system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji";
  --cnpInk: #0f172a;
  --cnpHeading: #0f2344;
  --cnpMuted: #475569;
  --cnpLine: rgba(37,99,235,.25);
  --cnpHeadingSoft: #0f2344;
  --cnpGood: #f97316;
  --cnpGreenBg: rgba(255,255,255,.85);
  --cnpGreenLine: rgba(249,115,22,.35);
}

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

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

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

/* Text links (do NOT clobber buttons or pills) */
.cnpPage.cnpPage a:not(.cnpBtn):not(.cnpPill):not(.cnpJumpPill),
.cnpPage.cnpPage a:not(.cnpBtn):not(.cnpPill):not(.cnpJumpPill){
  color: var(--cnpHeading) !important;
  text-decoration: none;
}
.cnpPage.cnpPage a:not(.cnpBtn):not(.cnpPill):not(.cnpJumpPill):hover,
.cnpPage.cnpPage a:not(.cnpBtn):not(.cnpPill):not(.cnpJumpPill):hover{
  text-decoration: underline;
}

/* Breadcrumb + Primary sources (meta) */
.cnpPage.cnpPage .cnpBreadcrumb,
.cnpPage.cnpPage .cnpBreadcrumb,
.cnpPage.cnpPage .cnpMeta,
.cnpPage.cnpPage .cnpMeta,
.cnpPage.cnpPage .cnpHero-meta,
.cnpPage.cnpPage .cnpHero-meta{
  color: var(--cnpMuted) !important;
}

.cnpPage.cnpPage .cnpBreadcrumb a,
.cnpPage.cnpPage .cnpBreadcrumb a{
  color: var(--cnpHeading) !important;
  text-decoration: none;
}
.cnpPage.cnpPage .cnpBreadcrumb a:hover,
.cnpPage.cnpPage .cnpBreadcrumb a:hover{
  text-decoration: underline;
}

.cnpPage.cnpPage .cnpMeta a,
.cnpPage.cnpPage .cnpMeta a,
.cnpPage.cnpPage .cnpHero-meta a,
.cnpPage.cnpPage .cnpHero-meta a{
  color: var(--cnpHeading) !important;
  font-weight: 800;
  text-decoration: none;
}
.cnpPage.cnpPage .cnpMeta a:hover,
.cnpPage.cnpPage .cnpMeta a:hover,
.cnpPage.cnpPage .cnpHero-meta a:hover,
.cnpPage.cnpPage .cnpHero-meta a:hover{
  text-decoration: underline;
}

/* Fix WP/Divi auto-inserted line breaks inside meta/breadcrumbs */
.cnpPage.cnpPage .cnpMeta br,
.cnpPage.cnpPage .cnpMeta br,
.cnpPage.cnpPage .cnpHero-meta br,
.cnpPage.cnpPage .cnpHero-meta br,
.cnpPage.cnpPage .cnpBreadcrumb br,
.cnpPage.cnpPage .cnpBreadcrumb br,
.cnpPage.cnpPage .cnpHero-eyebrow br,
.cnpPage.cnpPage .cnpHero-eyebrow br,
.cnpPage.cnpPage .cnpEyebrow br,
.cnpPage.cnpPage .cnpEyebrow br{
  display:none !important;
}

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

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


/* === VLN consistency fixes (v1.4.7) === */
.cnpPage.cnpPage .cnpMeta,
.cnpPage.cnpPage .cnpMeta{
  display:flex !important;
  flex-wrap:wrap !important;
  align-items:center !important;
  gap:8px !important;
}
.cnpPage.cnpPage .cnpMeta > span,
.cnpPage.cnpPage .cnpMeta > span,
.cnpPage.cnpPage .cnpMeta > p,
.cnpPage.cnpPage .cnpMeta > 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 */
.cnpPage.cnpPage .cnpQuickCard :is(h2,h3,h4),
.cnpPage.cnpPage .cnpQuickCard :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 */
.cnpPage.cnpPage .cnpEyebrow,
.cnpPage.cnpPage .cnpEyebrow,
.cnpPage.cnpPage .cnpHero-eyebrow,
.cnpPage.cnpPage .cnpHero-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 ".cnpPage.cnpPage" 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) */
.cnpPage.cnpPage,
.cnpPage.cnpPage{
  font-family: var(--cnpFont, system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif) !important;
  color: var(--cnpInk, #0f172a) !important;
}

/* Headings: always brand navy */
.cnpPage.cnpPage h1,
.cnpPage.cnpPage h2,
.cnpPage.cnpPage h3,
.cnpPage.cnpPage h4,
.cnpPage.cnpPage h1,
.cnpPage.cnpPage h2,
.cnpPage.cnpPage h3,
.cnpPage.cnpPage h4{
  color: var(--cnpHeading, #0f2344) !important;
}

/* Non-pill/non-button links use brand navy (keeps sources consistent) */
.cnpPage.cnpPage a:not(.cnpBtn):not(.cnpPill):not(.cnpJumpPill),
.cnpPage.cnpPage a:not(.cnpBtn):not(.cnpPill):not(.cnpJumpPill){
  color: var(--cnpHeading, #0f2344) !important;
}

/* Breadcrumbs: always muted grey (links included) */
.cnpPage.cnpPage .cnpBreadcrumb,
.cnpPage.cnpPage .cnpBreadcrumb a,
.cnpPage.cnpPage .cnpBreadcrumb,
.cnpPage.cnpPage .cnpBreadcrumb a{
  color: var(--cnpMuted, #475569) !important;
}
.cnpPage.cnpPage .cnpBreadcrumb a:hover,
.cnpPage.cnpPage .cnpBreadcrumb a:hover{
  color: var(--cnpHeading, #0f2344) !important;
  text-decoration: underline;
}

/* Pills: always brand navy text */
.cnpPage.cnpPage .cnpPill,
.cnpPage.cnpPage .cnpJumpPill,
.cnpPage.cnpPage .cnpPill,
.cnpPage.cnpPage .cnpJumpPill{
  color: var(--cnpHeading, #0f2344) !important;
  border-color: #bcd3ff !important;
}

/* Ensure themes can't restyle pill text via -webkit-text-fill-color */
.cnpPage.cnpPage .cnpPill,
.cnpPage.cnpPage .cnpJumpPill,
.cnpPage.cnpPage .cnpPill,
.cnpPage.cnpPage .cnpJumpPill{
  -webkit-text-fill-color: var(--cnpHeading, #0f2344) !important;
}

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

  .cnpPage.cnpPage .cnpBreadcrumb,
  .cnpPage.cnpPage .cnpBreadcrumb,
  .cnpPage.cnpPage .cnpEyebrow,
  .cnpPage.cnpPage .cnpEyebrow,
  .cnpPage.cnpPage .cnpHero-eyebrow,
  .cnpPage.cnpPage .cnpHero-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 .cnpTable/.valnTable by default.
   Numeric body cells stay non-wrapping via the .num class. */
.cnpPage.cnpPage .cnpTable th,
.cnpPage.cnpPage .cnpTable td,
.cnpPage.cnpPage .valnTable th,
.cnpPage.cnpPage .valnTable td{
  white-space: normal !important;
  overflow-wrap: anywhere;
  word-break: normal;
}

/* Keep numeric body cells tidy */
.cnpPage.cnpPage .cnpTable tbody td.num,
.cnpPage.cnpPage .valnTable tbody td.num{
  white-space: nowrap !important;
}

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

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

.cnpPage.cnpPage .cnpFaq summary,
.cnpPage.cnpPage .cnpFaq summary{
  border-radius: 16px;
}

.cnpPage.cnpPage .cnpFaq summary:focus-visible,
.cnpPage.cnpPage .cnpFaq details[open] > summary,
.cnpPage.cnpPage .cnpFaq summary:focus-visible,
.cnpPage.cnpPage .cnpFaq details[open] > summary{
  box-shadow: inset 0 0 0 2px rgba(59,130,246,.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 */
.cnpPage.cnpPage .cnpFaq summary:focus-visible,
.cnpPage.cnpPage .cnpFaq details[open] > summary,
.cnpPage.cnpPage .cnpFaq summary:focus-visible,
.cnpPage.cnpPage .cnpFaq details[open] > summary{
  box-shadow: none !important;
}

/* Draw a crisp rounded ring *inside* the summary row */
.cnpPage.cnpPage .cnpFaq summary::before,
.cnpPage.cnpPage .cnpFaq summary::before{
  content: "";
  position: absolute;
  inset: 2px;
  border-radius: 14px;
  border: 2px solid rgba(59,130,246,.45);
  opacity: 0;
  pointer-events: none;
  transition: opacity .15s ease;
}

.cnpPage.cnpPage .cnpFaq summary:focus-visible::before,
.cnpPage.cnpPage .cnpFaq details[open] > summary::before,
.cnpPage.cnpPage .cnpFaq summary:focus-visible::before,
.cnpPage.cnpPage .cnpFaq 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 .cnpToolShell so snapshot grids are unaffected. */
  .cnpPage.cnpPage .cnpToolShell .cnpToolGrid > .cnpPane:nth-child(2),
  .cnpPage.cnpPage .cnpToolShell .cnpToolGrid > .cnpPane:nth-child(2){
    position: sticky;
    top: var(--cnpStickyTop, 12px);
    align-self: start;
  }
}

/* Center CTA buttons inside result cards (e.g., Credit tool snapshot CTAs) */
.cnpPage.cnpPage .cnpResultMain .cnpBtnRow,
.cnpPage.cnpPage .cnpResultMain .cnpBtnRow{
  justify-content: center;
}

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

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

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

  --ink: #0b1f3a;
  --muted: #5b6573;
  --border: rgba(11, 31, 58, 0.14);
  --surface: #ffffff;
  --link: #2563eb;
  --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: 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:#3b82f6;
  --brand-600:#2563eb;
  --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:#fff7ed;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(37,99,235,.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%, #2563eb 55%, #3b82f6 100%);
  background-size:100% 100%;
  box-shadow:0 8px 24px rgba(37,99,235,.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(37,99,235,.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(37,99,235,.35), 0 10px 28px rgba(37,99,235,.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) */
.cnpPage.cnpPage,
.cnpPage.cnpPage{
  --cnpPadTopD: 18px;
  --cnpPadBotD: 44px;
  --cnpPadXD: 16px;
  --cnpPadTopM: 12px;
  --cnpPadBotM: 28px;
  --cnpPadXM: 16px;
  --cnpOuterMTD: 0px;
  --cnpOuterMTM: -40px;
  --cnpPostOuterMTD: -20px;
  --cnpPostOuterMTM: 0px;
  --cnpContentMax: 1120px;
  --cnpCardRadius: 24px;
  --cnpHeadingFont: var(--cnpFont, system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif);
}

/* Wrapper spacing (beats theme/builder padding rules) */
.cnpPage.cnpPage,
.cnpPage.cnpPage{
  box-sizing: border-box;
  clear: both !important;
  font-size: 14px;
  line-height: 1.65;
  padding: var(--cnpPadTopD) var(--cnpPadXD) var(--cnpPadBotD) !important;
  /* Base top offset (admin setting) + optional auto-normalized adjustment */
  margin-top: calc(var(--cnpOuterMTD) + var(--cnpAutoMTD, 0px)) !important;
}

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

@media (max-width: 760px){
  .cnpPage.cnpPage,
  .cnpPage.cnpPage{
    font-size: 16px;
    padding: var(--cnpPadTopM) var(--cnpPadXM) var(--cnpPadBotM) !important;
    /* Base top offset (admin setting) + optional auto-normalized adjustment */
    margin-top: calc(var(--cnpOuterMTM) + var(--cnpAutoMTM, 0px)) !important;
  }

  body.single:not(.page) .cnpPage.cnpPage,
  body.single:not(.page) .cnpPage.cnpPage{
    margin-top: calc(var(--cnpOuterMTM) + var(--cnpPostOuterMTM) + var(--cnpAutoMTM, 0px)) !important;
  }
}

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

/* Content column */
.cnpPage.cnpPage .cnpWrap,
.cnpPage.cnpPage .cnpWrap{
  max-width: var(--cnpContentMax) !important;
}

/* Card radius */
.cnpPage.cnpPage .cnpCard,
.cnpPage.cnpPage .cnpCard{
  border-radius: var(--cnpCardRadius) !important;
}

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

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

.cnpPage.cnpPage .cnpNextLabel,
.cnpPage.cnpPage .cnpNextLabel{
  color:#475569;
  font-weight:800;
}

.cnpPage.cnpPage .cnpNextLink,
.cnpPage.cnpPage .cnpNextLink{
  color:#f97316 !important;
  -webkit-text-fill-color:#f97316 !important;
  font-weight:900;
  text-decoration:none !important;
}

.cnpPage.cnpPage .cnpNextLink:hover,
.cnpPage.cnpPage .cnpNextLink:hover{ text-decoration:underline !important; }

/* Fix: FAQ ring pseudo-element must be anchored to the summary row */
.cnpPage.cnpPage .cnpFaq summary,
.cnpPage.cnpPage .cnpFaq 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. */
.cnpPage.cnpPage > br,
.cnpPage.cnpPage > br{
  display:none !important;
}

/* Keep "Next step" pill from turning into a tall stack when wpautop inserts <br> */
.cnpPage.cnpPage .cnpNextPill br,
.cnpPage.cnpPage .cnpNextPill 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. */
  .cnpPage.cnpPage,
  .cnpPage{
    width:100% !important;
    max-width:100% !important;
    margin-left:0 !important;
    margin-right:0 !important;
  }

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

  /* Disable jump pills on mobile */
  .cnpPage.cnpPage .cnpPills,
  .cnpPage.cnpPage .cnpPills,
  .cnpPage.cnpPage .cnpHero-jumps,
  .cnpPage.cnpPage .cnpHero-jumps{
    display:none !important;
  }

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

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

.cnpPage.cnpPage .cnpFaq summary::before,
.cnpPage.cnpPage .cnpFaq 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 --cnpBleedML 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). */
.cnpPage.cnpPage .cnpSrOnly,
.cnpPage.cnpPage .cnpSrOnly,
.cnpPage.cnpPage .cnpHpWrap,
.cnpPage.cnpPage .cnpHpWrap{
  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). */
.cnpPage.cnpPage > br,
.cnpPage.cnpPage > br{
  display:none !important;
}

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

@media (max-width: 820px){
  html.cnp-ip-has-page,
  body.cnp-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. */
  .cnpPage.cnpPage,
  .cnpPage.cnpPage{
    padding-left: calc(var(--cnpPadXM, 12px) + env(safe-area-inset-left)) !important;
    padding-right: calc(var(--cnpPadXM, 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){
  .cnpPage.cnpPage .cnpNextPill,
  .cnpPage.cnpPage .cnpNextPill{
    flex-wrap: wrap;
    row-gap: 4px;
  }

  .cnpPage.cnpPage .cnpNextLink,
  .cnpPage.cnpPage .cnpNextLink{
    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 + --cnpBleedML.
*/
@media (max-width: 820px){
  /* Default: no breakout (prevents sideways drift on templates with odd wrappers) */
  .cnpPage.cnpPage,
  .cnpPage{
    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.cnp-ip-has-page,
  body.cnp-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.
--- */
.cnpPage.cnpPage .cnpFaq,
.cnpPage.cnpPage .cnpFaqList,
.cnpPage.cnpPage .cnpFaq,
.cnpPage.cnpPage .cnpFaqList{
  box-shadow: none !important;
}

.cnpPage.cnpPage .cnpFaq,
.cnpPage.cnpPage .cnpFaqList{
  box-shadow: none !important;
}

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

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

.cnpFaq summary::-webkit-details-marker,
.valnFaq summary::-webkit-details-marker,
details.cnpFaq > summary::-webkit-details-marker,
details.valnFaq > summary::-webkit-details-marker{
  display: none;
}

/* Give the FAQ block breathing room so it cannot visually overlap the author box below. */
.cnpFaq,
.valnFaq,
details.cnpFaq,
details.valnFaq{
  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 .cnpFaq wrapper),
   still apply a sane accordion style inside VLN wrappers. */
.cnpPage.cnpPage details,
.cnpPage.cnpPage details{
  background: #fff;
  border: 1px solid #c9d8ff;
  border-radius: 16px;
  overflow: hidden;
}
.cnpPage.cnpPage details + details,
.cnpPage.cnpPage details + details{
  margin-top: 12px;
}
.cnpPage.cnpPage details > summary,
.cnpPage.cnpPage 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;
}
.cnpPage.cnpPage details > summary::after,
.cnpPage.cnpPage 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: #0f2344;
}
.cnpPage.cnpPage details[open] > summary::after,
.cnpPage.cnpPage details[open] > summary::after{
  content: "–";
}
.cnpPage.cnpPage details > *:not(summary),
.cnpPage.cnpPage details > *:not(summary){
  padding: 0 18px 16px;
  color: #334155;
}
/* ===========================
   VLN Traffic-Light Callouts
   Scoped to .cnpPage.cnpPage only
   =========================== */

.cnpPage.cnpPage .bullet-section-green,
.cnpPage.cnpPage .bullet-section-yellow,
.cnpPage.cnpPage .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 */
.cnpPage.cnpPage .bullet-section-green {
  background: #ecfdf5; /* soft green */
  border-color: rgba(249, 115, 22, 0.35);
}
.cnpPage.cnpPage .bullet-section-yellow {
  background: #fffbeb; /* soft amber */
  border-color: rgba(245, 158, 11, 0.40);
}
.cnpPage.cnpPage .bullet-section-red {
  background: #fef2f2; /* soft red */
  border-color: rgba(239, 68, 68, 0.38);
}

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

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

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

/* Optional: small “badge” label */
.cnpPage.cnpPage .cnpBadge {
  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;
}
.cnpPage.cnpPage .cnpBadge--green { background: rgba(249,115,22,0.10); border-color: rgba(249,115,22,0.35); }
.cnpPage.cnpPage .cnpBadge--yellow { background: rgba(245,158,11,0.12); border-color: rgba(245,158,11,0.40); }
.cnpPage.cnpPage .cnpBadge--red { background: rgba(239,68,68,0.10); border-color: rgba(239,68,68,0.38); }

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

.cnpPage.cnpPage .cnpGrid2,
.cnpPage.cnpPage .cnpGrid3 {
  display: grid;
  gap: 16px;
  align-items: start;
}

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

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

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

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

/* Base callout/card */
.cnpPage.cnpPage .cnpCallout{
  /* defaults (can be overridden by variants below) */
  --cnpCalloutBg: #ffffff;
  --cnpCalloutBorder: rgba(15, 23, 42, 0.12);
  --cnpCalloutAccent: #f59e0b; /* default accent (amber) */

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

.cnpPage.cnpPage .cnpCallout > *:first-child{ margin-top: 0; }
.cnpPage.cnpPage .cnpCallout > *:last-child{ margin-bottom: 0; }

/* Kicker row (yellow square + label like "Pro Tip", "Disclosure") */
.cnpPage.cnpPage .cnpCalloutKicker{
  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;
}

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

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

/* Body text inside callouts */
.cnpPage.cnpPage .cnpCallout p,
.cnpPage.cnpPage .cnpCallout li{
  color: #334155;
}

/* Lists inside callouts */
.cnpPage.cnpPage .cnpCallout ul,
.cnpPage.cnpPage .cnpCallout ol{
  margin: 10px 0 0 18px;
  padding: 0;
}
.cnpPage.cnpPage .cnpCallout li{ margin: 6px 0; }

/* --- Variants --- */

/* PRO TIP (yellow) */
.cnpPage.cnpPage .cnpCallout--tip{
  --cnpCalloutBg: #fff7e6;          /* soft amber */
  --cnpCalloutBorder: rgba(245, 158, 11, 0.40);
  --cnpCalloutAccent: #f59e0b;
}

/* DISCLOSURE (neutral gray “official looking”) */
.cnpPage.cnpPage .cnpCallout--disclosure{
  --cnpCalloutBg: #f8fafc;
  --cnpCalloutBorder: rgba(100, 116, 139, 0.28);
  --cnpCalloutAccent: #64748b;
}

/* NOTE (blue-ish) */
.cnpPage.cnpPage .cnpCallout--note{
  --cnpCalloutBg: #fff7ed;
  --cnpCalloutBorder: rgba(59, 130, 246, 0.35);
  --cnpCalloutAccent: #2563eb;
}

/* WARNING (red-ish) */
.cnpPage.cnpPage .cnpCallout--warning{
  --cnpCalloutBg: #fff1f2;
  --cnpCalloutBorder: rgba(239, 68, 68, 0.35);
  --cnpCalloutAccent: #ef4444;
}

/* =========================================================
   Optional: compact inline badges (if you want)
   ========================================================= */
.cnpPage.cnpPage .cnpBadge{
  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;
}

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

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

.cnpPage.cnpPage .cnpBadge--disclosure{
  background: #f8fafc;
  border-color: rgba(100, 116, 139, 0.28);
}
.cnpPage.cnpPage .cnpBadge--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="cnpPage main-content"
   ----------------------------- */
.cnpPage.main-content h2,
.cnpPage.main-content h2{
  margin: 28px 0 12px;
}

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

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

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

/* Hide empty headings that Divi/wpautop sometimes injects */
.cnpPage.main-content h2:empty,
.cnpPage.main-content h3:empty,
.cnpPage.main-content h2:empty,
.cnpPage.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
   ----------------------------- */
.cnpPage.cnpPage .bullet-section-gray,
.cnpPage.cnpPage .bullet-section-blue,
.cnpPage.cnpPage .bullet-section-yellow,
.cnpPage.cnpPage .bullet-section-green,
.cnpPage.cnpPage .bullet-section-red,
.cnpPage.cnpPage .bullet-section-gray,
.cnpPage.cnpPage .bullet-section-blue,
.cnpPage.cnpPage .bullet-section-yellow,
.cnpPage.cnpPage .bullet-section-green,
.cnpPage.cnpPage .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 */
.cnpPage.cnpPage .bullet-section-gray h3,
.cnpPage.cnpPage .bullet-section-blue h3,
.cnpPage.cnpPage .bullet-section-yellow h3,
.cnpPage.cnpPage .bullet-section-green h3,
.cnpPage.cnpPage .bullet-section-red h3,
.cnpPage.cnpPage .bullet-section-gray h3,
.cnpPage.cnpPage .bullet-section-blue h3,
.cnpPage.cnpPage .bullet-section-yellow h3,
.cnpPage.cnpPage .bullet-section-green h3,
.cnpPage.cnpPage .bullet-section-red h3{
  margin: 0 0 8px;
  font-size: 16px;
  font-weight: 900;
  color: #0f2344;
}

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

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

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

.cnpPage.cnpPage .bullet-section-blue,
.cnpPage.cnpPage .bullet-section-blue{
  background: #fff7ed;
  border-color: #e2e8f0;
  border-left: 6px solid #3b82f6;
}

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

.cnpPage.cnpPage .bullet-section-green,
.cnpPage.cnpPage .bullet-section-green{
  background: #ecfdf5;
  border-color: #bbf7d0;
  border-left: 6px solid #f97316;
}

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


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

/* Make callouts breathe (top + bottom) */
.cnpPage.cnpPage .cnpCallout,
.cnpPage.cnpPage .cnpCallout{
  margin: 16px 0;
}

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

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

/* GREEN */
.cnpPage.cnpPage .cnpCallout.cnpCallout-green,
.cnpPage.cnpPage .cnpCallout-green,
.cnpPage.cnpPage .cnpCallout.cnpCallout-green,
.cnpPage.cnpPage .cnpCallout-green{
  background: #ecfdf5;
  border-color: #bbf7d0;
  border-left: 6px solid #f97316;
}

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

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

/* Pro Tip (blue) — your markup: <div class="cnpCallout cnpProTip"> */
.cnpPage.cnpPage .cnpCallout.cnpProTip,
.cnpPage.cnpPage .cnpProTip,
.cnpPage.cnpPage .cnpCallout.cnpProTip,
.cnpPage.cnpPage .cnpProTip{
  background: #fff7ed;
  border-color: #e2e8f0;
  border-left: 6px solid #2563eb;
}

/* Disclosure / Resources (smaller text) — your markup: <div class="cnpCallout cnpDisclosure"> */
.cnpPage.cnpPage .cnpCallout.cnpDisclosure,
.cnpPage.cnpPage .cnpDisclosure,
.cnpPage.cnpPage .cnpCallout.cnpDisclosure,
.cnpPage.cnpPage .cnpDisclosure{
  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 */
.cnpPage.cnpPage .cnpDisclosure h2,
.cnpPage.cnpPage .cnpDisclosure h3,
.cnpPage.cnpPage .cnpDisclosure h2,
.cnpPage.cnpPage .cnpDisclosure h3{
  font-size: 16px;
  font-weight: 950;
  color: #0f2344;
  margin: 0 0 10px;
}

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

.cnpPage.cnpPage .cnpDisclosure li,
.cnpPage.cnpPage .cnpDisclosure li{
  margin: 6px 0;
}

/* Resources links: make them obviously links even if theme tries to kill underlines */
.cnpPage.cnpPage .cnpDisclosure a,
.cnpPage.cnpPage .cnpDisclosure 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="cnpPage main-content"
   ----------------------------- */
.cnpPage.main-content h2,
.cnpPage.main-content h2{
  margin: 28px 0 12px;
}

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

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

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

/* Hide empty headings that Divi/wpautop sometimes injects */
.cnpPage.main-content h2:empty,
.cnpPage.main-content h3:empty,
.cnpPage.main-content h2:empty,
.cnpPage.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
   ----------------------------- */
.cnpPage.cnpPage .bullet-section-gray,
.cnpPage.cnpPage .bullet-section-blue,
.cnpPage.cnpPage .bullet-section-yellow,
.cnpPage.cnpPage .bullet-section-green,
.cnpPage.cnpPage .bullet-section-red,
.cnpPage.cnpPage .bullet-section-gray,
.cnpPage.cnpPage .bullet-section-blue,
.cnpPage.cnpPage .bullet-section-yellow,
.cnpPage.cnpPage .bullet-section-green,
.cnpPage.cnpPage .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 */
.cnpPage.cnpPage .bullet-section-gray h3,
.cnpPage.cnpPage .bullet-section-blue h3,
.cnpPage.cnpPage .bullet-section-yellow h3,
.cnpPage.cnpPage .bullet-section-green h3,
.cnpPage.cnpPage .bullet-section-red h3,
.cnpPage.cnpPage .bullet-section-gray h3,
.cnpPage.cnpPage .bullet-section-blue h3,
.cnpPage.cnpPage .bullet-section-yellow h3,
.cnpPage.cnpPage .bullet-section-green h3,
.cnpPage.cnpPage .bullet-section-red h3{
  margin: 0 0 8px;
  font-size: 16px;
  font-weight: 900;
  color: #0f2344;
}

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

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

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

.cnpPage.cnpPage .bullet-section-blue,
.cnpPage.cnpPage .bullet-section-blue{
  background: #fff7ed;
  border-color: #e2e8f0;
  border-left: 6px solid #3b82f6;
}

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

.cnpPage.cnpPage .bullet-section-green,
.cnpPage.cnpPage .bullet-section-green{
  background: #ecfdf5;
  border-color: #bbf7d0;
  border-left: 6px solid #f97316;
}

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


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

/* Make callouts breathe (top + bottom) */
.cnpPage.cnpPage .cnpCallout,
.cnpPage.cnpPage .cnpCallout{
  margin: 16px 0;
}

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

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

/* GREEN */
.cnpPage.cnpPage .cnpCallout.cnpCallout-green,
.cnpPage.cnpPage .cnpCallout-green,
.cnpPage.cnpPage .cnpCallout.cnpCallout-green,
.cnpPage.cnpPage .cnpCallout-green{
  background: #ecfdf5;
  border-color: #bbf7d0;
  border-left: 6px solid #f97316;
}

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

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

/* Pro Tip (blue) — your markup: <div class="cnpCallout cnpProTip"> */
.cnpPage.cnpPage .cnpCallout.cnpProTip,
.cnpPage.cnpPage .cnpProTip,
.cnpPage.cnpPage .cnpCallout.cnpProTip,
.cnpPage.cnpPage .cnpProTip{
  background: #fff7ed;
  border-color: #e2e8f0;
  border-left: 6px solid #2563eb;
}

/* Disclosure / Resources (smaller text) — your markup: <div class="cnpCallout cnpDisclosure"> */
.cnpPage.cnpPage .cnpCallout.cnpDisclosure,
.cnpPage.cnpPage .cnpDisclosure,
.cnpPage.cnpPage .cnpCallout.cnpDisclosure,
.cnpPage.cnpPage .cnpDisclosure{
  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 */
.cnpPage.cnpPage .cnpDisclosure h2,
.cnpPage.cnpPage .cnpDisclosure h3,
.cnpPage.cnpPage .cnpDisclosure h2,
.cnpPage.cnpPage .cnpDisclosure h3{
  font-size: 16px;
  font-weight: 950;
  color: #0f2344;
  margin: 0 0 10px;
}

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

.cnpPage.cnpPage .cnpDisclosure li,
.cnpPage.cnpPage .cnpDisclosure li{
  margin: 6px 0;
}

/* Resources links: make them obviously links even if theme tries to kill underlines */
.cnpPage.cnpPage .cnpDisclosure a,
.cnpPage.cnpPage .cnpDisclosure 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 ---------- */
.cnpCallout,
.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. */
.cnpCallout::before,
.cnpCallout::after{
  content: none !important;
  display: none !important;
}

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

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

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

/* Blue tone for bullet sections + Pro Tip callouts */
.bullet-section-blue,
.cnpCallout-blue,
.cnpCallout.cnpProTip{
  background: #fff7ed !important;
  border-color: #e2e8f0 !important;
  border-left-color: #e2e8f0 !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 ---------- */
.cnpCallout h2,
.cnpCallout h3,
.cnpCallout 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;
}

.cnpCallout 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;
}

.cnpCallout 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;
}

.cnpCallout ul,
.cnpCallout 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;
}

.cnpCallout 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 ---------- */
.cnpCallout.cnpDisclosure{
  font-size: 13px !important;
  line-height: 1.55 !important;
}

.cnpCallout.cnpDisclosure li{
  margin: 6px 0 !important;
}

.cnpCallout.cnpDisclosure a{
  word-break: break-word;
}

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

/* Don’t add extra top margin to the hero title */
.cnpPage.cnpPage .cnpHero 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.
---------------------------- */
.cnpPage.cnpPage .cnpBadge,
.cnpPage.cnpPage .cnpBadge{
  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;
}

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

/* GREEN badge */
.cnpPage.cnpPage .cnpBadge--green,
.cnpPage.cnpPage .cnpBadge--green{
  background:rgba(249,115,22,.10) !important;
  border-color:rgba(249,115,22,.35) !important;
}
.cnpPage.cnpPage .cnpBadge--green::before,
.cnpPage.cnpPage .cnpBadge--green::before{
  background:#f97316 !important;
}

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

/* RED badge */
.cnpPage.cnpPage .cnpBadge--red,
.cnpPage.cnpPage .cnpBadge--red{
  background:rgba(239,68,68,.10) !important;
  border-color:rgba(239,68,68,.38) !important;
}
.cnpPage.cnpPage .cnpBadge--red::before,
.cnpPage.cnpPage .cnpBadge--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.
---------------------------- */
.cnpPage.cnpPage .bullet-section-green,
.cnpPage.cnpPage .bullet-section-yellow,
.cnpPage.cnpPage .bullet-section-red,
.cnpPage.cnpPage .bullet-section-blue,
.cnpPage.cnpPage .bullet-section-gray,
.cnpPage.cnpPage .bullet-section-green,
.cnpPage.cnpPage .bullet-section-yellow,
.cnpPage.cnpPage .bullet-section-red,
.cnpPage.cnpPage .bullet-section-blue,
.cnpPage.cnpPage .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 */
.cnpPage.cnpPage .bullet-section-green,
.cnpPage.cnpPage .bullet-section-green{
  background:#ecfdf5 !important;
  border-color:rgba(249,115,22,.32) !important;
}

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

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

.cnpPage.cnpPage .bullet-section-blue,
.cnpPage.cnpPage .bullet-section-blue{
  background:#fff7ed !important;
  border-color:rgba(59,130,246,.35) !important;
}

.cnpPage.cnpPage .bullet-section-gray,
.cnpPage.cnpPage .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) */
.cnpPage.cnpPage .cnpGrid3 > .bullet-section-green,
.cnpPage.cnpPage .cnpGrid3 > .bullet-section-yellow,
.cnpPage.cnpPage .cnpGrid3 > .bullet-section-red,
.cnpPage.cnpPage .cnpGrid3 > .bullet-section-green,
.cnpPage.cnpPage .cnpGrid3 > .bullet-section-yellow,
.cnpPage.cnpPage .cnpGrid3 > .bullet-section-red{
  margin:0 !important;
}

/* List spacing inside these boxes */
.cnpPage.cnpPage .bullet-section-green ul,
.cnpPage.cnpPage .bullet-section-yellow ul,
.cnpPage.cnpPage .bullet-section-red ul,
.cnpPage.cnpPage .bullet-section-blue ul,
.cnpPage.cnpPage .bullet-section-gray ul,
.cnpPage.cnpPage .bullet-section-green ol,
.cnpPage.cnpPage .bullet-section-yellow ol,
.cnpPage.cnpPage .bullet-section-red ol,
.cnpPage.cnpPage .bullet-section-blue ol,
.cnpPage.cnpPage .bullet-section-gray ol,
.cnpPage.cnpPage .bullet-section-green ul,
.cnpPage.cnpPage .bullet-section-yellow ul,
.cnpPage.cnpPage .bullet-section-red ul,
.cnpPage.cnpPage .bullet-section-blue ul,
.cnpPage.cnpPage .bullet-section-gray ul,
.cnpPage.cnpPage .bullet-section-green ol,
.cnpPage.cnpPage .bullet-section-yellow ol,
.cnpPage.cnpPage .bullet-section-red ol,
.cnpPage.cnpPage .bullet-section-blue ol,
.cnpPage.cnpPage .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”.
---------------------------- */
.cnpPage.cnpPage .cnpCallout,
.cnpPage.cnpPage .cnpCallout{
  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: cnpProTip) */
.cnpPage.cnpPage .cnpCallout.cnpProTip,
.cnpPage.cnpPage .cnpCallout.cnpProTip{
  background:#fff7ed !important;
  border-color:rgba(59,130,246,.35) !important;
}

/* Resources/Disclosure */
.cnpPage.cnpPage .cnpCallout.cnpDisclosure,
.cnpPage.cnpPage .cnpCallout.cnpDisclosure{
  background:#fff7ed !important;
  border-color:rgba(245,158,11,.35) !important;
}

/* Optional: if you use these tone classes anywhere */
.cnpPage.cnpPage .cnpCallout.cnpCallout-green,
.cnpPage.cnpPage .cnpCallout.cnpCallout-green{
  background:#ecfdf5 !important;
  border-color:rgba(249,115,22,.32) !important;
}
.cnpPage.cnpPage .cnpCallout.cnpCallout-yellow,
.cnpPage.cnpPage .cnpCallout.cnpCallout-yellow{
  background:#fffbeb !important;
  border-color:rgba(245,158,11,.38) !important;
}
.cnpPage.cnpPage .cnpCallout.cnpCallout-red,
.cnpPage.cnpPage .cnpCallout.cnpCallout-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){
  .cnpPage.cnpPage.main-content .cnpCallout:not(.cnpDisclosure),
  .cnpPage.cnpPage.main-content .cnpCallout:not(.cnpDisclosure){
    width:100% !important;
    max-width:960px !important;
    margin-left:auto !important;
    margin-right:auto !important;
  }
}

/* ========================================
   CANOPY HERO OVERRIDES (preserved from canopy-specific styling)
   ======================================== */

/* Kill hero card shadow on hub/article pages */
.canopyPage .canopyHero,
.canopyPage .canopyCard.canopyHero {
  box-shadow: none !important;
}

/* CTA button in hero: orange bg + white text */
.canopyPage .canopyHero .canopyNextLink,
.canopyPage .canopyHero a.canopyNextLink {
  background: #f97316 !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  text-decoration: none !important;
  padding: 14px 28px !important;
  border-radius: 12px !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  border: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  transition: background 0.2s, transform 0.18s !important;
}
.canopyPage .canopyHero .canopyNextLink:hover,
.canopyPage .canopyHero a.canopyNextLink:hover {
  background: #ea680b !important;
  transform: translateY(-2px);
}

/* "Ready to compare" label stays orange */
.canopyPage .canopyHero .canopyNextLabel {
  color: #f97316 !important;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 12px;
  margin-right: 12px;
}

/* Hero pill contrast fix */
.canopyHero .canopyPill,
.canopyCard.canopyHero .canopyPill {
  background: rgba(15, 35, 68, 0.08) !important;
  border: 1px solid rgba(15, 35, 68, 0.18) !important;
  color: #0f2344 !important;
  -webkit-text-fill-color: #0f2344 !important;
}
.canopyHero .canopyPill:hover,
.canopyCard.canopyHero .canopyPill:hover {
  background: rgba(249, 115, 22, 0.12) !important;
  border-color: #f97316 !important;
}

/* Dynamic byline styling */
.cnpByline,
.canopyPage .cnpByline {
  margin: 6px 0 0;
  font-size: 12px;
  color: rgba(255,255,255,0.65);
  font-weight: 600;
  line-height: 1.7;
}
.cnpByline strong {
  font-weight: 800;
  color: rgba(255,255,255,0.8);
}

/* ========================================
   TABLE HOVER — orange left-border stripe
   ======================================== */
.cnpPage.cnpPage .cnpTable tbody tr {
  transition: background 0.15s ease;
  position: relative;
}
.cnpPage.cnpPage .cnpTable tbody tr:hover {
  background: #fff7ed;
}
.cnpPage.cnpPage .cnpTable tbody tr:hover td:first-child {
  position: relative;
}
.cnpPage.cnpPage .cnpTable tbody tr:hover td:first-child::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: #f97316;
}

/* ========================================
   CANOPY HERO OVERRIDES (preserved)
   ======================================== */
.canopyPage .canopyHero,
.canopyPage .canopyCard.canopyHero {
  box-shadow: none !important;
}

.canopyPage .canopyHero .canopyNextLink,
.canopyPage .canopyHero a.canopyNextLink {
  background: #f97316 !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  text-decoration: none !important;
  padding: 14px 28px !important;
  border-radius: 12px !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  border: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  transition: background 0.2s, transform 0.18s !important;
}
.canopyPage .canopyHero .canopyNextLink:hover,
.canopyPage .canopyHero a.canopyNextLink:hover {
  background: #ea680b !important;
  transform: translateY(-2px);
}

.canopyPage .canopyHero .canopyNextLabel {
  color: #f97316 !important;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 12px;
  margin-right: 12px;
}

.canopyHero .canopyPill,
.canopyCard.canopyHero .canopyPill {
  background: rgba(15, 35, 68, 0.08) !important;
  border: 1px solid rgba(15, 35, 68, 0.18) !important;
  color: #0f2344 !important;
  -webkit-text-fill-color: #0f2344 !important;
}
.canopyHero .canopyPill:hover,
.canopyCard.canopyHero .canopyPill:hover {
  background: rgba(249, 115, 22, 0.12) !important;
  border-color: #f97316 !important;
}

/* Dynamic byline */
.cnpByline,
.canopyPage .cnpByline {
  margin: 6px 0 0;
  font-size: 12px;
  color: rgba(255,255,255,0.65);
  font-weight: 600;
  line-height: 1.7;
}
.cnpByline strong {
  font-weight: 800;
  color: rgba(255,255,255,0.8);
}

/* ========================================
   YARPP Related Articles Grid
   ======================================== */
.yarpp-related {
  margin: 48px 0 24px;
  padding: 32px 0 0;
  border-top: 1px solid #e2e8f0;
}
.yarpp-related h3 {
  font-size: 20px;
  font-weight: 800;
  color: #0f2344;
  margin-bottom: 20px;
}
.yarpp-related ol,
.yarpp-related ul {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
@media (max-width: 640px) {
  .yarpp-related ol,
  .yarpp-related ul {
    grid-template-columns: 1fr;
  }
}
.yarpp-related li {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  overflow: hidden;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.yarpp-related li:hover {
  border-color: #f97316;
  box-shadow: 0 4px 14px rgba(249,115,22,0.1);
}
.yarpp-related li a {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  text-decoration: none;
  color: #0f2344;
  font-weight: 600;
  font-size: 14px;
  line-height: 1.4;
}
.yarpp-related li img {
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: 8px;
  flex-shrink: 0;
}

/* ==========================================================
   ISSUE 3 — CTA button row spacing on content pages
   ========================================================== */
.cnpPage.cnpPage .cnpBtnRow,
.cnpPage.cnpPage .cnpNextPill {
  margin-bottom: 24px !important;
}

/* ==========================================================
   ISSUE 4 — Tighter section spacing on content pages
   ========================================================== */
.cnp4 .cnp4-section.cnp4-section--light,
.cnp4 .cnp4-section.cnp4-section--white,
.cnp4 .cnp4-band {
  padding-top: 56px !important;
  padding-bottom: 56px !important;
}