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

/* Root wrapper */
.valnPage{
  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){
  .valnPage{ padding:20px 12px 64px; }
}

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

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

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

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

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

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

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

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

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

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

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

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

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

/* Skip link */
.valnPage .vlnSkip{
  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;
}
.valnPage .vlnSkip:focus{ left:12px; }

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

/* Hero */
.valnPage .vlnHero{ margin-bottom:18px; }

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

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

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

.valnPage .vlnEyebrow strong,
.valnPage .vlnAccentWord{ color:#16a34a; font-weight:900; }

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

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

.valnPage .vlnHeroLead,
.valnPage .vlnHero-lead{
  margin-top:10px;
  color:#475569;
  width:100%;
  max-width:100% !important;
}

/* Pills */
.valnPage .vlnPills,
.valnPage .vlnHero-jumps{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:12px;
  padding:0;
}

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

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

.valnPage .vlnPill:hover,
.valnPage .vlnJumpPill:hover{ background:#eef2ff; text-decoration:none !important; }

/* Buttons */
.valnPage .vlnBtnRow,
.valnPage .vlnHero-ctas,
.valnPage .vlnForm-actions,
.valnPage .vlnActions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:14px;
  align-items:center;
}

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

.valnPage .vlnBtn-primary,
.valnPage .vlnLeadPill{
  background:#0b3aa4;
  border-color:#0b3aa4;
  color:#fff !important;
}
.valnPage .vlnBtn-primary:hover,
.valnPage .vlnLeadPill:hover{ background:#082f7f; border-color:#082f7f; }

.valnPage .vlnBtn-secondary,
.valnPage .vlnBtn-ghost{
  background:#fff;
  border-color:#c7d2fe;
  color:#0b3aa4 !important;
}
.valnPage .vlnBtn-secondary:hover,
.valnPage .vlnBtn-ghost:hover{ background:#f1f5ff; }

.valnPage .vlnBtn-success,
.valnPage .vlnBtn-successPill{
  background:#0b3aa4;
  border-color:#0b3aa4;
  color:#fff !important;
}
.valnPage .vlnBtn-success:hover,
.valnPage .vlnBtn-successPill:hover{ background:#082f7f; border-color:#082f7f; }

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

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

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

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

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

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

.valnPage .vlnQuickCard ul,
.valnPage .vlnResult-body ul,
.valnPage .vlnCallout ul{
  margin:0 !important;
  padding-left:18px !important;
  list-style-type:disc !important;
  list-style-position:outside !important;
  color:#475569;
}
.valnPage .vlnQuickCard li,
.valnPage .vlnResult-body li,
.valnPage .vlnCallout li{ margin:8px 0; display:list-item !important; }

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

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

.valnPage .vlnTable,
.valnPage .vlnCompareTable{
  width:100%;
  border-collapse:collapse;
  table-layout:auto;
  font-size:13px;
}

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

.valnPage .vlnTable th,
.valnPage .vlnTable td,
.valnPage .vlnCompareTable th,
.valnPage .vlnCompareTable td{
  border-bottom:1px solid #e2e8f0;
  padding:10px 10px;
  text-align:left;
  vertical-align:top;
}

@media (max-width:640px){
  .valnPage .vlnTable th,
  .valnPage .vlnTable td,
  .valnPage .vlnCompareTable th,
  .valnPage .vlnCompareTable td{
    padding:8px 8px;
  }
}

.valnPage .vlnTable thead th,
.valnPage .vlnCompareTable thead th{
  background:#f8fafc;
  color:#0f172a;
  font-weight:850;
}

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

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

.valnPage .vlnToolGrid{
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(0,1.1fr);
  gap:16px;
}
.valnPage .vlnToolGrid > *{ min-width:0; }
@media (max-width:900px){ .valnPage .vlnToolGrid{ grid-template-columns:minmax(0,1fr); } }

.valnPage .vlnPane,
.valnPage .vlnForm,
.valnPage .vlnResult{
  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){
  .valnPage .vlnPane,
  .valnPage .vlnForm,
  .valnPage .vlnResult{
    padding:14px 14px 12px;
  }
}

.valnPage .vlnPaneTitle{
  font-size:15px;
  font-weight:950;
  margin:0 0 10px;
  color:#0b3aa4;
}

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

.valnPage .vlnField,
.valnPage .vlnForm-group{ display:flex; flex-direction:column; min-width:0; margin-bottom:12px; }

.valnPage .vlnField label,
.valnPage .vlnForm-label{ font-weight:850; margin-bottom:6px; color:#0f172a; display:block; }

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

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

.valnPage .vlnField input[type="range"]{ width:100%; }

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

.valnPage .vlnHelp,
.valnPage .vlnForm-help{ margin-top:6px; color:#475569; font-size:12.5px; line-height:1.55; }

.valnPage .vlnError,
.valnPage .vlnForm-error{ margin-top:10px; color:#dc2626; font-weight:750; }

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

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

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

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

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

.valnPage .vlnNote{ color:#475569; font-size:12.5px; }

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

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

.valnPage .vlnStack{ display:grid; grid-template-columns:1fr; gap:12px; }
.valnPage .vlnMiniCard{
  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);
}

.valnPage .vlnMiniCard h3{ font-size:15px; margin:0 0 8px; }

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

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

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

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

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

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

.valnPage .vlnFaq details,
.valnPage .vlnFaqItem{ border:0; }

.valnPage .vlnFaq details:not(:first-child),
.valnPage .vlnFaqItem:not(:first-child){ border-top:1px solid #e2e8f0; }

.valnPage .vlnFaq summary,
.valnPage .vlnFaqItem 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;
}

.valnPage .vlnFaq summary::-webkit-details-marker,
.valnPage .vlnFaqItem summary::-webkit-details-marker{ display:none; }

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

.valnPage .vlnFaq details[open] summary:after{ content:"–"; }

.valnPage .vlnFaq .ans,
.valnPage .vlnFaqBody{
  border-top:1px solid #e2e8f0;
  padding:12px 16px 16px;
}

.valnPage .vlnFaq .ans p{ margin:0; color:#475569; }

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

.valnPage .vlnRefsInner{ padding:16px 16px 14px; }
.valnPage .vlnRefsLabel{ margin:0 0 10px; color:#475569; font-weight:850; font-size:12.5px; }

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

.valnPage .vlnRefs li,
.valnPage .vlnSourcesList li{ margin:8px 0; display:list-item !important; }

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


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

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

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

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

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

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


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

/* Root wrapper */
.vlnPage{
  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){
  .vlnPage{ padding:20px 12px 64px; }
}

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

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

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

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

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

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

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

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

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

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

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

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

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

/* Skip link */
.vlnPage .vlnSkip{
  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;
}
.vlnPage .vlnSkip:focus{ left:12px; }

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

/* Hero */
.vlnPage .vlnHero{ margin-bottom:18px; }

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

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

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

.vlnPage .vlnEyebrow strong,
.vlnPage .vlnAccentWord{ color:#16a34a; font-weight:900; }

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

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

.vlnPage .vlnHeroLead,
.vlnPage .vlnHero-lead{
  margin-top:10px;
  color:#475569;
  width:100%;
  max-width:100% !important;
}

/* Pills */
.vlnPage .vlnPills,
.vlnPage .vlnHero-jumps{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:12px;
  padding:0;
}

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

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

.vlnPage .vlnPill:hover,
.vlnPage .vlnJumpPill:hover{ background:#eef2ff; text-decoration:none !important; }

/* Buttons */
.vlnPage .vlnBtnRow,
.vlnPage .vlnHero-ctas,
.vlnPage .vlnForm-actions,
.vlnPage .vlnActions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:14px;
  align-items:center;
}

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

.vlnPage .vlnBtn-primary,
.vlnPage .vlnLeadPill{
  background:#0b3aa4;
  border-color:#0b3aa4;
  color:#fff !important;
}
.vlnPage .vlnBtn-primary:hover,
.vlnPage .vlnLeadPill:hover{ background:#082f7f; border-color:#082f7f; }

.vlnPage .vlnBtn-secondary,
.vlnPage .vlnBtn-ghost{
  background:#fff;
  border-color:#c7d2fe;
  color:#0b3aa4 !important;
}
.vlnPage .vlnBtn-secondary:hover,
.vlnPage .vlnBtn-ghost:hover{ background:#f1f5ff; }

.vlnPage .vlnBtn-success,
.vlnPage .vlnBtn-successPill{
  background:#0b3aa4;
  border-color:#0b3aa4;
  color:#fff !important;
}
.vlnPage .vlnBtn-success:hover,
.vlnPage .vlnBtn-successPill:hover{ background:#082f7f; border-color:#082f7f; }

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

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

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

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

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

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

.vlnPage .vlnQuickCard ul,
.vlnPage .vlnResult-body ul,
.vlnPage .vlnCallout ul{
  margin:0 !important;
  padding-left:18px !important;
  list-style-type:disc !important;
  list-style-position:outside !important;
  color:#475569;
}
.vlnPage .vlnQuickCard li,
.vlnPage .vlnResult-body li,
.vlnPage .vlnCallout li{ margin:8px 0; display:list-item !important; }

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

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

.vlnPage .vlnTable,
.vlnPage .vlnCompareTable{
  width:100%;
  border-collapse:collapse;
  table-layout:auto;
  font-size:13px;
}

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

.vlnPage .vlnTable th,
.vlnPage .vlnTable td,
.vlnPage .vlnCompareTable th,
.vlnPage .vlnCompareTable td{
  border-bottom:1px solid #e2e8f0;
  padding:10px 10px;
  text-align:left;
  vertical-align:top;
}

@media (max-width:640px){
  .vlnPage .vlnTable th,
  .vlnPage .vlnTable td,
  .vlnPage .vlnCompareTable th,
  .vlnPage .vlnCompareTable td{
    padding:8px 8px;
  }
}

.vlnPage .vlnTable thead th,
.vlnPage .vlnCompareTable thead th{
  background:#f8fafc;
  color:#0f172a;
  font-weight:850;
}

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

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

.vlnPage .vlnToolGrid{
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(0,1.1fr);
  gap:16px;
}
.vlnPage .vlnToolGrid > *{ min-width:0; }
@media (max-width:900px){ .vlnPage .vlnToolGrid{ grid-template-columns:minmax(0,1fr); } }

.vlnPage .vlnPane,
.vlnPage .vlnForm,
.vlnPage .vlnResult{
  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){
  .vlnPage .vlnPane,
  .vlnPage .vlnForm,
  .vlnPage .vlnResult{
    padding:14px 14px 12px;
  }
}

.vlnPage .vlnPaneTitle{
  font-size:15px;
  font-weight:950;
  margin:0 0 10px;
  color:#0b3aa4;
}

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

.vlnPage .vlnField,
.vlnPage .vlnForm-group{ display:flex; flex-direction:column; min-width:0; margin-bottom:12px; }

.vlnPage .vlnField label,
.vlnPage .vlnForm-label{ font-weight:850; margin-bottom:6px; color:#0f172a; display:block; }

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

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

.vlnPage .vlnField input[type="range"]{ width:100%; }

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

.vlnPage .vlnHelp,
.vlnPage .vlnForm-help{ margin-top:6px; color:#475569; font-size:12.5px; line-height:1.55; }

.vlnPage .vlnError,
.vlnPage .vlnForm-error{ margin-top:10px; color:#dc2626; font-weight:750; }

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

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

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

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

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

.vlnPage .vlnNote{ color:#475569; font-size:12.5px; }

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

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

.vlnPage .vlnStack{ display:grid; grid-template-columns:1fr; gap:12px; }
.vlnPage .vlnMiniCard{
  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);
}

.vlnPage .vlnMiniCard h3{ font-size:15px; margin:0 0 8px; }

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

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

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

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

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

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

.vlnPage .vlnFaq details,
.vlnPage .vlnFaqItem{ border:0; }

.vlnPage .vlnFaq details:not(:first-child),
.vlnPage .vlnFaqItem:not(:first-child){ border-top:1px solid #e2e8f0; }

.vlnPage .vlnFaq summary,
.vlnPage .vlnFaqItem 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;
}

.vlnPage .vlnFaq summary::-webkit-details-marker,
.vlnPage .vlnFaqItem summary::-webkit-details-marker{ display:none; }

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

.vlnPage .vlnFaq details[open] summary:after{ content:"–"; }

.vlnPage .vlnFaq .ans,
.vlnPage .vlnFaqBody{
  border-top:1px solid #e2e8f0;
  padding:12px 16px 16px;
}

.vlnPage .vlnFaq .ans p{ margin:0; color:#475569; }

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

.vlnPage .vlnRefsInner{ padding:16px 16px 14px; }
.vlnPage .vlnRefsLabel{ margin:0 0 10px; color:#475569; font-weight:850; font-size:12.5px; }

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

.vlnPage .vlnRefs li,
.vlnPage .vlnSourcesList li{ margin:8px 0; display:list-item !important; }

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


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

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

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

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

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

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



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

/* Divi sometimes injects <br> between pill links and inside paragraphs */
.valnPage .vlnPills br,
.vlnPage .vlnPills br,
.valnPage .vlnHeroLead br,
.vlnPage .vlnHeroLead br { display:none !important; }

/* Divi sometimes injects <p>&nbsp;</p> into grid wrappers (breaks layout) */
.valnPage .vlnToolGrid > p,
.vlnPage .vlnToolGrid > p,
.valnPage .vlnToolGrid > br,
.vlnPage .vlnToolGrid > br,
.valnPage .vlnRow2 > p,
.vlnPage .vlnRow2 > p,
.valnPage .vlnRow2 > br,
.vlnPage .vlnRow2 > br,
.valnPage .vlnBtnRow > p,
.vlnPage .vlnBtnRow > p,
.valnPage .vlnBtnRow > br,
.vlnPage .vlnBtnRow > br,
.valnPage .vlnResultTop > p,
.vlnPage .vlnResultTop > p,
.valnPage .vlnResultTop > br,
.vlnPage .vlnResultTop > br { display:none !important; margin:0 !important; padding:0 !important; }

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

/* Lane tones */
.valnPage .vlnLaneGreen,
.vlnPage .vlnLaneGreen { color:#15803d !important; }
.valnPage .vlnLaneYellow,
.vlnPage .vlnLaneYellow { color:#ca8a04 !important; }
.valnPage .vlnLaneRed,
.vlnPage .vlnLaneRed { 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 */
  .valnPage,
  .vlnPage{
    background: #ffffff !important;
    padding: 0 !important;
  }

  .valnPage .vlnWrap,
  .vlnPage .vlnWrap{
    padding: 0 !important;
  }

  /* 2) Remove boxed containers (keep structure, lose the chrome) */
  .valnPage .vlnCard,
  .vlnPage .vlnCard,
  .valnPage .vlnSection,
  .vlnPage .vlnSection,
  .valnPage .vlnHero-quick,
  .vlnPage .vlnHero-quick,
  .valnPage .vlnHero-quickCard,
  .vlnPage .vlnHero-quickCard,
  .valnPage .vlnQuickCard,
  .vlnPage .vlnQuickCard,
  .valnPage .vlnToolShell,
  .vlnPage .vlnToolShell,
  .valnPage .vlnPane,
  .vlnPage .vlnPane,
  .valnPage .vlnForm,
  .vlnPage .vlnForm,
  .valnPage .vlnResult,
  .vlnPage .vlnResult,
  .valnPage .vlnTypes-grid,
  .vlnPage .vlnTypes-grid,
  .valnPage .vlnTypeTabs,
  .vlnPage .vlnTypeTabs,
  .valnPage .vlnTypeDetail,
  .vlnPage .vlnTypeDetail,
  .valnPage .vlnFaqList,
  .vlnPage .vlnFaqList,
  .valnPage .vlnFaqItem,
  .vlnPage .vlnFaqItem,
  .valnPage .vlnRefs,
  .vlnPage .vlnRefs,
  .valnPage .vlnSources,
  .vlnPage .vlnSources,
  .valnPage .vlnMiniCard,
  .vlnPage .vlnMiniCard{
    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 */
  .valnPage .vlnCard-inner,
  .vlnPage .vlnCard-inner,
  .valnPage .vlnSectionHead,
  .vlnPage .vlnSectionHead,
  .valnPage .vlnSection-head,
  .vlnPage .vlnSection-head{
    padding: 0 !important;
  }

  /* 4) Hide above-the-fold “chrome” that wastes space */
  .valnPage .vlnBreadcrumb,
  .vlnPage .vlnBreadcrumb,
  .valnPage .vlnHero-eyebrow,
  .vlnPage .vlnHero-eyebrow,
  .valnPage .vlnEyebrow,
  .vlnPage .vlnEyebrow,
  .valnPage .vlnHero-meta,
  .vlnPage .vlnHero-meta,
  .valnPage .vlnHero .vlnMeta,
  .vlnPage .vlnHero .vlnMeta,
  .valnPage .vlnHero-jumps,
  .vlnPage .vlnHero-jumps,
  .valnPage .vlnPills,
  .vlnPage .vlnPills{
    display: none !important;
  }

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

  .valnPage .vlnHero,
  .vlnPage .vlnHero{
    margin-bottom: 18px !important;
  }
}

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

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

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

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

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

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

.valnPage .vlnHero-meta strong,
.vlnPage .vlnHero-meta strong{
  color: var(--vlnInk);
  font-weight: 900;
}

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

/* Skip-link: hide without pushing content far off-canvas (prevents x-overflow on some mobile browsers) */
.valnPage .vlnSkip,
.vlnPage .vlnSkip{
  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;
}

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

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

  /* Keep normal bullets inside those cards */
  .valnPage .vlnQuickCard ul,
  .vlnPage .vlnQuickCard ul,
  .valnPage .vlnHero-quickCard ul,
  .vlnPage .vlnHero-quickCard ul{
    padding-left: 20px !important;
    list-style: disc !important;
  }

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

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

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

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

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

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

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

.vlnPage .vlnEyebrow,
.vlnPage .vlnEyebrow *,
.vlnPage .vlnHero-eyebrow,
.vlnPage .vlnHero-eyebrow *{
  text-transform: none !important;
  letter-spacing: normal !important;
}

/* Default link color inside VLN pages (exclude buttons) */
.vlnPage a:not(.vlnBtn):not(.vlnPill):not(.vlnJumpPill){
  color: var(--vlnHeading) !important;
}

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

.vlnPage .vlnPill,
.vlnPage .vlnJumpPill{
  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.
====================================================================== */

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

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

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

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

/* Text links (do NOT clobber buttons or pills) */
.valnPage a:not(.vlnBtn):not(.vlnPill):not(.vlnJumpPill),
.vlnPage a:not(.vlnBtn):not(.vlnPill):not(.vlnJumpPill){
  color: var(--vlnHeading) !important;
  text-decoration: none;
}
.valnPage a:not(.vlnBtn):not(.vlnPill):not(.vlnJumpPill):hover,
.vlnPage a:not(.vlnBtn):not(.vlnPill):not(.vlnJumpPill):hover{
  text-decoration: underline;
}

/* Breadcrumb + Primary sources (meta) */
.valnPage .vlnBreadcrumb,
.vlnPage .vlnBreadcrumb,
.valnPage .vlnMeta,
.vlnPage .vlnMeta,
.valnPage .vlnHero-meta,
.vlnPage .vlnHero-meta{
  color: var(--vlnMuted) !important;
}

.valnPage .vlnBreadcrumb a,
.vlnPage .vlnBreadcrumb a{
  color: var(--vlnHeading) !important;
  text-decoration: none;
}
.valnPage .vlnBreadcrumb a:hover,
.vlnPage .vlnBreadcrumb a:hover{
  text-decoration: underline;
}

.valnPage .vlnMeta a,
.vlnPage .vlnMeta a,
.valnPage .vlnHero-meta a,
.vlnPage .vlnHero-meta a{
  color: var(--vlnHeading) !important;
  font-weight: 800;
  text-decoration: none;
}
.valnPage .vlnMeta a:hover,
.vlnPage .vlnMeta a:hover,
.valnPage .vlnHero-meta a:hover,
.vlnPage .vlnHero-meta a:hover{
  text-decoration: underline;
}

/* Fix WP/Divi auto-inserted line breaks inside meta/breadcrumbs */
.valnPage .vlnMeta br,
.vlnPage .vlnMeta br,
.valnPage .vlnHero-meta br,
.vlnPage .vlnHero-meta br,
.valnPage .vlnBreadcrumb br,
.vlnPage .vlnBreadcrumb br,
.valnPage .vlnHero-eyebrow br,
.vlnPage .vlnHero-eyebrow br,
.valnPage .vlnEyebrow br,
.vlnPage .vlnEyebrow br{
  display:none !important;
}

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

/* Ensure active pills keep their intended contrast even after link-color normalization */
.valnPage .vlnPill.is-active,
.vlnPage .vlnPill.is-active,
.valnPage .vlnJumpPill.is-active,
.vlnPage .vlnJumpPill.is-active{
  color:#fff !important;
}


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

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

/* Non-pill/non-button links use brand navy (keeps sources consistent) */
.vlnPage.vlnPage a:not(.vlnBtn):not(.vlnPill):not(.vlnJumpPill),
.valnPage.valnPage a:not(.vlnBtn):not(.vlnPill):not(.vlnJumpPill){
  color: var(--vlnHeading, #0b3aa4) !important;
}

/* Breadcrumbs: always muted grey (links included) */
.vlnPage.vlnPage .vlnBreadcrumb,
.vlnPage.vlnPage .vlnBreadcrumb a,
.valnPage.valnPage .vlnBreadcrumb,
.valnPage.valnPage .vlnBreadcrumb a{
  color: var(--vlnMuted, #475569) !important;
}
.vlnPage.vlnPage .vlnBreadcrumb a:hover,
.valnPage.valnPage .vlnBreadcrumb a:hover{
  color: var(--vlnHeading, #0b3aa4) !important;
  text-decoration: underline;
}

/* Pills: always brand navy text */
.vlnPage.vlnPage .vlnPill,
.vlnPage.vlnPage .vlnJumpPill,
.valnPage.valnPage .vlnPill,
.valnPage.valnPage .vlnJumpPill{
  color: var(--vlnHeading, #0b3aa4) !important;
  border-color: #bcd3ff !important;
}

/* Ensure themes can't restyle pill text via -webkit-text-fill-color */
.vlnPage.vlnPage .vlnPill,
.vlnPage.vlnPage .vlnJumpPill,
.valnPage.valnPage .vlnPill,
.valnPage.valnPage .vlnJumpPill{
  -webkit-text-fill-color: var(--vlnHeading, #0b3aa4) !important;
}

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

  .vlnPage.vlnPage .vlnBreadcrumb,
  .valnPage.valnPage .vlnBreadcrumb,
  .vlnPage.vlnPage .vlnEyebrow,
  .valnPage.valnPage .vlnEyebrow,
  .vlnPage.vlnPage .vlnHero-eyebrow,
  .valnPage.valnPage .vlnHero-eyebrow{
    display:none !important;
  }
}