/* =========================================================
   VLN Global UI CSS
   Scope: pages wrapped in .tlnPage
   Goals: consistent spacing, cards, grids, forms, pills
   Notes: Keep Divi safe, no theme wide resets outside .tlnPage
   ========================================================= */

/* Base scope */
.tlnPage,
.tlnPage * { box-sizing: border-box; }

.tlnPage{
  --ink:#0f172a;
  --muted:#475569;
  --muted2:#64748b;

  --border:rgba(226,232,240,.95);
  --borderSoft:rgba(203,213,225,1);

  --card:#ffffff;

  --brand:#0b3aa4;
  --brandDark:#062a7a;
  --link:#1d4ed8;

  --accent:#22c55e;
  --accentDark:#15803d;
  --accentGlow:rgba(34,197,94,.18);

  --danger:#b91c1c;
  --ok:#16a34a;

  --shadowMain:0 22px 60px rgba(15,23,42,.12);
  --shadowSoft:0 12px 32px rgba(15,23,42,.08);

  font-family: system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color: var(--ink);
  background:
    radial-gradient(1200px 520px at 20% 0%, rgba(37,99,235,.16), transparent 55%),
    radial-gradient(900px 520px at 80% 18%, rgba(56,189,248,.12), transparent 58%),
    linear-gradient(180deg,#eaf2ff 0%,#f6f8fc 45%,#f6f8fc 100%);
  padding: 22px 0 80px;
}

/* Prevent Divi theme styles from mangling our typography inside .tlnPage */
.tlnPage h1,
.tlnPage h2,
.tlnPage h3,
.tlnPage h4,
.tlnPage p,
.tlnPage ul,
.tlnPage ol,
.tlnPage li{
  font-family: inherit;
  letter-spacing: normal;
}

/* Wrapper */
.tlnPage .tlnWrap{
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 18px;
}
@media (max-width:960px){
  .tlnPage .tlnWrap{ padding: 0 14px; }
}

/* Links */
.tlnPage a{
  color: var(--link);
  text-decoration: none;
  font-weight: 800;
}
.tlnPage a:hover{ text-decoration: underline; }

/* Skip link */
.tlnSkip{
  position:absolute;
  left:-9999px;
  top:0;
  padding:10px 12px;
  background:#fff;
  border:1px solid var(--border);
  border-radius:12px;
  box-shadow: var(--shadowSoft);
  z-index:9999;
}
.tlnSkip:focus{ left: 14px; top: 14px; }

/* HERO */
.tlnHero{
  background:#fff;
  border-radius:24px;
  border:1px solid var(--border);
  box-shadow:var(--shadowMain);
  padding:18px 20px 16px;
  margin-bottom:14px;
}

/* Breadcrumb */
.tlnBreadcrumb{
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--muted2);
  font-weight:800;
  margin-bottom:8px;
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  align-items:center;
}
.tlnBreadcrumb a{ color:inherit; text-decoration:none; font-weight:800; }
.tlnBreadcrumb a:hover{ text-decoration:underline; }
.tlnBreadcrumb span[aria-hidden="true"]{ opacity:.9; }

/* Eyebrow */
.tlnHero-eyebrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 12px;
  border-radius:999px;
  border:1px solid rgba(34,197,94,.55);
  background:#fff;
  font-size:11px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--muted2);
  width:fit-content;
  max-width:100%;
}
.tlnHero-dot{
  width:8px;
  height:8px;
  border-radius:999px;
  background:var(--accent);
  box-shadow:0 0 0 5px var(--accentGlow);
  flex-shrink:0;
}
.tlnAccentWord{ color:var(--ok); font-weight:950; }

/* Headings */
.tlnHero h1{
  margin:10px 0 6px;
  font-size:clamp(26px,3vw,34px);
  font-weight:950;
  letter-spacing:-.03em;
  color:var(--brand);
  line-height:1.15;
}

/* Meta row */
.tlnHero-meta{
  margin:0;
  font-size:12px;
  color:var(--muted2);
  font-weight:800;
  line-height:1.7;
}
.tlnHero-meta time{ font-weight:950; }
.tlnMetaSep{ margin:0 6px; opacity:.9; }

/* Lead */
.tlnHero-lead{
  margin:10px 0 0;
  font-size:14px;
  line-height:1.75;
  color:var(--muted);
  max-width:1100px;
}
.tlnHero-lead strong{ font-weight:950; color: var(--ink); }

/* Scenario jump pills */
.tlnHero-jumps{
  margin-top:8px;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
  justify-content:center;
  font-size:12px;
}
.tlnJumpPill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:7px 11px;
  border-radius:999px;
  border:1px solid rgba(30,64,175,.85);
  background:#f8fafc;
  color:var(--brandDark);
  font-size:12px;
  font-weight:900;
  text-decoration:none;
  line-height:1.2;
  -webkit-tap-highlight-color:transparent;
}
.tlnJumpPill:hover{ background:#eff6ff; text-decoration:none; }
.tlnJumpPill:focus-visible{
  outline:3px solid rgba(37,99,235,.35);
  outline-offset:2px;
}

/* Quick Answers block (THIS is the ATF layout you’re missing) */
.tlnHero-quick{
  margin-top:12px;
  background:#eef2ff;
  border-radius:18px;
  border:1px solid rgba(191,219,254,.9);
  padding:12px 12px 10px;
}
.tlnHero-quickHead{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin-bottom:8px;
  flex-wrap:wrap;
}
.tlnHero-quickHead h2{
  margin:0;
  font-size:12px;
  font-weight:950;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--link);
}
.tlnHero-quickHead span{
  font-size:12px;
  color:var(--muted2);
  font-weight:800;
}

/* Grid must be forced, Divi sometimes nukes it */
.tlnHero-quickGrid{
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
}
@media (max-width:900px){
  .tlnHero-quickGrid{ grid-template-columns:1fr; }
}

/* Cards */
.tlnHero-quickCard{
  background:#fff;
  border-radius:12px;
  border:1px solid rgba(226,232,240,.95);
  padding:10px 11px;
  box-shadow:0 8px 18px rgba(15,23,42,.04);
}
.tlnHero-quickCard h3{
  margin:0 0 6px;
  font-size:14px;
  font-weight:950;
  color:var(--ink);
  letter-spacing:-.01em;
}
.tlnHero-quickCard ul{
  margin:0;
  padding-left:18px;
  list-style:disc !important;
  list-style-position:outside;
  font-size:13px;
  color:var(--muted);
  line-height:1.65;
}
.tlnHero-quickCard li{ margin:3px 0; }

.tlnHero-qaNote{
  margin-top:8px;
  font-size:12px;
  color:var(--muted2);
  font-weight:800;
}

/* CTA buttons */
.tlnHero-ctas{
  margin-top:14px;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
}

.tlnBtn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:10px 16px;
  border-radius:999px;
  border:1px solid transparent;
  font-size:13px;
  font-weight:900;
  text-decoration:none;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  min-height:44px;
  white-space:nowrap;
  line-height:1;
  user-select:none;
}

.tlnBtn-secondary{
  background:#fff;
  color:var(--link);
  border-color:rgba(226,232,240,.95);
}
.tlnBtn-secondary:hover{
  border-color:rgba(37,99,235,.55);
  background:#eff6ff;
  text-decoration:none;
}

.tlnBtn-ghost{
  background:#fff;
  color:var(--muted2);
  border-color:rgba(226,232,240,.95);
  font-weight:850;
}
.tlnBtn-ghost:hover{
  color:var(--link);
  border-color:rgba(37,99,235,.55);
  background:#eff6ff;
  text-decoration:none;
}

.tlnBtn-success{
  background:var(--ok);
  border-color:var(--ok);
  box-shadow:0 14px 30px rgba(15,23,42,.20);
  color:#fff !important;
}
.tlnBtn-success:hover{
  background:var(--accentDark);
  border-color:var(--accentDark);
  color:#fff !important;
  text-decoration:none;
}

.tlnBtn-reset{
  background:#fff;
  color:var(--danger);
  border-color:var(--danger);
  font-weight:650;
}
.tlnBtn-reset:hover{
  background:var(--danger);
  border-color:var(--danger);
  color:#fff;
  text-decoration:none;
}

.tlnLeadPill{
  background:#fff !important;
  color:#166534 !important;
  border:1px solid rgba(22,163,74,.95) !important;
  font-weight:950;
}
.tlnLeadPill:hover{
  background:var(--ok) !important;
  border-color:var(--ok) !important;
  color:#fff !important;
  text-decoration:none !important;
}

.tlnBtn:focus-visible{
  outline:3px solid rgba(37,99,235,.35);
  outline-offset:2px;
}

/* Top nav */
.tlnTopNav{
  margin-top:12px;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:14px;
  font-size:13px;
}
.tlnTopNav a{
  color:var(--ink);
  font-weight:600;
  text-decoration:none;
  padding:6px 2px;
  border-bottom:2px solid transparent;
}
.tlnTopNav a:hover{
  color:var(--link);
  text-decoration:none;
  border-bottom-color:rgba(37,99,235,.55);
}
.tlnTopNav a:focus-visible{
  outline:3px solid rgba(37,99,235,.35);
  outline-offset:2px;
  border-radius:8px;
}

/* Sections */
.tlnSection{
  margin-top:18px;
  background:#fff;
  border-radius:22px;
  border:1px solid var(--border);
  box-shadow:var(--shadowSoft);
  padding:16px 18px 16px;
  scroll-margin-top:90px;
}
.tlnSection-head h2{
  margin:0 0 6px;
  font-size:18px;
  font-weight:950;
  letter-spacing:-.02em;
  color:var(--brand);
}
.tlnSection-head p{
  margin:0;
  font-size:14px;
  color:var(--muted);
  line-height:1.7;
}

/* Tool headings */
.tlnTool-title{
  margin-top:12px;
  margin-bottom:4px;
  font-size:15px;
  font-weight:950;
  letter-spacing:-.01em;
  color:var(--ink);
}
.tlnTool-intro{
  margin:0 0 8px;
  font-size:14px;
  color:var(--muted);
  line-height:1.7;
}
.tlnTool-grid{
  margin-top:8px;
  display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  gap:18px;
  align-items:flex-start;
}
@media (max-width:1040px){
  .tlnTool-grid{ grid-template-columns:1fr; }
}

/* Forms */
.tlnForm{
  border-radius:16px;
  border:1px solid rgba(226,232,240,.95);
  background:#f9fafb;
  padding:12px 12px 10px;
}
.tlnForm-group{ margin-bottom:10px; }
.tlnForm-label{
  display:block;
  font-size:12px;
  font-weight:900;
  color:var(--ink);
  margin-bottom:4px;
}
.tlnForm-select,
.tlnForm-input{
  width:100%;
  border-radius:12px;
  border:1px solid var(--borderSoft);
  padding:9px 10px;
  font-size:13px;
  color:var(--ink);
  background:#fff;
  outline:none;
}
.tlnForm-select:focus,
.tlnForm-input:focus{
  border-color:#2563eb;
  box-shadow:0 0 0 3px rgba(37,99,235,.20);
}
.tlnForm-row{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
}
@media (max-width:640px){
  .tlnForm-row{ grid-template-columns:1fr; }
}
.tlnForm-help{
  margin-top:6px;
  font-size:12px;
  color:var(--muted2);
  line-height:1.55;
}
.tlnForm-tags{
  margin-top:6px;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.tlnTag{
  display:inline-flex;
  align-items:flex-start;
  gap:8px;
  padding:7px 10px;
  border-radius:999px;
  border:1px solid rgba(226,232,240,.95);
  background:#fff;
  font-size:12px;
  color:var(--muted2);
  cursor:pointer;
  line-height:1.35;
  max-width:100%;
  font-weight:800;
}
.tlnTag input{ margin:2px 0 0; }
.tlnForm-actions{
  margin-top:10px;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.tlnForm-error{
  margin-top:6px;
  font-size:12px;
  color:var(--danger);
  font-weight:900;
  min-height:16px;
}

/* Results */
.tlnResult{
  border-radius:18px;
  border:1px solid rgba(226,232,240,.95);
  background:#fff;
  color:var(--ink);
  padding:14px 14px 12px;
  box-shadow:var(--shadowSoft);
  overflow:hidden;
}
.tlnResult-header{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:8px;
  flex-wrap:wrap;
}
.tlnResult-header h3{
  margin:0;
  font-size:16px;
  font-weight:950;
  letter-spacing:-.01em;
  color:var(--ink);
}
.tlnResult-pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:5px 10px;
  border-radius:999px;
  border:1px solid rgba(226,232,240,.95);
  font-size:12px;
  font-weight:900;
  background:#f8fafc;
  color:var(--muted2);
  max-width:100%;
  line-height:1.2;
}
.tlnResult-pill > span:first-child{
  width:7px; height:7px; border-radius:999px;
  background:#94a3b8;
  flex:0 0 7px;
}
.tlnResult-pill[data-level="idle"]{ background:#f8fafc; border-color:#e2e8f0; color:var(--muted2); }
.tlnResult-pill[data-level="idle"] > span:first-child{ background:#94a3b8; }
.tlnResult-pill[data-level="ready"]{ background:#ecfdf3; border-color:#bbf7d0; color:#166534; }
.tlnResult-pill[data-level="ready"] > span:first-child{ background:var(--ok); }
.tlnResult-pill[data-level="close"]{ background:#fff7ed; border-color:#fed7aa; color:#9a3412; }
.tlnResult-pill[data-level="close"] > span:first-child{ background:#ea580c; }
.tlnResult-pill[data-level="prep"]{ background:#fef2f2; border-color:#fecaca; color:#b91c1c; }
.tlnResult-pill[data-level="prep"] > span:first-child{ background:#e11d48; }

.tlnResult-scoreWrap{ margin-top:10px; }
.tlnResult-scoreLabel{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:8px;
  font-size:12px;
  color:var(--muted2);
  font-weight:800;
  margin-bottom:4px;
}
.tlnResult-barOuter{
  width:100%;
  height:8px;
  border-radius:999px;
  background:#f1f5f9;
  border:1px solid rgba(226,232,240,.95);
  overflow:hidden;
}
.tlnResult-barInner{
  height:100%;
  width:0%;
  border-radius:999px;
  background:linear-gradient(90deg,#22c55e,#16a34a);
  transition:width .25s ease-out;
}

.tlnResult-body{
  margin-top:10px;
  font-size:13px;
  line-height:1.7;
  color:var(--muted);
}
.tlnResult-body p{ margin:0 0 6px; }
.tlnResult-list{
  margin:0;
  padding-left:18px;
  list-style:disc;
  list-style-position:outside;
  font-size:13px;
  color:var(--muted);
  line-height:1.7;
}
.tlnResult-list li{ margin:3px 0; }

.tlnResult-links{
  margin-top:8px;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.tlnResult-links a{
  font-size:12px;
  text-decoration:none;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(226,232,240,.95);
  color:var(--link);
  background:#eff6ff;
  font-weight:900;
}
.tlnResult-links a:hover{
  border-color:rgba(37,99,235,.55);
  background:#dbeafe;
  text-decoration:none;
}

/* Lead capture */
.tlnLeadCapture{
  margin-top:12px;
  border-top:1px solid rgba(226,232,240,.95);
  padding-top:12px;
}
.tlnLeadCapture h4{
  margin:0 0 6px;
  font-size:14px;
  font-weight:950;
  color:var(--ink);
}
.tlnLeadCapture p{
  margin:0 0 10px;
  font-size:13px;
  color:var(--muted);
  line-height:1.65;
}
.tlnLeadCapture-note{
  margin-top:8px;
  font-size:12px;
  color:var(--muted2);
  font-weight:700;
  line-height:1.55;
}

/* Honeypot */
.tlnHpWrap{
  position:absolute !important;
  left:-9999px !important;
  width:1px !important;
  height:1px !important;
  overflow:hidden !important;
}

/* Types explorer */
.tlnTypes{ margin-top:18px; }
.tlnTypes-grid{
  margin-top:10px;
  display:grid;
  grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:16px;
  align-items:flex-start;
}
@media (max-width:1040px){
  .tlnTypes-grid{ grid-template-columns:1fr; }
}
.tlnTypeTabs{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.tlnTypeTab{
  flex:1 1 160px;
  min-width:0;
  text-align:left;
  border-radius:14px;
  border:1px solid rgba(226,232,240,.95);
  background:#f9fafb;
  padding:9px 10px;
  font-size:12px;
  font-weight:900;
  color:var(--muted2);
  cursor:pointer;
}
.tlnTypeTab strong{
  display:block;
  margin-bottom:2px;
  font-size:12px;
  font-weight:950;
  color:var(--ink);
}
.tlnTypeTab span{
  font-size:11px;
  color:var(--muted2);
  font-weight:800;
}
.tlnTypeTab[aria-selected="true"]{
  border-color:#2563eb;
  background:#eff6ff;
  color:var(--link);
  box-shadow:0 10px 22px rgba(37,99,235,.16);
}
.tlnTypeDetail{
  border-radius:16px;
  border:1px solid rgba(226,232,240,.95);
  background:#f9fafb;
  padding:12px 12px 10px;
}
.tlnTypeDetail h3{
  margin:0 0 6px;
  font-size:16px;
  font-weight:950;
  letter-spacing:-.01em;
  color:var(--ink);
}
.tlnTypeDetail p{
  margin:0 0 8px;
  font-size:14px;
  color:var(--muted);
  line-height:1.7;
}
.tlnTypeDetail ul{
  margin:0 0 8px;
  padding-left:18px;
  list-style:disc;
  font-size:13px;
  color:var(--muted);
  line-height:1.7;
}
.tlnTypeDetail li{ margin:3px 0; }

/* Split basics */
.tlnSplit{
  margin-top:10px;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px;
}
@media (max-width:900px){
  .tlnSplit{ grid-template-columns:1fr; }
}
.tlnSplit-col h3{
  margin:0 0 6px;
  font-size:16px;
  font-weight:950;
  letter-spacing:-.01em;
  color:var(--ink);
}
.tlnSplit-col p{
  margin:0 0 8px;
  font-size:14px;
  color:var(--muted);
  line-height:1.7;
}
.tlnSplit-col ul{
  margin:0;
  padding-left:18px;
  list-style:disc;
  font-size:14px;
  color:var(--muted);
  line-height:1.7;
}
.tlnSplit-col li{ margin:3px 0; }

/* FAQ */
.tlnFaq{ margin-top:18px; }
.tlnFaqHead{
  padding-bottom:4px;
  border-bottom:1px solid rgba(226,232,240,.95);
  margin-bottom:4px;
}
.tlnFaqItem{ border-top:1px solid rgba(226,232,240,.95); }
.tlnFaqItem summary{
  list-style:none;
  cursor:pointer;
  padding:10px 0;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:8px;
  font-size:14px;
  font-weight:950;
  color:var(--ink);
}
.tlnFaqItem summary::-webkit-details-marker{ display:none; }
.tlnFaqIcon{
  width:22px;
  height:22px;
  border-radius:999px;
  border:1px solid rgba(226,232,240,.95);
  background:#fff;
  position:relative;
  flex-shrink:0;
}
.tlnFaqIcon::before,
.tlnFaqIcon::after{
  content:'';
  position:absolute;
  left:50%;
  top:50%;
  background:var(--ink);
  transform:translate(-50%,-50%);
  border-radius:2px;
}
.tlnFaqIcon::before{ width:12px; height:2px; }
.tlnFaqIcon::after{ width:2px; height:12px; }
.tlnFaqItem[open] .tlnFaqIcon::after{ display:none; }
.tlnFaqBody{
  padding:0 0 10px;
  font-size:14px;
  color:var(--muted);
  line-height:1.75;
}

/* Sources */
.tlnSourcesList{
  margin:8px 0 0;
  padding-left:18px;
  list-style:disc;
  font-size:14px;
  color:var(--muted);
  line-height:1.7;
}
.tlnSourcesList li{ margin:4px 0; }
.tlnFootNote{
  margin-top:6px;
  font-size:12px;
  color:var(--muted2);
  text-align:right;
  font-weight:800;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .tlnPage *{
    scroll-behavior:auto !important;
    transition-duration:0.001ms !important;
    animation-duration:0.001ms !important;
  }
}

/* ================================
   VLN – VA MAIN ATF PATCH (Divi-safe)
   Scope: .tlnPage-vaMain only
   ================================ */

.tlnPage-vaMain{
  --vlnText:#0b1a33;
  --vlnMuted:#52627a;
  --vlnBlue:#0b5cff;
  --vlnBlueSoft:rgba(11,92,255,.10);
  --tlnCard:#ffffff;
  --vlnLine:rgba(11,26,51,.12);
  --vlnBg:#f6f9ff;
  --vlnShadow:0 10px 30px rgba(11,26,51,.08);
  color:var(--vlnText);
}

.tlnPage-vaMain,
.tlnPage-vaMain *{ box-sizing:border-box; }

.tlnPage-vaMain .tlnWrap{
  max-width:1160px;
  margin:0 auto;
  padding:24px 16px 64px;
}

.tlnPage-vaMain .tlnHero{
  background:var(--tlnCard);
  border:1px solid var(--vlnLine);
  box-shadow:var(--vlnShadow);
  border-radius:20px;
  padding:18px 18px 16px;
}

.tlnPage-vaMain .tlnHero-meta{
  font-size:13px;
  color:var(--vlnMuted);
}

.tlnPage-vaMain .tlnHero-jumps{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  justify-content:center;
}

.tlnPage-vaMain .tlnHero-quick{
  border:1px solid rgba(11,92,255,.20);
  background:var(--vlnBlueSoft);
  border-radius:16px;
  padding:14px;
}

.tlnPage-vaMain .tlnHero-quickGrid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:12px;
}

@media (max-width: 900px){
  .tlnPage-vaMain .tlnHero-quickGrid{ grid-template-columns:1fr; }
}

@media (min-width: 1180px){
  .tlnPage-vaMain .tlnHero-quickGrid{ grid-template-columns:repeat(4, minmax(0,1fr)); }
}

.tlnPage-vaMain .tlnHero-quickCard{
  background:var(--vlnBg);
  border:1px solid var(--vlnLine);
  border-radius:14px;
  padding:14px 14px 12px;
}

.tlnPage-vaMain .tlnHero-quickCard h3{
  margin:0 0 8px;
  font-size:15px;
  line-height:1.25;
  color:var(--vlnText);
}

.tlnPage-vaMain .tlnHero-quickCard ul{
  margin:0;
  padding-left:18px;
  color:var(--vlnText);
}

.tlnPage-vaMain .tlnHero-quickCard li{
  margin:6px 0;
  color:var(--vlnText);
}

.tlnPage-vaMain .tlnHero-qaNote{
  margin-top:12px;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid var(--vlnLine);
  background:#fff;
  color:var(--vlnMuted);
  font-size:13px;
}


/* ========================================================
   VLN UI — SPACING & CALLOUT SYSTEM v3 (merged)
   Targets: tlnPage/valnPage article body + callouts + bullet-section-*
   Applied: 2026-03-25 (staging + production)
   Decision log:
     - Para bottom: 0.5em (prod tighter) + margin-top: 0 (prod)
     - H2/H3 margins: prod values (staging lacked these entirely)
     - vlnSection / vlnSectionHead / FAQ: best of both
     - Callout colors + bullet-section: staging (prod never had them)
   ======================================================== */

/* ----------------------------------------------------------
   1. tlnMeta (Primary Sources) — 4px gap below H1
   ---------------------------------------------------------- */
.tlnPage .tlnMeta,
.valnPage .tlnMeta{
  margin-top: 4px !important;
}

/* ----------------------------------------------------------
   2. PARAGRAPH SPACING — 0.5em bottom, no top margin
   ---------------------------------------------------------- */
.tlnPage p,
.valnPage p{
  margin-bottom: 0.5em !important;
  margin-top: 0 !important;
}

/* Tighten gap between jump-link pills and first paragraph */
.tlnPage .tlnPills,
.valnPage .tlnPills{
  margin-bottom: 2px !important;
}

/* ----------------------------------------------------------
   3. H2 IN ARTICLE BODY — 6px below, 1.2em above
   ---------------------------------------------------------- */
.tlnPage h2,
.valnPage h2{
  margin-bottom: 6px !important;
  margin-top: 1.2em !important;
}

/* ----------------------------------------------------------
   4. H3 IN ARTICLE BODY — 6px below, 1em above
   ---------------------------------------------------------- */
.tlnPage h3,
.valnPage h3{
  margin-bottom: 6px !important;
  margin-top: 1em !important;
}

/* ----------------------------------------------------------
   5. NEXT STEP PILL — 8px above and below
   ---------------------------------------------------------- */
.tlnPage p.tlnHeroLead:has(.tlnNextPill),
.valnPage p.tlnHeroLead:has(.tlnNextPill){
  margin-top: 8px !important;
  margin-bottom: 8px !important;
}

/* ----------------------------------------------------------
   6. ATF CARD GRID — reduce gap below grid
   ---------------------------------------------------------- */
.tlnPage .tlnQuickGrid,
.valnPage .tlnQuickGrid{
  margin-bottom: 4px !important;
}

/* ----------------------------------------------------------
   7. FAQ / SECTION SPACING
   ---------------------------------------------------------- */
/* Section card — tighter top margin */
.tlnPage .tlnSection,
.valnPage .tlnSection{
  margin-top: 10px !important;
}

/* Section head — tighten below heading */
.tlnPage .tlnSectionHead,
.valnPage .tlnSectionHead{
  margin-bottom: 4px !important;
  padding-bottom: 4px !important;
}

/* FAQ section h2 — kill browser-default top margin inside card
   Specificity (0,2,1) beats .tlnPage h2 at (0,1,1) above */
.tlnSection .tlnSectionHead h2{
  margin-top: 0 !important;
  margin-bottom: 6px !important;
}

/* Gap between FAQ heading and first toggle: 18px → 8px */
.tlnFaq{
  margin-top: 8px !important;
}

/* FAQ toggle — 8px padding */
.tlnPage .tlnFaq summary,
.valnPage .tlnFaq summary,
.tlnPage .tlnFaqItem summary,
.valnPage .tlnFaqItem summary{
  padding: 8px 16px !important;
}

.tlnPage .tlnFaq .ans,
.valnPage .tlnFaq .ans,
.tlnPage .tlnFaqBody,
.valnPage .tlnFaqBody{
  padding: 8px 16px !important;
}

/* ----------------------------------------------------------
   8. BULLET / LIST SPACING
   ---------------------------------------------------------- */
.tlnPage li,
.valnPage li{
  margin-top: 3px !important;
  margin-bottom: 3px !important;
}

/* ATF QuickCard h3 */
.tlnPage .tlnQuickCard h3,
.valnPage .tlnQuickCard h3{
  font-size: 14px !important;
  margin-bottom: 6px !important;
}

.tlnPage .tlnQuickCard li,
.valnPage .tlnQuickCard li{
  margin: 3px 0 !important;
}

/* ----------------------------------------------------------
   9. CALLOUT DESIGN SYSTEM
      Specificity (0,2,1) — beats plugin body.valn-ui .tlnCallout
      (same specificity, theme CSS loads later → wins)
   ---------------------------------------------------------- */

/* Base: info/neutral blue */
body .tlnPage .tlnCallout,
body .valnPage .tlnCallout{
  padding: 16px 20px !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  background: #eff6ff !important;
  border: 1px solid #bfdbfe !important;
}

/* Success / green */
body .tlnCallout.tlnCallout-green,
body .tlnPage .tlnCallout.tlnCallout-green,
body .valnPage .tlnCallout.tlnCallout-green{
  background: #f0fdf4 !important;
  border-color: #bbf7d0 !important;
}

/* Warning / yellow */
body .tlnCallout.tlnCallout-yellow,
body .tlnPage .tlnCallout.tlnCallout-yellow,
body .valnPage .tlnCallout.tlnCallout-yellow,
body .tlnCallout.tlnCallout-warn,
body .tlnPage .tlnCallout.tlnCallout-warn,
body .valnPage .tlnCallout.tlnCallout-warn{
  background: #fffbeb !important;
  border-color: #fde68a !important;
}

/* Danger / red */
body .tlnCallout.tlnCallout-red,
body .tlnPage .tlnCallout.tlnCallout-red,
body .valnPage .tlnCallout.tlnCallout-red{
  background: #fef2f2 !important;
  border-color: #fecaca !important;
}

/* Info / blue + ProTip */
body .tlnCallout.tlnCallout-blue,
body .tlnPage .tlnCallout.tlnCallout-blue,
body .valnPage .tlnCallout.tlnCallout-blue,
body .tlnCallout.tlnProTip,
body .tlnPage .tlnCallout.tlnProTip,
body .valnPage .tlnCallout.tlnProTip{
  background: #eff6ff !important;
  border-color: #bfdbfe !important;
}

/* Disclosure / neutral */
body .tlnCallout.tlnDisclosure,
body .tlnPage .tlnCallout.tlnDisclosure,
body .valnPage .tlnCallout.tlnDisclosure{
  background: #f8fafc !important;
  border-color: #e2e8f0 !important;
}

/* Callout titles — dark navy */
body .tlnCallout h2,
body .tlnCallout h3,
body .tlnCallout h4,
body .tlnPage .tlnCallout h2,
body .tlnPage .tlnCallout h3,
body .tlnPage .tlnCallout h4,
body .valnPage .tlnCallout h2,
body .valnPage .tlnCallout h3,
body .valnPage .tlnCallout h4{
  color: #1e2d4f !important;
  margin-top: 0 !important;
  margin-bottom: 6px !important;
}

/* First p/ul after callout heading — no top gap */
.tlnCallout h2 + p, .tlnCallout h3 + p, .tlnCallout h4 + p,
.tlnCallout h2 + ul, .tlnCallout h3 + ul, .tlnCallout h4 + ul{
  margin-top: 0 !important;
}

/* Callout body text */
body .tlnCallout p,
body .tlnPage .tlnCallout p,
body .valnPage .tlnCallout p{
  color: inherit !important;
}

/* Callout li */
body .tlnCallout li,
body .tlnPage .tlnCallout li,
body .valnPage .tlnCallout li{
  margin: 4px 0 !important;
}

/* v4.1: bullet-section rules moved to tln-pillar-v3.css */

/* ----------------------------------------------------------
   H1 mobile font size — clamp values for 980px and 480px
   Overrides base .tlnHero h1 { font-size:clamp(26px,3vw,34px) }
   ---------------------------------------------------------- */
@media (max-width:980px){
  .tlnHero h1{
    font-size:clamp(24px,5.5vw,48px);
  }
}
@media (max-width:480px){
  .tlnHero h1{
    font-size:clamp(22px,6vw,32px);
  }
}

/* ── tlnFaq standalone ─────────────────────────────────────────────────────
   The <details>/<summary>/<div class="ans"> markup (generated by faq_full.php)
   works on ANY page regardless of tlnPage wrapper.
   Mirrors .tlnFaqItem rules above + removes .tlnPage scoping from lines 1075-1086. */
.tlnFaq details{
  border-top: 1px solid rgba(226,232,240,.95);
}
.tlnFaq details > summary{
  list-style: none;
  cursor: pointer;
  padding: 8px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink, #1e2d4f);
}
.tlnFaq details > summary::-webkit-details-marker{ display: none; }
.tlnFaq .tlnFaqQ{
  flex: 1;
}
.tlnFaq .ans{
  padding: 8px 16px;
  font-size: 14px;
  color: var(--muted, #4a5568);
  line-height: 1.75;
}
/* Also un-scope the padding !important overrides so they apply globally */
.tlnFaq summary,
.tlnFaqItem summary{
  padding: 8px 16px !important;
}
.tlnFaq .ans,
.tlnFaqBody{
  padding: 8px 16px !important;
}

/* ── Desktop horizontal gutter ─────────────────────────────────────────────
   Divi sets padding:0 on all sections/rows at >=981px, so non-tlnWrap content
   runs edge-to-edge. Applies 20px breathing room to all Divi rows at desktop.
   tlnPage articles: tlnWrap (max-width:1200px + padding:0 18px) constrains
   text width, so row padding is additive but harmless. */
@media (min-width: 981px) {
  body.valn-ui.et_pb_pagebuilder_layout #main-content .et_pb_row {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}
/* tlnFaq expand/collapse indicator — + when closed, − when open */
.tlnFaq details > summary::after {
  content: '+';
  font-size: 18px;
  font-weight: 400;
  line-height: 1;
  flex-shrink: 0;
  color: var(--ink, #1e2d4f);
}
.tlnFaq details[open] > summary::after {
  content: '\2212'; /* minus sign */
}
/* ── YARPP related articles — single row at desktop ─────────────────────
   YARPP default: flex-wrap:wrap + width:230px per thumbnail (4 items).
   4×230px + 3×16px gaps = 968px — wraps to 2 rows in 75% sidebar layout.
   Fix: force single row, let items share space equally. */
@media (min-width: 981px) {
  .yarpp-thumbnails-horizontal {
    flex-wrap: nowrap !important;
  }
  .yarpp-thumbnails-horizontal .yarpp-thumbnail {
    flex: 1 1 0 !important;
    width: auto !important;
    min-width: 0 !important;
  }
}


/* ── tlnTable — standalone table styling (no .tlnPage root dependency) ── */
.tlnTableScroll{
  width:100%;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  border-radius:12px;
  border:1px solid #e2e8f0;
  background:#fff;
  margin:1em 0;
}
table.tlnTable{
  display:table;
  width:100%;
  border-collapse:collapse;
  table-layout:auto;
  font-size:0.92rem;
}
table.tlnTable th,
table.tlnTable td{
  border:1px solid #e2e8f0;
  padding:10px 12px;
  text-align:left;
  vertical-align:top;
}
table.tlnTable thead th{
  background:#f8fafc;
  color:#0f172a;
  font-weight:700;
}
table.tlnTable tbody tr:nth-child(even){
  background:#fafbfc;
}
@media (max-width:640px){
  table.tlnTable th,
  table.tlnTable td{
    padding:8px 8px;
    font-size:0.85rem;
  }
}

/* Blog archive grid — consistent thumbnail aspect ratio */
.et_pb_blog_grid .et_pb_post .entry-featured-image-url img {
  width: 100% !important;
  height: 200px !important;
  object-fit: cover !important;
  object-position: center !important;
}


/* ============================================================
   TLN ATF Styling Fixes — 2026-04-30
   ============================================================ */

/* 1. Byline block: remove card styling, flatten into text-only */
.tln-eeat-block {
  border: none !important;
  background: transparent !important;
  border-radius: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
}

/* 2. Byline alignment: flush left with content */
.tln-eeat-inner {
  padding-left: 0 !important;
}
@media (min-width: 768px) {
  .tln-eeat-inner {
    padding-left: 0 !important;
    margin-left: 0 !important;
  }
}

/* 3. Tighter byline spacing */
.tln-eeat-wrap--top {
  margin-top: 10px;
  margin-bottom: 12px;
}

/* 4. Inline editorial links: brand green, normal weight */
.tlnPage a[href^="/"]:not(.tlnNextLink):not(.tlnSkip):not(.tlnPill):not(.tlnBreadcrumb a),
.tlnCard ~ * a[href^="/"]:not(.tlnNextLink):not(.tlnSkip):not(.tlnPill) {
  color: #16a34a !important;
  font-weight: inherit !important;
  text-decoration: none;
}
.tlnPage a[href^="/"]:not(.tlnNextLink):not(.tlnSkip):not(.tlnPill):hover {
  text-decoration: underline;
}

/* 5. Hide Primary Sources row in ATF hero */
.tlnMeta {
  display: none !important;
}

/* 6. Hide jump pills row in ATF hero */
.tlnPills {
  display: none !important;
}

/* 7. Avatar sizing override (44px set in plugin, this is defensive) */
.tln-eeat-avatar {
  width: 44px !important;
  height: 44px !important;
}
.tln-eeat-block {
  --tln-avatar-size: 44px !important;
}