.elementor-14132 .elementor-element.elementor-element-7d585e2{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-14132 .elementor-element.elementor-element-7bde4b81{margin:-20px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-14132 .elementor-element.elementor-element-1a989afb{margin:-30px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}/* Start custom CSS for shortcode, class: .elementor-element-7bde4b81 *//* =========================================================
   SBY / Nfinite — Audit Form Section (CLEAN + SAFE)
   ✅ Desktop: 2 columns (text left, form right)
   ✅ Mobile/Tablet: stacks to 1 column
   ✅ Scoped to .nf-audit so it won’t break other pages
   ✅ Removes the “force flex” + broken brace + debug rules
========================================================= */

/* --- WPForms labels (scoped) --- */
.nf-audit .wpforms-container .wpforms-form .wpforms-field-label{
  color:#fff;
}

/* ========= FORM SECTION ========= */
.nf-audit .sby-audit-form-section{
  background: radial-gradient(circle at top left, rgba(56,189,248,.08), rgba(15,23,42,.98));
  border-radius: 20px;
  padding: 26px 22px 22px;
  border: 1px solid rgba(148,163,184,.6);
  box-shadow: 0 24px 60px rgba(15,23,42,.9);
  margin-bottom: 52px;

  width: 100%;
  max-width: 100%;
  overflow: hidden; /* prevents tiny horizontal scroll on mobile */
  box-sizing: border-box;
}

/* IMPORTANT: grid only applies to the INNER markup */
.nf-audit .sby-audit-form-section > .sby-audit-form-grid{
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.4fr);
  gap: 26px;
  align-items: flex-start;
  width: 100%;
  max-width: 100%;
}

/* Left column copy */
.nf-audit .sby-audit-form-details{
  font-size: 13px;
  color: #d1d5db;
  line-height: 1.7;
  min-width: 0; /* allows wrapping inside grid */
}

.nf-audit .sby-audit-form-details .sby-audit-section-heading{
  font-size: clamp(22px, 2.4vw, 34px);
  line-height: 1.12;
  margin: 0 0 10px;
}

.nf-audit .sby-audit-form-details ul{
  list-style: none;
  padding: 0;
  margin: 14px 0 0;
  display: grid;
  gap: 6px;
  font-size: 13px;
}

.nf-audit .sby-audit-form-details li{
  display: flex;
  align-items: flex-start;
  gap: 8px;
  min-width: 0;
}

.nf-audit .sby-audit-form-details li::before{
  content: "✓";
  color: #22c55e;
  font-size: 12px;
  line-height: 1;
  margin-top: 2px;
  flex: 0 0 auto;
}

/* Prevent “letter-by-letter” breaking */
.nf-audit .sby-audit-form-details h2,
.nf-audit .sby-audit-form-details p,
.nf-audit .sby-audit-form-details li{
  word-break: normal;
  overflow-wrap: break-word;
  hyphens: auto;
}

/* Right column wrapper */
.nf-audit .sby-audit-form-wrapper{
  min-width: 0;
  max-width: 100%;
}

/* Optional: your custom inputs if you use them (won’t hurt WPForms) */
.nf-audit .sby-audit-form{
  display: grid;
  gap: 10px;
  min-width: 0;
}

.nf-audit .sby-audit-field-group{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.nf-audit .sby-audit-label{
  font-size: 12px;
  color: #e5e7eb;
  margin-bottom: 4px;
  display: block;
}

.nf-audit .sby-audit-input,
.nf-audit .sby-audit-textarea{
  width: 100%;
  max-width: 100%;
  min-width: 0;
  border-radius: 10px;
  border: 1px solid rgba(55,65,81,.95);
  background: rgba(15,23,42,.95);
  padding: 9px 11px;
  font-size: 13px;
  color: #f9fafb;
  box-sizing: border-box;
  outline: none;
  transition: border .15s ease, box-shadow .15s ease, background .15s ease;
}

.nf-audit .sby-audit-input::placeholder,
.nf-audit .sby-audit-textarea::placeholder{
  color: #6b7280;
}

.nf-audit .sby-audit-input:focus,
.nf-audit .sby-audit-textarea:focus{
  border-color: #38bdf8;
  box-shadow: 0 0 0 1px rgba(56,189,248,.55);
  background: rgba(15,23,42,.98);
}

.nf-audit .sby-audit-textarea{
  min-height: 88px;
  resize: vertical;
}

.nf-audit .sby-audit-form-footer{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 6px;
  font-size: 11px;
  color: #9ca3af;
}

.nf-audit .sby-audit-form-footer strong{
  color: #e5e7eb;
  font-weight: 600;
}

.nf-audit .sby-audit-submit-btn{
  border: none;
  outline: none;
}

/* ---- WPForms containment (prevents overflow) ---- */
.nf-audit .sby-audit-form-wrapper .wpforms-container{
  margin: 0 !important;
  max-width: 100% !important;
}

.nf-audit .sby-audit-form-wrapper .wpforms-form{
  width: 100% !important;
}

.nf-audit .sby-audit-form-wrapper .wpforms-field{
  max-width: 100% !important;
}

/* WPForms “one-half” columns: keep 2-up on desktop, collapse on mobile only */
@media (max-width: 640px){
  .nf-audit .sby-audit-form-wrapper .wpforms-one-half,
  .nf-audit .sby-audit-form-wrapper .wpforms-one-third,
  .nf-audit .sby-audit-form-wrapper .wpforms-two-thirds{
    float: none !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .nf-audit .sby-audit-form-wrapper button[type="submit"],
  .nf-audit .sby-audit-form-wrapper input[type="submit"]{
    width: 100% !important;
    display: block !important;
  }
}

/* ========= RESPONSIVE (form section only) ========= */
/* Stack earlier so iPad/large phones don’t “half-stack” */
@media (max-width: 1024px){
  .nf-audit .sby-audit-form-section > .sby-audit-form-grid{
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .nf-audit .sby-audit-form-section{
    padding: 20px 16px 16px;
    border-radius: 18px;
  }
}

@media (max-width: 640px){
  .nf-audit .sby-audit-field-group{
    grid-template-columns: 1fr;
  }

  .nf-audit .sby-audit-form-footer{
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-85192ca *//* =========================================================
   NF Page — Dashboard Screenshot Grid
========================================================= */

.nf-audit .nf-screens{
  margin-top: 0px;
}

.nf-audit .nf-screens-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.nf-audit .nf-screen{
  background: rgba(15,23,42,.92);
  border: 1px solid rgba(31,41,55,.9);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 18px 44px rgba(0,0,0,.28);
  display: grid;
}

.nf-audit .nf-screen img{
  width: 100%;
  height: auto;
  display: block;
  border-bottom: 1px solid rgba(148,163,184,.18);
}

.nf-audit .nf-screen-cap{
  padding: 14px 16px 16px;
  display: grid;
  gap: 4px;
}

.nf-audit .nf-screen-cap strong{
  color: #fff;
  font-size: 14px;
  font-weight: 900;
}

.nf-audit .nf-screen-cap span{
  color: var(--nf-dim);
  font-size: 13px;
  line-height: 1.6;
}

/* Mobile */
@media (max-width: 960px){
  .nf-audit .nf-screens-grid{
    grid-template-columns: 1fr;
  }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-1a989afb *//* =========================================================
   NF Page — Core Web Vitals Image Section (Constrained)
========================================================= */

.nf-audit .nf-cwv{
  margin-top: 56px;
}

/* Limit visual width */
.nf-audit .nf-cwv-card{
  background: rgba(15,23,42,.92);
  border: 1px solid rgba(31,41,55,.9);
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(0,0,0,.35);

  max-width: 880px;      /* 👈 controls size */
  margin: 0 auto;        /* centers it */
}

.nf-audit .nf-cwv-card img{
  width: 100%;
  height: auto;
  display: block;
}

.nf-audit .nf-cwv-caption{
  padding: 18px 20px 20px;
  display: grid;
  gap: 6px;
}

.nf-audit .nf-cwv-caption strong{
  font-size: 16px;
  font-weight: 900;
  color: #fff;
}

.nf-audit .nf-cwv-caption span{
  font-size: 14px;
  line-height: 1.6;
  color: var(--nf-dim);
}

/* Tablet */
@media (max-width: 1024px){
  .nf-audit .nf-cwv-card{
    max-width: 720px;
  }
}

/* Mobile */
@media (max-width: 768px){
  .nf-audit .nf-cwv-card{
    max-width: 100%;
  }
}

/* =========================================================
   NF Page — Align CWV Header With Constrained Image
========================================================= */

/* Match header width to image width */
.nf-audit .nf-cwv .nf-head{
  max-width: 880px;     /* match .nf-cwv-card */
  margin-left: auto;
  margin-right: auto;
}

/* If you changed card width to 760px, match it here too */
/* Example:
.nf-audit .nf-cwv .nf-head{
  max-width: 760px;
}
*//* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-47a96be *//* =========================================================
   NF Page — Core Web Vitals Image Section
========================================================= */

.nf-audit .nf-cwv{
  margin-top: 56px;
}

.nf-audit .nf-cwv-card{
  background: rgba(15,23,42,.92);
  border: 1px solid rgba(31,41,55,.9);
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(0,0,0,.35);
  display: grid;
}

.nf-audit .nf-cwv-card img{
  width: 100%;
  height: auto;
  display: block;
}

.nf-audit .nf-cwv-caption{
  padding: 18px 20px 20px;
  display: grid;
  gap: 6px;
}

.nf-audit .nf-cwv-caption strong{
  font-size: 16px;
  font-weight: 900;
  color: #fff;
}

.nf-audit .nf-cwv-caption span{
  font-size: 14px;
  line-height: 1.6;
  color: var(--nf-dim);
}

/* Clickable CWV image styling */
.nf-audit .nf-cwv-card a{
  display: block;
  transition: transform .18s ease, filter .18s ease;
}

@media (hover:hover){
  .nf-audit .nf-cwv-card a:hover{
    transform: translateY(-2px);
  }
  .nf-audit .nf-cwv-card a:hover img{
    filter: brightness(1.03);
  }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7d585e2 *//* ===============================
       NFINITE — AUDIT PLUGIN PAGE
       Scoped styles (safe to paste)
    ================================ */

    .nf-audit{
      --nf-bg0:#020308;
      --nf-bg1:#050814;
      --nf-surface:rgba(15,23,42,.78);
      --nf-surface2:rgba(15,23,42,.92);
      --nf-border:rgba(148,163,184,.38);
      --nf-border2:rgba(148,163,184,.56);
      --nf-text:rgba(233,238,243,.92);
      --nf-muted:rgba(159,176,196,.92);
      --nf-dim:rgba(156,163,175,.95);

      --nf-blue:#38BDF8;
      --nf-blue2:#0EA5E9;
      --nf-purple:#A855F7;
      --nf-orange:#F97316;
      --nf-green:#22C55E;

      --nf-radius:20px;
      --nf-shadow:0 24px 60px rgba(0,0,0,.55);

      background:
        radial-gradient(circle at top left, rgba(56,189,248,.16) 0%, transparent 55%),
        radial-gradient(circle at top right, rgba(168,85,247,.12) 0%, transparent 58%),
        linear-gradient(180deg, #0D1426 0%, #0B1020 100%);
      color: var(--nf-text);
      width: 100vw;
      margin-left: calc(50% - 50vw);
      margin-right: calc(50% - 50vw);
      padding: 84px 20px 72px;
      font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
      box-sizing: border-box;
    }

    .nf-wrap{
      width: min(100%, 1120px);
      margin: 0 auto;
    }

    /* ---------- Eyebrow ---------- */
    .nf-eyebrow{
      display:inline-flex;
      align-items:center;
      gap:10px;
      padding: 6px 12px;
      border-radius: 999px;
      font-size: 12px;
      font-weight: 800;
      letter-spacing:.12em;
      text-transform: uppercase;
      color: rgba(229,231,235,.92);
      background: rgba(148,163,184,.14);
      border: 1px solid rgba(148,163,184,.22);
      margin: 0 0 14px;
    }
    .nf-dot{
      width: 9px;
      height: 9px;
      border-radius: 999px;
      background: var(--nf-green);
      box-shadow: 0 0 0 6px rgba(34,197,94,.18);
      flex: 0 0 auto;
    }

    /* ---------- Hero ---------- */
    .nf-hero{
      display:grid;
      grid-template-columns: minmax(0, 1.25fr) minmax(0, .95fr);
      gap: 36px;
      align-items: center;
      margin-bottom: 58px;
    }

    .nf-hero h1{
      margin: 0 0 12px;
      font-size: clamp(34px, 4.8vw, 52px);
      line-height: 1.06;
      font-weight: 950;
      letter-spacing: -0.03em;
      color: #fff;
    }

    .nf-gradient{
      background: linear-gradient(120deg, var(--nf-blue), var(--nf-purple), var(--nf-orange));
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
    }

    .nf-lead{
      margin: 0 0 16px;
      font-size: 16px;
      line-height: 1.65;
      color: rgba(229,231,235,.92);
      max-width: 640px;
    }

    .nf-sub{
      margin: 0 0 22px;
      font-size: 14px;
      line-height: 1.65;
      color: var(--nf-dim);
      max-width: 640px;
    }

    .nf-cta-row{
      display:flex;
      flex-wrap: wrap;
      gap: 12px;
      margin: 0 0 16px;
    }

    .nf-btn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:10px;
      padding: 12px 18px;
      border-radius: 999px;
      font-size: 14px;
      font-weight: 800;
      text-decoration: none;
      cursor: pointer;
      border: 1px solid transparent;
      transition: transform .14s ease, filter .14s ease, background .16s ease, border-color .16s ease;
      white-space: nowrap;
    }

    .nf-btn.primary{
      background: linear-gradient(135deg, var(--nf-blue), var(--nf-blue2));
      color: #071226;
      box-shadow: 0 18px 35px rgba(8,47,73,.55);
    }
    .nf-btn.primary:hover{ transform: translateY(-1px); filter: brightness(.98); }

    .nf-btn.ghost{
      background: rgba(15,23,42,.70);
      border-color: rgba(148,163,184,.45);
      color: rgba(229,231,235,.95);
    }
    .nf-btn.ghost:hover{ transform: translateY(-1px); background: rgba(15,23,42,.92); }

    .nf-meta{
      display:flex;
      flex-wrap: wrap;
      gap: 16px;
      color: var(--nf-dim);
      font-size: 12px;
      margin-top: 4px;
    }
    .nf-meta strong{ color: rgba(229,231,235,.95); font-weight: 800; }

    /* ---------- Hero Card ---------- */
    .nf-card{
      background:
        radial-gradient(circle at top, rgba(56,189,248,.18), transparent 60%),
        rgba(2,6,23,.92);
      border: 1px solid var(--nf-border);
      border-radius: var(--nf-radius);
      box-shadow: var(--nf-shadow);
      padding: 18px 18px 16px;
      position: relative;
      overflow: hidden;
    }
    .nf-card:before{
      content:"";
      position:absolute;
      inset:-45%;
      background: radial-gradient(circle at top right, rgba(168,85,247,.20), transparent 58%);
      opacity:.8;
      pointer-events:none;
    }
    .nf-card > *{ position:relative; z-index:1; }

    .nf-card-head{
      display:flex;
      justify-content: space-between;
      gap: 12px;
      align-items: center;
      margin-bottom: 14px;
    }
    .nf-card-title{
      display:flex;
      flex-direction: column;
      gap: 2px;
    }
    .nf-card-title strong{
      color:#fff;
      font-size: 14px;
      letter-spacing:.02em;
    }
    .nf-card-title span{
      color: var(--nf-dim);
      font-size: 12px;
    }
    .nf-pill{
      display:inline-flex;
      gap: 8px;
      align-items:center;
      padding: 4px 10px;
      border-radius: 999px;
      font-size: 11px;
      border: 1px solid rgba(148,163,184,.55);
      color: rgba(229,231,235,.92);
      background: rgba(15,23,42,.72);
      white-space: nowrap;
    }
    .nf-pill i{
      width: 7px;
      height: 7px;
      border-radius: 999px;
      background: var(--nf-green);
      display:inline-block;
      flex: 0 0 auto;
    }

    .nf-score-row{
      display:flex;
      gap: 16px;
      align-items: center;
      margin-bottom: 12px;
    }

    .nf-score{
      width: 96px;
      height: 96px;
      border-radius: 999px;
      background: conic-gradient(from 230deg, var(--nf-orange) 0 40%, #eab308 40% 70%, var(--nf-green) 70% 100%);
      display:flex;
      align-items:center;
      justify-content:center;
      box-shadow: 0 0 0 10px rgba(15,23,42,.92);
      flex: 0 0 auto;
    }

    .nf-score-inner{
      width: 78px;
      height: 78px;
      border-radius: 999px;
      background: rgba(2,6,23,.98);
      border: 1px solid rgba(148,163,184,.25);
      display:flex;
      align-items:center;
      justify-content:center;
      flex-direction: column;
      text-align: center;
    }
    .nf-score-inner b{
      font-size: 26px;
      line-height: 1;
      color: rgba(229,231,235,.98);
      font-weight: 950;
    }
    .nf-score-inner span{
      margin-top: 3px;
      font-size: 10px;
      letter-spacing:.14em;
      text-transform: uppercase;
      color: var(--nf-dim);
    }

    .nf-score-copy{
      font-size: 13px;
      line-height: 1.55;
      color: rgba(229,231,235,.88);
    }

    .nf-metrics{
      display:grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
      margin-top: 10px;
    }
    .nf-metric{
      background: rgba(15,23,42,.88);
      border: 1px solid rgba(31,41,55,.9);
      border-radius: 12px;
      padding: 10px 12px;
      display:flex;
      align-items:center;
      justify-content: space-between;
      gap: 10px;
      font-size: 12px;
    }
    .nf-metric span{ color: var(--nf-dim); }
    .nf-metric b{ color: rgba(229,231,235,.95); font-weight: 850; }

    .nf-card-foot{
      margin-top: 10px;
      color: var(--nf-dim);
      font-size: 11px;
      display:flex;
      justify-content: space-between;
      gap: 10px;
      flex-wrap: wrap;
    }

    /* ---------- Sections ---------- */
    .nf-section{ margin-top: 56px; }
    .nf-head{
      margin: 0 0 18px;
      display:flex;
      flex-direction: column;
      gap: 6px;
    }
    .nf-head .k{
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: .18em;
      color: var(--nf-muted);
    }
    .nf-head h2{
      margin: 0;
      color: #fff;
      font-size: 24px;
      font-weight: 900;
      letter-spacing: -0.02em;
    }
    .nf-head p{
      margin: 0;
      color: var(--nf-muted);
      font-size: 15px;
      line-height: 1.7;
      max-width: 760px;
    }

    /* ---------- Feature Grid ---------- */
    .nf-grid{
      display:grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 18px;
    }
    .nf-item{
      background: rgba(15,23,42,.90);
      border: 1px solid rgba(31,41,55,.9);
      border-radius: 16px;
      padding: 16px 16px 14px;
      box-shadow: 0 8px 24px rgba(0,0,0,.28);
      display:grid;
      gap: 8px;
      min-height: 100%;
    }
    .nf-item h3{
      margin: 0;
      font-size: 15px;
      font-weight: 850;
      color: rgba(255,255,255,.96);
    }
    .nf-item p{
      margin: 0;
      font-size: 13px;
      line-height: 1.65;
      color: var(--nf-dim);
    }
    .nf-list{
      margin: 8px 0 0;
      padding: 0;
      list-style: none;
      display:grid;
      gap: 6px;
      color: rgba(233,238,243,.92);
      font-size: 13px;
    }
    .nf-list li{
      display:flex;
      gap: 8px;
      align-items:flex-start;
    }
    .nf-list li:before{
      content:"✓";
      color: var(--nf-green);
      margin-top: -1px;
      font-size: 12px;
      line-height: 1;
    }

    /* ---------- How it Works ---------- */
    .nf-steps{
      display:grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 18px;
      margin-top: 18px;
    }
    .nf-step{
      background: rgba(15,23,42,.92);
      border: 1px solid rgba(31,41,55,.9);
      border-radius: 18px;
      padding: 16px 16px 14px;
      display:grid;
      gap: 8px;
      position: relative;
      overflow:hidden;
    }
    .nf-num{
      width: 28px;
      height: 28px;
      border-radius: 999px;
      display:flex;
      align-items:center;
      justify-content:center;
      background: rgba(15,23,42,.95);
      border: 1px solid rgba(148,163,184,.65);
      font-weight: 850;
      color: rgba(233,238,243,.96);
      font-size: 12px;
    }
    .nf-step h3{
      margin: 0;
      font-size: 14px;
      font-weight: 850;
      color: rgba(255,255,255,.96);
    }
    .nf-step p{
      margin: 0;
      font-size: 13px;
      line-height: 1.65;
      color: var(--nf-dim);
    }

    /* ---------- Download Block ---------- */
    .nf-download{
      margin-top: 22px;
      background:
        radial-gradient(circle at top left, rgba(56,189,248,.10), rgba(15,23,42,.95));
      border: 1px solid rgba(148,163,184,.55);
      border-radius: 18px;
      padding: 18px 18px 16px;
      box-shadow: 0 18px 44px rgba(0,0,0,.35);
      display:grid;
      gap: 10px;
    }
    .nf-download-row{
      display:flex;
      flex-wrap: wrap;
      gap: 12px;
      align-items: center;
      justify-content: space-between;
    }
    .nf-download small{
      color: var(--nf-dim);
      font-size: 12px;
      line-height: 1.6;
    }
    .nf-code{
      background: rgba(2,6,23,.9);
      border: 1px solid rgba(148,163,184,.28);
      border-radius: 14px;
      padding: 12px 12px;
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
      font-size: 12px;
      color: rgba(233,238,243,.92);
      overflow:auto;
      white-space: nowrap;
    }
    .nf-code b{ color: rgba(255,255,255,.95); }

    /* ---------- FAQ ---------- */
    .nf-faq{
      border-top: 1px solid rgba(31,41,55,.9);
      padding-top: 28px;
      margin-top: 52px;
    }
    .nf-faq-grid{
      display:grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 18px 26px;
      margin-top: 14px;
    }
    .nf-faq-item h3{
      margin: 0 0 6px;
      font-size: 14px;
      font-weight: 850;
      color: rgba(255,255,255,.95);
    }
    .nf-faq-item p{
      margin: 0;
      font-size: 13px;
      line-height: 1.7;
      color: var(--nf-dim);
    }

    /* ---------- Footer CTA ---------- */
    .nf-footer{
      margin-top: 24px;
      border-top: 1px solid rgba(31,41,55,.9);
      padding-top: 16px;
      display:flex;
      flex-wrap: wrap;
      gap: 12px;
      align-items: center;
      justify-content: space-between;
      color: var(--nf-dim);
      font-size: 12px;
    }
    .nf-footer strong{ color: rgba(229,231,235,.95); }

    /* ---------- A11y focus ---------- */
    .nf-audit a:focus-visible{
      outline: 2px solid var(--nf-blue);
      outline-offset: 3px;
      border-radius: 12px;
    }

    /* ---------- Responsive ---------- */
    @media (max-width: 960px){
      .nf-hero{ grid-template-columns: 1fr; }
      .nf-grid{ grid-template-columns: 1fr; }
      .nf-steps{ grid-template-columns: 1fr; }
      .nf-card{ max-width: 520px; margin-inline: auto; }
      .nf-metrics{ grid-template-columns: 1fr; }
      .nf-faq-grid{ grid-template-columns: 1fr; }
    }
    @media (max-width: 640px){
      .nf-audit{ padding: 64px 16px 54px; }
      .nf-cta-row{ flex-direction: column; align-items: stretch; }
      .nf-btn{ width: 100%; }
      .nf-meta{ flex-direction: column; gap: 10px; }
      .nf-score-row{ flex-direction: column; align-items: flex-start; }
      .nf-score{ width: 92px; height: 92px; }
    }
    
    /* =========================================================
   NF Page — FORCE MOBILE/TABLET STACKING (SAFE PATCH)
   Paste AFTER the NF block
========================================================= */

/* 1) Force .nf-hero to become 1 column sooner (Elementor tablets / some mobiles) */
@media (max-width: 1024px){
  .nf-audit .nf-hero{
    grid-template-columns: 1fr !important;
  }
}

/* 2) Force the audit form grid to stack no matter what */
@media (max-width: 1024px){
  .nf-audit .sby-audit-form-grid{
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 18px !important;
    align-items: stretch !important;
  }

  .nf-audit .sby-audit-form-details,
  .nf-audit .sby-audit-form-grid .wpforms-container{
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
}

/* 3) WPForms “one-half” columns must collapse on phones */
@media (max-width: 767px){
  .nf-audit .wpforms-one-half,
  .nf-audit .wpforms-one-third,
  .nf-audit .wpforms-two-thirds{
    float: none !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .nf-audit .wpforms-container,
  .nf-audit .wpforms-form{
    width: 100% !important;
    max-width: 100% !important;
  }
}
/* =========================================================
   NF Page — FORCE MOBILE/TABLET STACKING (SAFE PATCH)
   Paste AFTER the NF block
========================================================= */

/* 1) Force .nf-hero to become 1 column sooner (Elementor tablets / some mobiles) */
@media (max-width: 1024px){
  .nf-audit .nf-hero{
    grid-template-columns: 1fr !important;
  }
}

/* 2) Force the audit form grid to stack no matter what */
@media (max-width: 1024px){
  .nf-audit .sby-audit-form-grid{
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 18px !important;
    align-items: stretch !important;
  }

  .nf-audit .sby-audit-form-details,
  .nf-audit .sby-audit-form-grid .wpforms-container{
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
}

/* 3) WPForms “one-half” columns must collapse on phones */
@media (max-width: 767px){
  .nf-audit .wpforms-one-half,
  .nf-audit .wpforms-one-third,
  .nf-audit .wpforms-two-thirds{
    float: none !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .nf-audit .wpforms-container,
  .nf-audit .wpforms-form{
    width: 100% !important;
    max-width: 100% !important;
  }
}
/* =========================================================
   Nfinite Audit Plugin — FORM + WPForms MOBILE FIX (PHONE)
   Paste-safe: keeps your styling, forces proper stacking
========================================================= */

/* Safety: prevent grid children from forcing 2-col on narrow devices */
.nf-audit .sby-audit-form-grid,
.nf-audit .sby-audit-form-details,
.nf-audit .sby-audit-form-wrapper{
  min-width: 0 !important;
  max-width: 100% !important;
}

/* Force stack on real phones (covers devices where 900px media query may not trigger as expected) */
@media (max-width: 1024px){
  .nf-audit .sby-audit-form-grid{
    display: flex !important;
    flex-direction: column !important;
    gap: 18px !important;
    align-items: stretch !important;
  }
  .nf-audit .sby-audit-form-details,
  .nf-audit .sby-audit-form-wrapper{
    width: 100% !important;
  }
}

/* WPForms: disable float/half columns on mobile */
@media (max-width: 768px){
  .nf-audit .sby-audit-form-wrapper .wpforms-one-half,
  .nf-audit .sby-audit-form-wrapper .wpforms-one-third,
  .nf-audit .sby-audit-form-wrapper .wpforms-two-thirds{
    float: none !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .nf-audit .sby-audit-form-wrapper button[type="submit"],
  .nf-audit .sby-audit-form-wrapper input[type="submit"]{
    width: 100% !important;
    display: block !important;
  }
}

/* =========================================================
   NF Page — Image Gallery (Screenshots + Hero Image)
   Paste AFTER your existing NF CSS
========================================================= */

.nf-audit .nf-media{
  margin-top: 56px;
}

.nf-audit .nf-media-grid{
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 18px;
}

/* Card */
.nf-audit .nf-shot{
  grid-column: span 6;
  background: rgba(15,23,42,.92);
  border: 1px solid rgba(31,41,55,.9);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 18px 44px rgba(0,0,0,.28);
}

.nf-audit .nf-shot--wide{
  grid-column: span 12;
}

.nf-audit .nf-shot a{
  display: block;
  text-decoration: none;
  color: inherit;
}

.nf-audit .nf-shot figure{
  margin: 0;
}

.nf-audit .nf-shot img{
  display: block;
  width: 100%;
  height: auto;
  background: rgba(2,6,23,.85);
  transform: translateZ(0);
}

/* Make screenshots feel crisp and consistent */
.nf-audit .nf-shot img{
  border-bottom: 1px solid rgba(148,163,184,.20);
}

.nf-audit .nf-cap{
  padding: 12px 14px 14px;
  display: grid;
  gap: 4px;
}

.nf-audit .nf-cap strong{
  color: rgba(255,255,255,.95);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .01em;
}

.nf-audit .nf-cap span{
  color: var(--nf-dim);
  font-size: 12px;
  line-height: 1.6;
}

/* Subtle hover */
@media (hover:hover){
  .nf-audit .nf-shot a:hover img{
    filter: brightness(1.02);
  }
  .nf-audit .nf-shot a:hover{
    transform: translateY(-1px);
  }
  .nf-audit .nf-shot a{
    transition: transform .14s ease, filter .14s ease;
  }
}

/* Responsive */
@media (max-width: 960px){
  .nf-audit .nf-shot{ grid-column: span 12; }
}

/* =========================================================
   NF — COPY ENHANCEMENT PATCH
   Improves heading contrast + readability
   Paste AFTER existing NF CSS
========================================================= */

/* -----------------------------
   SECTION HEADINGS
------------------------------ */

.nf-audit .nf-head h2{
  position: relative;
  font-size: 28px;
  font-weight: 950;
  letter-spacing: -0.02em;
  color: #ffffff;
  margin-bottom: 14px;
  padding-bottom: 12px;
}

/* Gradient accent line */
.nf-audit .nf-head h2::after{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  width:60px;
  height:3px;
  border-radius:999px;
  background: linear-gradient(90deg, var(--nf-blue), var(--nf-purple));
}

/* Section kicker label stronger */
.nf-audit .nf-head .k{
  font-size:12px;
  letter-spacing:.22em;
  color: rgba(159,176,196,.75);
}

/* -----------------------------
   BODY PARAGRAPHS
------------------------------ */

.nf-audit p{
  font-size:15px;
  line-height:1.75;
  color: rgba(226,232,240,.82); /* slightly softer than headings */
}

/* Section intro paragraph slightly stronger */
.nf-audit .nf-head p{
  font-size:16px;
  color: rgba(226,232,240,.88);
  margin-top:4px;
}

/* -----------------------------
   CARD HEADINGS
------------------------------ */

.nf-audit .nf-item h3,
.nf-audit .nf-step h3,
.nf-audit .nf-faq-item h3{
  font-size:16px;
  font-weight:900;
  color:#ffffff;
  margin-bottom:6px;
}

/* Slight spacing improvement */
.nf-audit .nf-item p,
.nf-audit .nf-step p,
.nf-audit .nf-faq-item p{
  margin-top:4px;
}

/* -----------------------------
   LIST IMPROVEMENTS
------------------------------ */

.nf-audit .nf-list{
  margin-top:10px;
  gap:8px;
}

.nf-audit .nf-list li{
  line-height:1.6;
}/* End custom CSS */