/*
  VLN Interactive Pages — Shared CSS
  Scoped to .vlnPage to avoid affecting the rest of the theme.
*/

.vlnPage{
  --bg:#f5f7ff;
  --ink:#0f172a;
  --muted:#475569;
  --muted2:#64748b;
  --line:#e2e8f0;
  --line2:#c7d2fe;
  --card:#ffffff;
  --brand:#2563eb;
  --brand2:#1d4ed8;
  --navy:#0b3aa4;
  --good:#16a34a;
  --good2:#15803d;
  --warn:#ca8a04;
  --bad:#dc2626;

  --r-lg:24px;
  --r:18px;
  --r-sm:12px;

  --shadow:0 18px 45px rgba(15,23,42,.10);
  --shadow2:0 12px 30px rgba(15,23,42,.08);

  font-family: system-ui,-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:var(--ink);

  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%),
    var(--bg);

  padding:28px 16px 72px;
}

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

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

.vlnPage a{ color:var(--brand); text-decoration:none; }
.vlnPage a:hover{ text-decoration:underline; }

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

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

.vlnPage :where(h1,h2,h3,h4){
  color:var(--navy);
  letter-spacing:-.01em;
  margin:0;
}

.vlnPage h1{
  font-size:clamp(1.85rem,3vw,2.3rem);
  font-weight:900;
  line-height:1.12;
}

.vlnPage h2{
  font-size:clamp(1.35rem,2vw,1.6rem);
  font-weight:850;
  line-height:1.22;
}

.vlnPage h3{
  font-size:1.05rem;
  font-weight:850;
  line-height:1.22;
}

.vlnPage h4{
  font-size:1rem;
  font-weight:850;
  line-height:1.25;
}

.vlnPage :where(p){ margin:0 0 10px; color:var(--muted); max-width:100% !important; }
.vlnPage :where(p:last-child){ margin-bottom:0; }

/* Skip link */
.vlnPage .vlnSkip{
  position:absolute;
  left:-9999px;
  top:10px;
  z-index:9999;
  background:#fff;
  color:var(--ink);
  border:2px solid var(--brand);
  border-radius:12px;
  padding:10px 12px;
  font-weight:850;
}
.vlnPage .vlnSkip:focus{ left:12px; }

/* Cards */
.vlnPage .vlnCard{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow);
}
.vlnPage .vlnCard-inner{ padding:22px 22px 20px; }
@media (max-width:640px){
  .vlnPage .vlnCard-inner{ padding:18px 16px; }
}

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

.vlnPage .vlnBreadcrumb{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
  color:var(--muted);
  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:var(--muted);
  font-size:11.5px;
  text-transform:uppercase;
  letter-spacing:.06em;
  width:fit-content;
  margin-top:10px;
}

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

.vlnPage .vlnEyebrow strong,
.vlnPage .vlnAccentWord{ color:var(--good); font-weight:900; }

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

.vlnPage .vlnMeta strong{ color:var(--ink); font-weight:800; }
.vlnPage .vlnMeta .sep{ color:#94a3b8; }

.vlnPage .vlnHeroLead,
.vlnPage .vlnHero-lead{ margin-top:10px; color:var(--muted); 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;
    scrollbar-width:none;
    -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 var(--line2);
  background:#fff;
  color:var(--navy);
  font-weight:850;
  font-size:12.5px;
  white-space:nowrap;
  text-decoration:none !important;
  -webkit-tap-highlight-color:transparent;
  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;
  -webkit-tap-highlight-color:transparent;
  user-select:none;
}

.vlnPage .vlnBtn-primary,
.vlnPage .vlnLeadPill{
  background:var(--navy);
  border-color:var(--navy);
  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:var(--line2);
  color:var(--navy) !important;
}
.vlnPage .vlnBtn-secondary:hover,
.vlnPage .vlnBtn-ghost:hover{ background:#f1f5ff; }

.vlnPage .vlnBtn-success,
.vlnPage .vlnBtn-successPill{
  background:var(--good);
  border-color:var(--good);
  color:#fff !important;
}
.vlnPage .vlnBtn-success:hover,
.vlnPage .vlnBtn-successPill:hover{ background:var(--good2); border-color:var(--good2); }

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

/* Reset: red text, no pill (requested) */
.vlnPage .vlnBtn-resetLink,
.vlnPage button.vlnBtn-resetLink{
  background:transparent !important;
  border:0 !important;
  padding:0 !important;
  border-radius:0 !important;
  color:var(--bad) !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:var(--r);
  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:var(--shadow2);
}
.vlnPage .vlnQuickCard h3{ font-size:15px; font-weight:900; margin-bottom:8px; color:var(--navy); }

.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:var(--muted);
}
.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:var(--muted); max-width:100% !important; }

/* Tables */
.vlnPage .vlnTableScroll{
  width:100%;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  border-radius:var(--r);
  border:1px solid var(--line);
  background:#fff;
}

.vlnPage .vlnTable,
.vlnPage .vlnCompareTable{
  width:100%;
  border-collapse:collapse;
  min-width:640px;
  font-size:13px;
}

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

.vlnPage .vlnTable thead th,
.vlnPage .vlnCompareTable thead th{
  background:#f8fafc;
  color:var(--ink);
  font-weight:850;
}

/* Tool shell */
.vlnPage .vlnToolShell{
  border-radius:var(--r-lg);
  border:1px solid var(--line);
  background:rgba(248,250,252,.92);
  padding:16px;
  box-shadow:var(--shadow);
}
@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:var(--r);
  border:1px solid var(--line);
  background:#fff;
  padding:18px 18px 16px;
  box-shadow:var(--shadow2);
  min-width:0;
}

.vlnPage .vlnPaneTitle{
  font-size:15px;
  font-weight:950;
  margin:0 0 10px;
  color:var(--navy);
}

/* 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:var(--ink); display:block; }

.vlnPage .vlnField input,
.vlnPage .vlnField select,
.vlnPage .vlnForm-input,
.vlnPage .vlnForm-select{
  border-radius:var(--r-sm);
  border:1px solid var(--line);
  padding:10px 10px;
  background:#fff;
  color:var(--ink);
  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:var(--brand);
  box-shadow:0 0 0 1px rgba(37,99,235,.35);
}

.vlnPage .vlnField input[type="range"]{ width:100%; accent-color:var(--navy); }

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

.vlnPage .vlnHelp,
.vlnPage .vlnForm-help{ margin-top:6px; color:var(--muted); font-size:12.5px; line-height:1.55; }

.vlnPage .vlnError,
.vlnPage .vlnForm-error{ margin-top:10px; color:var(--bad); font-weight:750; }

/* Callouts */
.vlnPage .vlnCallout{
  border-radius:var(--r);
  border:1px solid var(--line);
  background:#fff;
  padding:12px 12px 10px;
  box-shadow:var(--shadow2);
  margin-top:12px;
}
.vlnPage .vlnCallout h3{ font-size:15px; margin:0 0 6px; }
.vlnPage .vlnCallout p{ margin:0; color:var(--muted); 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:var(--r);
  border:1px solid var(--line);
  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 var(--line2);
  color:var(--navy);
  font-weight:950;
  font-size:12.5px;
  white-space:nowrap;
}

.vlnPage .vlnNote{ color:var(--muted); font-size:12.5px; }

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

.vlnPage .vlnMetric .label{ color:var(--muted); font-size:12.5px; line-height:1.2; }
.vlnPage .vlnMetric .value{ margin-top:4px; color:var(--ink); 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:var(--r);
  border:1px solid var(--line);
  background:linear-gradient(180deg,#fff 0%, #f8fafc 100%);
  padding:12px 12px 10px;
  box-shadow:var(--shadow2);
}

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

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

.vlnPage .vlnStats{ margin:0; }
.vlnPage .vlnStats div{ display:flex; justify-content:space-between; gap:10px; margin-bottom:6px; color:var(--muted); }
.vlnPage .vlnStats dt{ font-weight:700; }
.vlnPage .vlnStats dd{ margin:0; font-weight:850; color:var(--ink); 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:var(--r); background:#fff; padding:12px 12px 10px; box-shadow:var(--shadow2); min-width:0; border:1px solid var(--line); }
.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:var(--good); }
.vlnPage .vlnTrafficTitle.yellow{ color:var(--warn); }
.vlnPage .vlnTrafficTitle.red{ color:var(--bad); }

/* FAQ */
.vlnPage .vlnFaq,
.vlnPage .vlnFaqList{
  margin-top:12px;
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  background:#fff;
  overflow:hidden;
  box-shadow:var(--shadow);
}

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

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

.vlnPage .vlnFaq summary,
.vlnPage .vlnFaqItem summary{
  cursor:pointer;
  list-style:none;
  padding:16px 16px;
  font-weight:950;
  color:var(--ink);
  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 var(--line2);
  background:#f8fafc;
  color:var(--muted);
  font-weight:950;
  flex:0 0 auto;
}

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

.vlnPage .vlnFaq .ans,
.vlnPage .vlnFaqBody{
  border-top:1px solid var(--line);
  padding:12px 16px 16px;
}

.vlnPage .vlnFaq .ans p{ margin:0; color:var(--muted); }

/* References */
.vlnPage .vlnRefs,
.vlnPage .vlnSources{
  margin-top:12px;
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  background:#fff;
  box-shadow:var(--shadow);
  overflow:hidden;
}

.vlnPage .vlnRefsInner{ padding:16px 16px 14px; }
.vlnPage .vlnRefsLabel{ margin:0 0 10px; color:var(--muted); 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:var(--muted);
}

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