.vlnFF, .vlnFF *{ box-sizing:border-box; }    .vlnFF{      --ink:#0f172a; --muted:#475569; --muted2:#64748b;      --border:#e2e8f0;      --shadow:0 18px 50px rgba(2,6,23,.10);      --shadow2:0 10px 24px rgba(2,6,23,.08);      --brand:#0b3aa4; --brand2:#2563eb;      --good:#065f46; --goodBg:#ecfdf5; --goodBd:#a7f3d0;      --warn:#92400e; --warnBg:#fffbeb; --warnBd:#fde68a;      --bad:#991b1b;  --badBg:#fef2f2;  --badBd:#fecaca;font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";color: var(--ink);
width:100%;
position: relative;      overflow-x:hidden;      background:        radial-gradient(1200px 520px at 22% 0%, rgba(37,99,235,.18), transparent 55%),        radial-gradient(900px 520px at 85% 18%, rgba(11,58,164,.12), transparent 58%),        linear-gradient(180deg, #eaf2ff 0%, #f6f8fc 45%, #f6f8fc 100%);      padding: 24px 0 60px;    }    /* Better anchor offsets on sites with sticky headers */    .vlnFF [id^="vln-ff-"]{ scroll-margin-top: 90px; }    .vlnFF .vlnSrOnly{      position:absolute !important;      width:1px; height:1px;      padding:0; margin:-1px;      overflow:hidden; clip:rect(0,0,0,0);      white-space:nowrap; border:0;    }    .vlnFF .vlnSkip{      position:absolute;      left:-9999px;      top: 10px;      z-index: 9999;      padding: 10px 12px;      border-radius: 12px;      background:#fff;      border:1px solid rgba(37,99,235,.45);      box-shadow: var(--shadow2);      color: var(--brand);      font-weight: 950;      text-decoration:none;    }    .vlnFF .vlnSkip:focus{ left: 10px; }    .vlnFF :focus-visible{      outline: 3px solid rgba(37,99,235,.45);      outline-offset: 2px;    }    .vlnFF .vlnWrap{ max-width: 1180px; margin: 0 auto; padding: 0 18px; }    @media (max-width: 720px){ .vlnFF .vlnWrap{ padding: 0 14px; } }    .vlnFF .vlnCrumb{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; color: var(--muted2); font-size: 12px; font-weight: 900; margin-bottom: 10px; }    .vlnFF .vlnCrumb a{ color: var(--muted2); text-decoration:none; }    .vlnFF .vlnCrumb a:hover{ color: var(--ink); text-decoration: underline; }    .vlnFF .vlnHero{ background: rgba(255,255,255,.88); border: 1px solid rgba(226,232,240,.95); border-radius: 22px; box-shadow: var(--shadow); overflow:hidden; }    .vlnFF .vlnHeroInner{ padding: 18px; }    .vlnFF .vlnBadge{ display:inline-flex; gap: 10px; align-items:center; padding: 10px 12px; border-radius: 999px; border: 1px solid rgba(226,232,240,.95); background: #fff; color: var(--muted); font-size: 12px; font-weight: 900; width: fit-content; max-width:100%; }    .vlnFF .vlnDot{ width: 9px; height: 9px; border-radius: 999px; background: #22c55e; box-shadow: 0 0 0 6px rgba(34,197,94,.14); }    .vlnFF .vlnH1{ margin: 12px 0 8px; font-size: clamp(28px, 3.1vw, 42px); line-height: 1.08; letter-spacing: -.035em; color: var(--brand); font-weight: 950; }    .vlnFF .vlnLead{ margin: 0; color: var(--muted); line-height: 1.65; font-size: 15px; max-width: 100ch; overflow-wrap:anywhere; }    .vlnFF .vlnPills{ display:flex; gap:10px; flex-wrap:wrap; margin-top: 12px; }    .vlnFF .vlnPill{ display:inline-flex; gap:8px; align-items:center; padding: 9px 10px; border-radius: 999px; border: 1px solid rgba(226,232,240,.95); background: #fff; color: var(--ink); font-size: 12px; font-weight: 950; max-width:100%; }    .vlnFF .vlnPill small{ color: var(--muted2); font-weight: 900; }    .vlnFF .vlnJumps{ display:flex; gap:8px; flex-wrap:wrap; margin-top: 14px; }    .vlnFF .vlnJump{ display:inline-flex; align-items:center; padding: 9px 11px; border-radius: 999px; border: 1px solid rgba(226,232,240,.95); background: rgba(238,242,255,.9); color: var(--ink); text-decoration:none; font-size: 12px; font-weight: 950; }    .vlnFF .vlnJump:hover{ border-color: rgba(37,99,235,.35); background: rgba(219,234,254,.9); }    .vlnFF .vlnGrid{ display:grid; gap: 14px; margin-top: 14px; }    .vlnFF .vlnCard{ background:#fff; border: 1px solid rgba(226,232,240,.95); border-radius: 22px; box-shadow: var(--shadow2); overflow:hidden; }    .vlnFF .vlnCardHead{ padding: 14px 16px; border-bottom: 1px solid rgba(226,232,240,.95); background: rgba(248,250,252,.9); }    .vlnFF .vlnCardHead h2{ margin:0; font-size: 18px; font-weight: 950; letter-spacing:-.01em; }    .vlnFF .vlnCardHead p{ margin: 6px 0 0; color: var(--muted); font-size: 13px; line-height: 1.6; max-width: 110ch; overflow-wrap:anywhere; }    .vlnFF .vlnCardBody{ padding: 14px 16px; }    .vlnFF .vlnTableWrap{ border: 1px solid rgba(226,232,240,.95); border-radius: 16px; overflow:auto; background:#fff; max-width:100%; }    .vlnFF .vlnTableWrap table{ width:100%; border-collapse: collapse; min-width: 760px; }    .vlnFF .vlnTableWrap caption{ text-align:left; padding: 12px 12px 0; color: var(--muted2); font-weight: 950; font-size: 12px; }    .vlnFF .vlnTableWrap th, .vlnFF .vlnTableWrap td{ padding: 12px 10px; border-bottom: 1px solid rgba(226,232,240,.95); text-align:left; vertical-align: top; font-size: 13px; }    .vlnFF .vlnTableWrap thead th{ position: sticky; top: 0; background:#fff; color: var(--muted2); font-size: 12px; font-weight: 950; z-index: 2; }    .vlnFF .vlnTableWrap tbody tr:hover td, .vlnFF .vlnTableWrap tbody tr:hover th{ background: #f8fafc; }    .vlnFF .vlnMoney{ font-variant-numeric: tabular-nums; font-weight: 950; }    .vlnFF .vlnCallouts{ display:grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; }    @media (max-width: 980px){ .vlnFF .vlnCallouts{ grid-template-columns: 1fr; } }    .vlnFF .vlnNote{ border: 1px solid rgba(226,232,240,.95); border-radius: 16px; padding: 12px; background:#fff; }    .vlnFF .vlnNote.good{ border-color: var(--goodBd); background: var(--goodBg); }    .vlnFF .vlnNote.warn{ border-color: var(--warnBd); background: var(--warnBg); }    .vlnFF .vlnNote.bad{ border-color: var(--badBd); background: var(--badBg); }    .vlnFF .vlnNote b{ display:block; margin-bottom: 6px; font-weight: 950; }    .vlnFF .vlnNote p{ margin: 0; color: var(--muted); font-size: 13px; line-height: 1.6; overflow-wrap:anywhere; }    .vlnFF .vlnNote ul{ margin:0; padding-left: 18px; color: var(--muted); font-size: 13px; line-height: 1.6; }    .vlnFF .vlnNote li{ margin: 6px 0; }    .vlnFF .vlnCols{ display:grid; grid-template-columns: 1.05fr .95fr; gap: 12px; }    @media (max-width: 980px){ .vlnFF .vlnCols{ grid-template-columns: 1fr; } }    .vlnFF .vlnCols > *{ min-width:0; }    .vlnFF .vlnForm{ display:grid; gap: 10px; border: 1px solid rgba(226,232,240,.95); border-radius: 16px; background:#fff; padding: 12px; }    .vlnFF .vlnRow{ display:grid; grid-template-columns: 1fr 1fr; gap: 10px; }    .vlnFF .vlnRow > *{ min-width:0; }    @media (max-width: 720px){ .vlnFF .vlnRow{ grid-template-columns: 1fr; } }    .vlnFF .vlnField label{ display:block; margin-bottom: 6px; color: var(--muted2); font-size: 12px; font-weight: 950; }    .vlnFF .vlnField input, .vlnFF .vlnField select{      width:100%;      max-width:100%;      padding: 11px 10px;      border: 1px solid rgba(226,232,240,.95);      border-radius: 12px;      background:#fff;      color: var(--ink);      font-size: 14px;      outline: none;    }    /* Prevent long selected text from spilling outside the control */    .vlnFF .vlnField select{      padding-right: 34px;      white-space: nowrap;      overflow: hidden;      text-overflow: ellipsis;    }    .vlnFF .vlnField input:focus, .vlnFF .vlnField select:focus{ border-color: rgba(37,99,235,.45); box-shadow: 0 0 0 4px rgba(37,99,235,.16); }    .vlnFF .vlnField input:disabled, .vlnFF .vlnField select:disabled{      opacity: .72;      cursor: not-allowed;      background: #f8fafc;    }    .vlnFF .vlnField input[data-invalid="1"], .vlnFF .vlnField select[data-invalid="1"]{      border-color: rgba(239,68,68,.75);      box-shadow: 0 0 0 4px rgba(239,68,68,.14);    }    .vlnFF .vlnHelp{ margin-top: 6px; color: var(--muted2); font-size: 12px; line-height: 1.45; overflow-wrap:anywhere; }    .vlnFF .vlnError{ margin-top: 6px; color: var(--bad); font-size: 12px; line-height: 1.35; font-weight: 900; overflow-wrap:anywhere; }    .vlnFF .vlnError:empty{ display:none; }    .vlnFF .vlnLabelSpacer{ display:block; height: 18px; margin-bottom: 6px; }    .vlnFF .vlnFieldNote .vlnHelp{ margin-top: 0; }    .vlnFF .vlnOutput{      border: 1px solid rgba(226,232,240,.95);      border-radius: 16px;      background: #f8fafc;      padding: 12px;      min-width:0;      overflow:hidden; /* critical: prevents any text from spilling outside container */      text-align:left;    }    .vlnFF .vlnOutput .vlnOutKey{ color: var(--muted2); font-size: 12px; font-weight: 950; }    .vlnFF .vlnOutput .vlnOutValue{      margin-top: 6px;      color: var(--brand);      font-size: 22px;      letter-spacing: -.01em;      font-variant-numeric: tabular-nums;      font-weight: 950;      max-width:100%;      overflow:hidden;      text-overflow:ellipsis;      white-space:nowrap; /* critical: no overflow past border */    }    .vlnFF .vlnOutput .vlnOutMsg{ margin-top: 10px; color: var(--muted); font-size: 13px; line-height: 1.6; overflow-wrap:anywhere; }    .vlnFF .vlnOutput .vlnOutMeta{ margin-top: 8px; color: var(--muted2); font-size: 12px; line-height: 1.45; overflow-wrap:anywhere; }    /* Visible only when JS didn't run (default state). Hidden as soon as JS initializes. */    .vlnFF .vlnJsAlert{ display:block; }    .vlnFF[data-vln-js="1"] .vlnJsAlert{ display:none; }    .vlnFF .vlnKPIs{ display:grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }    .vlnFF .vlnKPIs > *{ min-width:0; }    @media (max-width: 520px){ .vlnFF .vlnKPIs{ grid-template-columns: 1fr; } }    .vlnFF .vlnKpi{ border: 1px solid rgba(226,232,240,.95); border-radius: 14px; padding: 10px; background:#fff; overflow:hidden; }    .vlnFF .vlnKpi .vlnKpiLabel{ color: var(--muted2); font-size: 11px; font-weight: 950; }    .vlnFF .vlnKpi .vlnKpiNumber{      margin-top: 6px;      font-size: 16px;      font-weight: 950;      font-variant-numeric: tabular-nums;      max-width:100%;      overflow:hidden;      text-overflow:ellipsis;      white-space:nowrap;    }    .vlnFF .vlnKpi.ok{ border-color: var(--goodBd); background: var(--goodBg); }    .vlnFF .vlnKpi.warn{ border-color: var(--warnBd); background: var(--warnBg); }    .vlnFF .vlnKpi.bad{ border-color: var(--badBd); background: var(--badBg); }    .vlnFF .vlnBtnRow{ display:flex; gap:10px; flex-wrap:wrap; align-items: stretch; }    .vlnFF .vlnBtn{      display:inline-flex; align-items:center; justify-content:center;      gap:8px;      padding: 10px 12px;      border-radius: 14px;      border: 1px solid var(--brand);      background: var(--brand);      color:#fff;      font-weight: 950;      font-size: 13px;      cursor: pointer;      text-decoration:none;      line-height: 1.15;      white-space: nowrap;      -webkit-appearance: none;      appearance: none;      text-align:center;      max-width:100%;    }    @media (max-width: 420px){      .vlnFF .vlnBtn{ white-space: normal; }    }    .vlnFF .vlnBtnAlt{ background:#fff; border-color: rgba(37,99,235,.45); color: var(--brand); }    /* HARDEN against global theme link colors (fixes "blue text" bug on button-like links) */    .vlnFF .vlnBtn,    .vlnFF a.vlnBtn,    .vlnFF a.vlnBtn:link,    .vlnFF a.vlnBtn:visited,    .vlnFF a.vlnBtn:hover,    .vlnFF a.vlnBtn:active,    .vlnFF a.vlnBtn:focus,    .vlnFF button.vlnBtn,    .vlnFF button.vlnBtn:hover,    .vlnFF button.vlnBtn:active,    .vlnFF button.vlnBtn:focus{      color:#fff !important;      -webkit-text-fill-color:#fff !important;      text-decoration:none !important;      background: var(--brand) !important;      border-color: var(--brand) !important;    }    .vlnFF .vlnBtnAlt,    .vlnFF a.vlnBtnAlt,    .vlnFF a.vlnBtnAlt:link,    .vlnFF a.vlnBtnAlt:visited,    .vlnFF a.vlnBtnAlt:hover,    .vlnFF a.vlnBtnAlt:active,    .vlnFF a.vlnBtnAlt:focus,    .vlnFF button.vlnBtnAlt,    .vlnFF button.vlnBtnAlt:hover,    .vlnFF button.vlnBtnAlt:active,    .vlnFF button.vlnBtnAlt:focus{      color: var(--brand) !important;      -webkit-text-fill-color: var(--brand) !important;      text-decoration:none !important;      background:#fff !important;      border-color: rgba(37,99,235,.45) !important;    }    .vlnFF .vlnBtn:hover{ filter: brightness(.96); }    .vlnFF .vlnBtnAlt:hover{ background:#eff6ff !important; border-color: rgba(37,99,235,.65) !important; }    .vlnFF .vlnCite{ border: 1px dashed rgba(226,232,240,.95); border-radius: 16px; padding: 12px; background:#fff; }    .vlnFF .vlnCite p{ margin:0; color: var(--muted); font-size: 13px; line-height: 1.6; overflow-wrap:anywhere; }    /* Keep "link look" only for normal links, not button-style anchors */    .vlnFF .vlnLinks a:not(.vlnBtn):not(.vlnBtnAlt),    .vlnFF .vlnLinks a:not(.vlnBtn):not(.vlnBtnAlt):visited{      color:#1d4ed8 !important;      font-weight: 950;      text-decoration:none !important;    }    .vlnFF .vlnLinks a:not(.vlnBtn):not(.vlnBtnAlt):hover{      text-decoration: underline !important;    }    .vlnFF .vlnFooter{      margin-top: 14px;      color: var(--muted2);      font-size: 12px;      font-weight: 900;      display:flex;      justify-content:space-between;      gap:10px;      flex-wrap:wrap;      padding: 6px 2px 0;    }    .vlnFF .vlnFooter a{ color: var(--muted2) !important; text-decoration:none !important; }    .vlnFF .vlnFooter a:hover{ color: var(--ink) !important; text-decoration: underline !important; }    /* FAQ accordion */    .vlnFF .vlnDetailsWrap{ border: 1px solid rgba(226,232,240,.95); border-radius: 16px; background:#fff; overflow:hidden; }    .vlnFF .vlnDetailsWrap details{ border-top: 1px solid rgba(226,232,240,.95); }    .vlnFF .vlnDetailsWrap details:first-child{ border-top:none; }    .vlnFF .vlnDetailsWrap summary{      cursor:pointer;      padding: 12px 44px 12px 12px;      background:#f8fafc;      font-weight: 950;      list-style:none;      position: relative;    }    .vlnFF .vlnDetailsWrap summary::-webkit-details-marker{ display:none; }    .vlnFF .vlnDetailsWrap summary::after{      content:"+";      position:absolute;      right: 12px;      top: 50%;      transform: translateY(-50%);      width: 26px; height: 26px;      border-radius: 999px;      display:grid;      place-items:center;      border: 1px solid rgba(226,232,240,.95);      background:#fff;      color: var(--muted2);      font-weight: 950;    }    .vlnFF .vlnDetailsWrap details[open] summary::after{      content:"–";      color: var(--ink);    }    .vlnFF .vlnDetailsBody{ padding: 12px; color: var(--muted); font-size: 13px; line-height: 1.6; overflow-wrap:anywhere; }    /* Prose (long-form content) */    .vlnFF .vlnProse p{ margin: 0 0 10px; color: var(--muted); font-size: 14px; line-height: 1.75; overflow-wrap:anywhere; }    .vlnFF .vlnProse h3{ margin: 14px 0 8px; font-size: 16px; font-weight: 950; letter-spacing:-.01em; color: var(--ink); }    .vlnFF .vlnProse h4{ margin: 12px 0 6px; font-size: 14px; font-weight: 950; letter-spacing:-.01em; color: var(--ink); }    .vlnFF .vlnProse ul, .vlnFF .vlnProse ol{ margin: 0 0 10px; padding-left: 20px; color: var(--muted); font-size: 14px; line-height: 1.75; }    .vlnFF .vlnProse li{ margin: 6px 0; }    .vlnFF .vlnProse a{ color:#1d4ed8; font-weight: 950; text-decoration:none; }    .vlnFF .vlnProse a:hover{ text-decoration: underline; }
/* QA round 1 overrides — keep side-by-side at narrower breakpoint, sticky output */
.vlnFF .vlnCols {
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr) !important;
  gap: 18px !important;
  align-items: start !important;
}
.vlnFF .vlnCols > .vlnOutput {
  position: sticky;
  top: 90px;
  align-self: start;
  max-height: calc(100vh - 110px);
  overflow-y: auto;
}
@media (max-width: 880px) {
  .vlnFF .vlnCols { grid-template-columns: 1fr !important; }
  .vlnFF .vlnCols > .vlnOutput { position: static; max-height: none; }
}