*{box-sizing:border-box}
    

:root{
      --bg0:#06070a;
      --bg1:#0a0c12;

      --text:rgba(255,255,255,.92);
      --muted:rgba(255,255,255,.72);
      --muted2:rgba(255,255,255,.58);

      --accent:#c61b2e;      /* deep red */
      --accent2:#d0a85b;     /* warm gold */
      --good:#5bd0a8;

      --line:rgba(255,255,255,.10);
      --shadow:0 18px 60px rgba(0,0,0,.55);
      --shadow2:0 12px 40px rgba(0,0,0,.45);

      --radius:18px;
      --max:1180px;
      --pad: clamp(18px, 3vw, 28px);
    }

body{
      margin:0;
      font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
      color: var(--text);
      background:
        radial-gradient(1000px 560px at 12% 10%, rgba(198,27,46,.20), transparent 60%),
        radial-gradient(900px 520px at 90% 18%, rgba(208,168,91,.12), transparent 58%),
        radial-gradient(700px 460px at 62% 88%, rgba(91,208,168,.08), transparent 62%),
        linear-gradient(180deg, var(--bg0), var(--bg1) 60%, #070812);
      overflow-x:hidden;
    }

body:before{
      content:"";
      position:fixed; inset:0;
      background-image:
        linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
      background-size: 46px 46px;
      opacity:.09;
      pointer-events:none;
      mix-blend-mode: overlay;
      z-index:0;
    }

.aura{
      position:fixed;
      width: 520px; height: 520px;
      border-radius: 50%;
      transform: translate(-50%, -50%);
      pointer-events:none;
      background: radial-gradient(circle at center, rgba(198,27,46,.16), rgba(208,168,91,.10), transparent 65%);
      filter: blur(10px);
      opacity:0;
      transition: opacity .25s ease;
      z-index:0;
    }

/* Anti-banding noise (subtle) */
body:after{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.22'/%3E%3C/svg%3E");
  opacity:.06;
  mix-blend-mode:overlay;
  z-index:0;
}
/* Ensure overlays stay behind content */
body{position:relative;isolation:isolate;}
.header,.wrap,main,section,footer{position:relative;z-index:1;}


html,body{height:100%}
a{color:inherit; text-decoration:none}
    .container{max-width:var(--max); margin:0 auto; padding:0 22px}
    .topbar{
      position:sticky; top:0; z-index:50;
      background:rgba(6,7,10,.78);
      backdrop-filter: blur(10px);
      border-bottom:1px solid rgba(255,255,255,.07);
    }
    .topbar__inner{
      display:flex; align-items:center; justify-content:space-between;
      gap:14px; padding:10px 0;
      font-size:13px;
    }
    .pill{
      display:inline-flex; align-items:center; gap:8px;
      padding:6px 10px; border-radius:999px;
      background:rgba(255,255,255,.06);
      border:1px solid rgba(255,255,255,.08);
      box-shadow: 0 10px 30px rgba(0,0,0,.25);
      white-space:nowrap;
    }
    .dot{opacity:.35; padding:0 8px}
    .topbar__right{display:flex; align-items:center; gap:10px; flex-wrap:wrap; justify-content:flex-end}
    .topbar__link{
      opacity:.88;
      padding:6px 8px; border-radius:10px;
      transition: transform .18s ease, background .18s ease, opacity .18s ease, color .18s ease;
    }
    .topbar__link:hover{
      background:rgba(198,27,46,.14);
      border:1px solid rgba(198,27,46,.22);
      color:rgba(255,255,255,.96);
      transform:translateY(-1px);
      opacity:1;
    }

    header{
      position:sticky; top:44px; z-index:45;
      background:rgba(6,7,10,.78);
      backdrop-filter: blur(10px);
      border-bottom:1px solid rgba(255,255,255,.07);
    }
    .header__inner{
      display:flex; align-items:center; justify-content:space-between;
      padding:14px 0; gap:16px;
    }
    .brand{display:flex; align-items:center; gap:12px}
    .mark{
      width:34px; height:34px; border-radius:12px;
      background:
        radial-gradient(14px 14px at 30% 30%, rgba(255,255,255,.22), transparent 55%),
        linear-gradient(135deg, rgba(198,27,46,.95), rgba(208,168,91,.85));
      box-shadow: 0 14px 40px rgba(198,27,46,.22);
      border:1px solid rgba(255,255,255,.12);
    }
    .brand__name{font-weight:900; letter-spacing:-.02em}
    .brand__tag{font-size:12px; opacity:.7}


    /* LOTTIE LOGO (CANONICAL) */
    .brandLogo{display:flex;flex-direction:column;align-items:center;gap:0}
    .lottieLogo{width:225px;height:70px;display:block;pointer-events:none}
    /* Raise tagline closer to logo (safe) */
    
    @media (max-width:560px){
      .lottieLogo{width:170px;height:55px}
      
    }

    nav.nav{display:flex; gap:18px; align-items:center}
    nav.nav a{
      font-size:14px; opacity:.82;
      padding:10px 10px; border-radius:12px;
      transition: background .18s ease, opacity .18s ease, transform .18s ease;
      border:1px solid transparent;
    }
    nav.nav a:hover{
      opacity:1;
      background:rgba(255,255,255,.05);
      border-color:rgba(255,255,255,.08);
      transform:translateY(-1px);
    }
    .ctaRow{display:flex; gap:10px; align-items:center}
    .btn{
      display:inline-flex; align-items:center; justify-content:center;
      gap:10px;
      padding:12px 14px;
      border-radius:14px;
      border:1px solid rgba(255,255,255,.10);
      background:rgba(255,255,255,.06);
      color:rgba(255,255,255,.92);
      font-weight:800;
      letter-spacing:-.01em;
      cursor:pointer;
      transition: transform .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease;
      user-select:none;
      white-space:nowrap;
    }
    .btn:hover{transform:translateY(-1px); border-color:rgba(255,255,255,.18); box-shadow:0 16px 55px rgba(0,0,0,.45)}
    .btn--primary{
      background:linear-gradient(135deg, rgba(198,27,46,.98), rgba(208,168,91,.88));
      border-color:rgba(255,255,255,.14);
      box-shadow: 0 18px 60px rgba(198,27,46,.20);
    }
    .btn--primary:hover{box-shadow: 0 20px 70px rgba(198,27,46,.26)}
    .btn--ghost{background:transparent}
    .burger{
      display:none;
      width:44px;height:44px;border-radius:14px;
      border:1px solid rgba(255,255,255,.12);
      background:rgba(255,255,255,.05);
      align-items:center; justify-content:center;
      gap:5px; cursor:pointer;
    }
    .burger span{display:block; width:18px; height:2px; background:rgba(255,255,255,.85); border-radius:2px}
    .mobileNav{
      display:none;
      padding:0 0 14px 0;
    }
    .mobileNav a{
      display:block;
      padding:12px 10px;
      border-radius:14px;
      border:1px solid rgba(255,255,255,.08);
      background:rgba(255,255,255,.04);
      margin-top:10px;
    }
    .mobileNav a:hover{border-color:rgba(255,255,255,.16); background:rgba(198,27,46,.10)}
    @media (max-width: 920px){
      nav.nav{display:none}
      .burger{display:inline-flex}
    }

    /* hero */
    .hero{
      position:relative;
      padding:66px 0 40px;
    }
    .hero__inner{
      display:grid;
      grid-template-columns: 1.05fr .95fr;
      gap:34px;
      align-items:center;
    }
    .hero h1{
      margin:0;
      font-size: clamp(30px, 3.4vw, 52px);
      line-height:1.05;
      letter-spacing:-.04em;
    }
    .lead{margin:14px 0 0; font-size:18px; line-height:1.5; color:var(--muted); max-width:62ch}
    .kicker{
      margin-top:14px;
      color:var(--muted2);
      font-size:13px;
      max-width:78ch;
    }
    .hero__ctas{margin-top:18px; display:flex; gap:12px; flex-wrap:wrap}
    .trustRow{display:flex; gap:12px; margin-top:22px; flex-wrap:wrap}
    .trust{
      flex:0 0 auto;
      min-width:160px;
      padding:12px 12px;
      border-radius:16px;
      border:1px solid rgba(255,255,255,.10);
      background:rgba(255,255,255,.04);
      box-shadow:0 18px 50px rgba(0,0,0,.35);
    }
    .trust .t{font-size:12px; opacity:.74}
    .trust .v{font-weight:900; letter-spacing:-.02em; margin-top:4px}
    .fine{margin-top:12px; font-size:12px; opacity:.68; max-width:90ch}
    .mock{
      border-radius:var(--radius);
      border:1px solid rgba(255,255,255,.10);
      background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
      box-shadow: var(--shadow);
      overflow:hidden;
      transform: translateZ(0);
    }
    .mock__bar{
      display:flex; align-items:center; gap:7px;
      padding:10px 12px;
      border-bottom:1px solid rgba(255,255,255,.10);
      background:rgba(0,0,0,.25);
      font-size:12px; opacity:.85;
    }
    .mock__dot{width:10px;height:10px;border-radius:999px;background:rgba(255,255,255,.22)}
    .mock__url{margin-left:8px; opacity:.75}
    .mock__img{
      display:block;
      width:100%;
      height:auto;
      transform: translateY(0);
      will-change: transform;
      filter:saturate(1.03) contrast(1.03);
    }

    @media (max-width: 920px){
      .hero__inner{grid-template-columns:1fr}
      .trust{min-width:140px}
    }

    /* sections */
    .section{padding:64px 0}
    .sectionHead{display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:22px}
    .sectionHead h2{margin:0; font-size:28px; letter-spacing:-.02em}
    .sectionHead p{margin:0; color:var(--muted); max-width:70ch}
    .grid3{display:grid; grid-template-columns:repeat(3,1fr); gap:14px}
    .grid2{display:grid; grid-template-columns:repeat(2,1fr); gap:14px}
    @media (max-width: 920px){
      .grid3,.grid2{grid-template-columns:1fr}
      .sectionHead{flex-direction:column; align-items:flex-start}
    }
    .card{
      border-radius:var(--radius);
      border:1px solid rgba(255,255,255,.10);
      background:rgba(255,255,255,.04);
      box-shadow:0 18px 55px rgba(0,0,0,.35);
      padding:18px;
      position:relative;
      overflow:hidden;
      transition: transform .2s ease, border-color .2s ease, background .2s ease;
    }
    .card:hover{
      transform: translateY(-2px);
      border-color: rgba(198,27,46,.28);
      background: rgba(198,27,46,.06);
    }
    .card h3{margin:0 0 8px; font-size:16px}
    .card p{margin:0; color:var(--muted); line-height:1.5}
    .tag{
      display:inline-flex; align-items:center; gap:8px;
      font-size:12px;
      padding:6px 10px;
      border-radius:999px;
      border:1px solid rgba(255,255,255,.10);
      background:rgba(0,0,0,.22);
      opacity:.9;
      margin-bottom:10px;
    }
    .tag .spark{width:7px; height:7px; border-radius:99px; background:var(--accent2); box-shadow:0 0 18px rgba(208,168,91,.40)}
    .muted{color:var(--muted)}
    .small{font-size:13px}
    .hr{height:1px; background:rgba(255,255,255,.08); margin:18px 0}

    /* cost truth compare */
    .compare{
      display:grid;
      grid-template-columns: 1fr 1fr;
      gap:14px;
      align-items:stretch;
    }
    .compareCard{
      border-radius:var(--radius);
      border:1px solid rgba(255,255,255,.10);
      background:rgba(255,255,255,.04);
      padding:18px;
      box-shadow:0 18px 55px rgba(0,0,0,.35);
    }
    .compareCard--best{
      background:linear-gradient(180deg, rgba(198,27,46,.10), rgba(255,255,255,.03));
      border-color:rgba(198,27,46,.30);
      position:relative;
    }
    .badge{
      position:absolute; top:14px; right:14px;
      padding:6px 10px;
      border-radius:999px;
      border:1px solid rgba(208,168,91,.35);
      background:rgba(208,168,91,.12);
      color:rgba(255,255,255,.92);
      font-size:12px;
      font-weight:900;
    }
    .cmpTitle{font-weight:900; letter-spacing:-.02em; font-size:16px}
    ul.list{margin:10px 0 0; padding-left:18px; color:var(--muted)}
    ul.list li{margin:8px 0}
    .priceLine{margin-top:12px; font-weight:900; font-size:20px; letter-spacing:-.02em}
    .priceSub{margin-top:6px; color:var(--muted); font-size:13px}

    @media (max-width: 920px){
      .compare{grid-template-columns:1fr}
    }

    /* faq */
    .faq{border-radius:var(--radius); border:1px solid rgba(255,255,255,.10); background:rgba(255,255,255,.03); overflow:hidden}
    details{border-top:1px solid rgba(255,255,255,.08)}
    details:first-child{border-top:none}
    summary{
      list-style:none;
      cursor:pointer;
      padding:16px 18px;
      font-weight:800;
      display:flex; align-items:center; justify-content:space-between;
      gap:14px;
    }
    summary::-webkit-details-marker{display:none}
    summary .q{opacity:.92}
    summary .icon{
      width:26px;height:26px;border-radius:10px;
      border:1px solid rgba(255,255,255,.12);
      background:rgba(255,255,255,.04);
      display:flex; align-items:center; justify-content:center;
      transition: transform .18s ease, background .18s ease, border-color .18s ease;
    }
    details[open] summary .icon{
      transform: rotate(45deg);
      background:rgba(198,27,46,.12);
      border-color:rgba(198,27,46,.26);
    }
    .answer{padding:0 18px 18px; color:var(--muted); line-height:1.55}

    /* contact */
    .contactWrap{
      display:grid;
      grid-template-columns: 1.1fr .9fr;
      gap:14px;
      align-items:stretch;
    }
    @media (max-width: 920px){ .contactWrap{grid-template-columns:1fr} }
    label{display:block; font-size:12px; opacity:.75; margin:12px 0 6px}
    input, textarea{
      width:100%;
      border-radius:14px;
      border:1px solid rgba(255,255,255,.10);
      background:rgba(0,0,0,.22);
      color:rgba(255,255,255,.92);
      padding:12px 12px;
      font-family:inherit;
      outline:none;
      transition: border-color .18s ease, box-shadow .18s ease;
    }
    input:focus, textarea:focus{border-color:rgba(198,27,46,.35); box-shadow:0 0 0 4px rgba(198,27,46,.12)}
    textarea{min-height:110px; resize:vertical}

    footer{
      padding:32px 0 42px;
      border-top:1px solid rgba(255,255,255,.08);
      color:rgba(255,255,255,.70);
      font-size:12px;
    }
    .footRow{display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap}
    .footLinks{display:flex; gap:12px; flex-wrap:wrap; opacity:.85}
    .footLinks a{padding:6px 8px; border-radius:10px; border:1px solid transparent}
    .footLinks a:hover{border-color:rgba(255,255,255,.10); background:rgba(255,255,255,.04)}

    /* subtle reveal on scroll */
    .reveal{transform: translateY(14px); transition: opacity .55s ease, transform .55s ease}
    .reveal.on{opacity:1; transform: translateY(0)}
    /* mouse aura */
.layer{position:relative; z-index:1}
  


/* --- DEMO FORM (MASTER) : scoped to #book so nothing else changes --- */
#book .grid2{ display:grid; grid-template-columns: 1.08fr .92fr; gap:16px; align-items:start; }
@media (max-width: 980px){ #book .grid2{ grid-template-columns:1fr; } }

#book .card{
  border-radius: var(--radius, 18px);
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  padding: 16px;
  position:relative;
  overflow:hidden;
}
#book .card:before{
  content:"";
  position:absolute; inset:-2px;
  background:
    radial-gradient(260px 160px at 20% 20%, rgba(198,27,46,.12), transparent 60%),
    radial-gradient(280px 170px at 80% 30%, rgba(208,168,91,.10), transparent 60%);
  opacity:0;
  transition: opacity .25s ease;
  pointer-events:none;
}
#book .card:hover:before{ opacity:1; }

#book .label{
  display:flex; align-items:center; height:22px;
  color: rgba(255,255,255,.82);
  font-weight: 900;
  font-size: 12px;
  letter-spacing: .25px;
  text-transform: uppercase;
  line-height: 1;
}
#book input, #book textarea, #book select{
  width:100%;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(10,12,18,.45);
  color: rgba(255,255,255,.92);
  padding: 12px 12px;
  outline:none;
}
#book textarea{ min-height:120px; resize:vertical; }
#book input::placeholder, #book textarea::placeholder{ color: rgba(255,255,255,.45); }
#book .row{ display:grid; grid-template-columns: 1fr 1fr; gap:12px; }
@media (max-width:560px){ #book .row{ grid-template-columns: 1fr; } }

#book #demoForm{ display:flex; flex-direction:column; gap:10px; margin-top:10px; }
#book .field{ display:flex; flex-direction:column; gap:4px; }
#book .ctaRow{ display:flex; gap:10px; flex-wrap:wrap; margin-top:14px; align-items:center; }
#book .tiny{ color: rgba(255,255,255,.58); font-size: 13px; line-height:1.55; }

#book .kicker{
  display:inline-flex; align-items:center; gap:10px;
  color: rgba(255,255,255,.86);
  font-weight: 900;
  font-size: 12px;
  letter-spacing: .22px;
  text-transform: uppercase;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  margin-bottom: 10px;
}
#book .kdot{
  width:8px; height:8px; border-radius:999px;
  background: rgba(208,168,91,.90);
  box-shadow: 0 0 0 6px rgba(208,168,91,.14);
  display:inline-block;
}
#book .h2{ font-size:22px; font-weight:900; letter-spacing:-.2px; margin:0 0 10px; }
#book ul.clean{ margin:0; padding-left:18px; color: rgba(255,255,255,.72); line-height:1.65; }
#book ul.clean li{ margin: 8px 0; }
#book .note{ margin-top: 12px; color: rgba(255,255,255,.58); font-size:13px; line-height:1.55; }

#book .quote{
  position:relative;
  padding: 18px;
  border-radius: var(--radius, 18px);
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.045);
  overflow:hidden;
}
#book .quote:before{
  content:"";
  position:absolute; inset:-2px;
  background: radial-gradient(420px 220px at 20% 10%, rgba(198,27,46,.13), transparent 60%);
  opacity:.85;
  pointer-events:none;
}
#book .quote > *{position:relative}
#book .quote p{ margin:0; color: rgba(255,255,255,.86); line-height:1.65; }
#book .quote .who{ margin-top:10px; color: rgba(255,255,255,.58); font-weight:800; font-size:13px; }

/* toast */
.toast{
  position: fixed;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%);
  background: rgba(10,12,18,.78);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 999px;
  padding: 10px 14px;
  color: rgba(255,255,255,.90);
  box-shadow: 0 18px 60px rgba(0,0,0,.55);
  display:none;
  z-index: 99;
  font-weight: 900;
  font-size: 13px;
  backdrop-filter: blur(14px);
}

/* ===== HEADER/TOPBAR — MATCH SERVICES (LOCKED) ===== */
.topbar{
  position:sticky; top:0; z-index:50;
  background: rgba(6,7,10,.55);
  border-bottom: 1px solid rgba(255,255,255,.08);
  backdrop-filter: blur(14px);
}
.topbar__inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:14px; padding: 10px 0;
  color: rgba(255,255,255,.72);
  font-size: 13px;
  flex-wrap:wrap;
}
.pill{
  display:inline-flex; align-items:center;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  color: rgba(255,255,255,.86);
  font-weight: 800;
  white-space:nowrap;
}
.pill .dot{
  width:8px; height:8px; border-radius:999px;
  background: rgba(91,208,168,.95);
  box-shadow: 0 0 0 6px rgba(91,208,168,.14);
  display:inline-block;
  margin-right:8px;
  padding:0;
  opacity:1;
}
.toplinks{ display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; }
.toplink{
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid transparent;
  background: transparent;
  color: rgba(255,255,255,.86);
  opacity:.92;
  transition: transform .15s ease, border-color .2s ease, background .2s ease, opacity .2s ease;
  white-space:nowrap;
}
.toplink:hover{
  opacity:1;
  background: rgba(255,255,255,.06);
  border-color: rgba(198,27,46,.28);
  transform: translateY(-1px);
}

header{
  position:sticky; top:44px; z-index:45;
  background: rgba(6,7,10,.55);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.header__inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:14px; padding: 14px 0;
}
nav.nav{ display:flex; gap:18px; align-items:center; }
nav.nav a{
  padding: 10px 10px;
  border-radius: 12px;
  border: 1px solid transparent;
  transition: transform .15s ease, border-color .2s ease, background .2s ease, color .2s ease;
  white-space:nowrap;
  font-size:14px;
  opacity:.92;
}
nav.nav a:hover{
  color: rgba(255,255,255,.92);
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.10);
  transform: translateY(-1px);
}
nav.nav a.active{
  color: rgba(255,255,255,.92);
  background: rgba(198,27,46,.12);
  border-color: rgba(198,27,46,.28);
}
@media (max-width: 980px){ nav.nav{ display:none; } }

header .btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:10px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.92);
  box-shadow: 0 12px 40px rgba(0,0,0,.45);
  cursor:pointer;
  transition: transform .15s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease;
  user-select:none;
  white-space:nowrap;
  font-weight:800;
}
header .btn:hover{
  transform: translateY(-2px);
  border-color: rgba(198,27,46,.30);
  box-shadow: 0 24px 70px rgba(0,0,0,.58);
}
header .btn.primary{
  border-color: rgba(198,27,46,.36);
  background:
    radial-gradient(140px 90px at 30% 30%, rgba(198,27,46,.20), transparent 55%),
    radial-gradient(140px 90px at 70% 70%, rgba(208,168,91,.14), transparent 55%),
    rgba(255,255,255,.07);
}
header .btn.ghost{ background: rgba(255,255,255,.03); box-shadow:none; }

.brandLogo{display:flex;align-items:center}
.lottieLogo{width:225px;height:75px;display:block;pointer-events:none}
@media (max-width:560px){ .lottieLogo{width:185px;height:60px} }
/* ===== END HEADER/TOPBAR — MATCH SERVICES ===== */




/* =============================== */
/* GRID FIX FOR fluent_form_3     */
/* =============================== */

/* Apply grid to FIELDSET */
#fluentform_3 fieldset{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap:16px;
}

/* Remove default spacing */
#fluentform_3 .ff-el-group{
  margin-bottom:0;
}

/* HALF WIDTH */
#fluentform_3 .ff-half{
  grid-column: span 1;
}

/* FULL WIDTH */
#fluentform_3 .ff-full{
  grid-column: 1 / -1;
}

/* Submit button full width */
#fluentform_3 .ff_submit_btn_wrapper{
  grid-column: 1 / -1;
}

/* Mobile */
@media (max-width:768px){
  #fluentform_3 fieldset{
    grid-template-columns:1fr;
  }
  #fluentform_3 .ff-half,
  #fluentform_3 .ff-full{
    grid-column:1 / -1;
  }
}


.ff-el-group.ff-text-left.ff_submit_btn_wrapper{
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 14px;
    align-items: center;
} 

/* Mobile hardening shared overrides */
@media (max-width: 980px){
  .container,
  .lo-container{
    width:min(var(--max, 1180px), calc(100% - 2*clamp(14px, 4vw, 22px))) !important;
  }

  .topbar__inner,
  .header__inner,
  .lo-topbar__inner,
  .lo-header__inner,
  .footRow,
  .foot{
    flex-wrap:wrap !important;
    row-gap:10px;
  }

  .grid2,
  .grid3,
  .valueGrid,
  .contactWrap,
  .compare,
  .teamgrid,
  .row{
    grid-template-columns:1fr !important;
  }

  .tableWrap,
  .comparisonTableWrap{
    width:100%;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }

  .tableWrap table,
  .comparisonTableWrap table,
  table.compTable{
    min-width:640px;
  }
}

@media (max-width: 768px){
  html,
  body{
    max-width:100%;
    overflow-x:hidden;
  }

  img,
  svg,
  video,
  canvas,
  iframe,
  embed,
  object{
    max-width:100% !important;
    height:auto;
  }

  .btn,
  .btn--primary,
  .btn--ghost,
  .lo-btn,
  .lo-btn--primary,
  .lo-btn--ghost{
    max-width:100%;
  }

  .footRow,
  .foot,
  .footLinks{
    justify-content:flex-start !important;
  }
}

@media (max-width: 560px){
  .topbar__inner,
  .header__inner,
  .lo-topbar__inner,
  .lo-header__inner{
    gap:8px !important;
  }

  .pill,
  .lo-pill,
  .toplink,
  .lo-toplink,
  .btn,
  .lo-btn{
    white-space:normal;
  }

  .btn,
  .btn--primary,
  .btn--ghost,
  .lo-btn,
  .lo-btn--primary,
  .lo-btn--ghost{
    width:100%;
  }
}

/* Mobile navigation + header logic overrides */
@media (max-width: 768px){
  .topbar__inner,
  .lo-topbar__inner{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content:space-between;
    gap:8px 10px;
  }

  .topbar__inner > div,
  .lo-topbar__inner > div,
  .toplinks,
  .lo-toplinks{
    min-width:0;
  }

  .header__inner,
  .lo-header__inner{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:10px;
  }

  .burger{
    display:inline-flex !important;
    width:42px;
    height:42px;
    border-radius:12px;
    border:1px solid rgba(255,255,255,.14);
    background:rgba(255,255,255,.05);
    align-items:center;
    justify-content:center;
    gap:4px;
    margin-left:auto;
    cursor:pointer;
  }

  .burger span{
    display:block;
    width:18px;
    height:2px;
    border-radius:999px;
    background:rgba(255,255,255,.88);
  }

  .mobileNav{
    display:none;
    width:min(var(--max, 1180px), calc(100% - 2*clamp(14px, 4vw, 22px)));
    margin:0 auto 12px;
    padding:8px 0 0;
    opacity:0;
    transform:translateY(-6px);
    animation: loMobileNavIn .22s ease forwards;
  }

  .mobileNav a{
    display:block;
    margin-top:8px;
    padding:11px 12px;
    border-radius:12px;
    border:1px solid rgba(255,255,255,.10);
    background:rgba(255,255,255,.04);
  }

  .mobileNav a.btn{
    margin-top:10px;
    width:100%;
  }

  .has-mobile-toggle > .nav,
  .has-mobile-toggle > nav.nav,
  .has-mobile-toggle > .lo-nav{
    display:none !important;
  }

  .has-mobile-toggle > div[style*='align-items:center']{
    display:none !important;
  }

  header .nav,
  nav.nav,
  .lo-nav{
    display:flex !important;
    width:100%;
    order:3;
    flex-direction:column;
    align-items:stretch;
    gap:8px;
  }

  header .nav a,
  nav.nav a,
  .lo-nav a{
    white-space:normal;
  }

  .grid2,
  .grid3,
  .valueGrid,
  .teamgrid,
  .compare,
  .contactWrap,
  .row,
  .pricingWrap,
  .plans,
  .panelGrid{
    grid-template-columns:1fr !important;
  }
}

@media (max-width: 480px){
  .topbar__inner,
  .lo-topbar__inner{
    flex-direction:column;
    align-items:flex-start;
  }

  .toplinks,
  .lo-toplinks,
  .footLinks{
    width:100%;
    justify-content:flex-start !important;
  }

  .btn,
  .btn--primary,
  .btn--ghost,
  .lo-btn,
  .lo-btn--primary,
  .lo-btn--ghost{
    width:100%;
  }
}

@media (max-width: 320px){
  .container,
  .lo-container{
    width:calc(100% - 20px) !important;
  }

  .pill,
  .lo-pill,
  .toplink,
  .lo-toplink{
    font-size:11px;
    padding:5px 8px;
  }

  h1{
    word-break:break-word;
  }
}

@keyframes loMobileNavIn{
  from{
    opacity:0;
    transform:translateY(-6px);
  }
  to{
    opacity:1;
    transform:translateY(0);
  }
}

/* Drawer menu slide overrides */
@media (max-width: 980px){
  body.nav-open{
    overflow:hidden;
  }

  .has-mobile-toggle > .nav,
  .has-mobile-toggle > nav.nav,
  .has-mobile-toggle > .lo-nav,
  .has-mobile-toggle > div[style*='align-items:center']{
    display:none !important;
  }

  .has-mobile-toggle > .burger{
    display:inline-flex !important;
    order:2;
    margin-left:auto;
  }

  .has-mobile-toggle > .brand,
  .has-mobile-toggle > .brandLogo,
  .has-mobile-toggle > a.brand{
    order:1;
  }

  .mobileNavOverlay{
    position:fixed;
    inset:0;
    background:rgba(4, 6, 10, .62);
    opacity:0;
    visibility:hidden;
    transition:opacity .26s ease, visibility .26s ease;
    z-index:90;
  }

  .mobileNavOverlay.is-open{
    opacity:1;
    visibility:visible;
  }

  .mobileNav{
    display:none !important;
    position:fixed;
    top:0;
    right:0;
    width:min(88vw, 360px);
    height:100dvh;
    padding:14px;
    margin:0;
    overflow:auto;
    z-index:95;
    background:linear-gradient(180deg, rgba(8,10,16,.98), rgba(12,16,24,.96));
    border-left:1px solid rgba(255,255,255,.10);
    box-shadow:-18px 0 54px rgba(0,0,0,.45);
    transform:translateX(104%);
    opacity:.98;
    transition:transform .32s cubic-bezier(.22,.61,.36,1);
  }

  .mobileNav.is-open{
    display:block !important;
    transform:translateX(0);
  }

  .mobileNavClose{
    display:flex;
    align-items:center;
    justify-content:center;
    width:100%;
    padding:10px 12px;
    margin:0 0 10px;
    border-radius:12px;
    border:1px solid rgba(255,255,255,.14);
    background:rgba(255,255,255,.06);
    color:rgba(255,255,255,.92);
    font-weight:700;
    cursor:pointer;
  }

  .mobileNav a{
    display:block;
    margin-top:8px;
    padding:11px 12px;
    border-radius:12px;
    border:1px solid rgba(255,255,255,.10);
    background:rgba(255,255,255,.03);
    text-decoration:none;
  }
}

@media (max-width: 480px){
  .mobileNav{
    width:100vw;
    border-left:none;
  }
}

/* Header CTA visibility alignment */
@media (max-width: 980px){
  .has-mobile-toggle{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:10px;
  }

  .has-mobile-toggle > a.brand,
  .has-mobile-toggle > .brand,
  .has-mobile-toggle > .brandLogo{
    order:1;
  }

  .has-mobile-toggle > .burger{
    order:2;
    margin-left:auto;
    display:inline-flex !important;
  }

  .has-mobile-toggle > div[style*='align-items:center']{
    order:3;
    flex:1 0 100%;
    display:flex !important;
    flex-direction:column;
    align-items:stretch !important;
    gap:8px !important;
  }

  .has-mobile-toggle > div[style*='align-items:center'] .btn,
  .has-mobile-toggle > div[style*='align-items:center'] .lo-btn{
    width:100% !important;
    display:flex;
    justify-content:center;
  }
}

/* Final mobile responsive harmonization */
@media (max-width: 980px){
  .topbar__inner,
  .lo-topbar__inner{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content:space-between;
    gap:8px 10px;
  }

  .topbar__inner > *,
  .lo-topbar__inner > *{
    min-width:0;
  }

  .has-mobile-toggle,
  .header__inner,
  .lo-header__inner{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:10px;
  }

  .has-mobile-toggle > a.brand,
  .has-mobile-toggle > .brand,
  .has-mobile-toggle > .brandLogo,
  .has-mobile-toggle > .lo-brand{
    order:1;
  }

  .has-mobile-toggle > .burger{
    order:2;
    margin-left:auto;
    display:inline-flex !important;
  }

  .has-mobile-toggle > div[style*='align-items:center']{
    order:3;
    flex:1 0 100%;
    display:flex !important;
    flex-direction:column;
    align-items:stretch !important;
    gap:8px !important;
  }

  .has-mobile-toggle > div[style*='align-items:center'] .btn,
  .has-mobile-toggle > div[style*='align-items:center'] .lo-btn,
  .has-mobile-toggle > div[style*='align-items:center'] .btn--primary,
  .has-mobile-toggle > div[style*='align-items:center'] .btn--ghost{
    width:100% !important;
    display:flex;
    justify-content:center;
  }

  .mobileNavOverlay{
    transition: opacity .34s ease, visibility .34s ease !important;
  }

  .mobileNav{
    transition: transform .34s ease, opacity .34s ease !important;
    opacity:0;
    transform:translateX(100%);
    pointer-events:none;
  }

  .mobileNav.is-open{
    display:block !important;
    opacity:1;
    transform:translateX(0);
    pointer-events:auto;
  }

  .grid2,
  .grid3,
  .valueGrid,
  .teamgrid,
  .compare,
  .contactWrap,
  .pricingWrap,
  .plans,
  .row,
  .panelGrid{
    grid-template-columns:1fr !important;
  }

  .foot,
  .footRow,
  .footLinks{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    justify-content:flex-start !important;
  }

  img,
  svg,
  video,
  iframe{
    max-width:100% !important;
    height:auto;
  }
}

@media (max-width: 560px){
  .topbar__inner,
  .lo-topbar__inner{
    flex-direction:column;
    align-items:flex-start;
  }

  .toplinks,
  .lo-toplinks,
  .footLinks{
    width:100%;
    justify-content:flex-start !important;
  }
}

@media (max-width: 320px){
  .container,
  .lo-container{
    width:calc(100% - 20px) !important;
  }

  .pill,
  .lo-pill,
  .toplink,
  .lo-toplink{
    font-size:11px;
    padding:5px 8px;
  }
}

/* Pricing header parity across templates */
.burger{
  display:none !important;
}

@media (max-width: 980px){
  .has-mobile-toggle,
  .header__inner,
  .lo-header__inner{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:10px;
  }

  .has-mobile-toggle > a.brand,
  .has-mobile-toggle > .brand,
  .has-mobile-toggle > .brandLogo,
  .has-mobile-toggle > .lo-brand{
    order:1;
    min-width:0;
  }

  .has-mobile-toggle > .burger{
    order:2;
    margin-left:auto;
    display:inline-flex !important;
  }

  .has-mobile-toggle > .nav,
  .has-mobile-toggle > nav.nav,
  .has-mobile-toggle > .lo-nav{
    display:none !important;
  }

  .has-mobile-toggle > div[style*='align-items:center']{
    order:3;
    flex:1 0 100%;
    display:flex !important;
    flex-direction:column;
    align-items:stretch !important;
    gap:8px !important;
  }

  .has-mobile-toggle > div[style*='align-items:center'] .btn,
  .has-mobile-toggle > div[style*='align-items:center'] .lo-btn,
  .has-mobile-toggle > div[style*='align-items:center'] .btn--primary,
  .has-mobile-toggle > div[style*='align-items:center'] .btn--ghost{
    width:100% !important;
    display:flex;
    justify-content:center;
  }

  .mobileNav{
    transition: transform .34s ease, opacity .34s ease !important;
  }

  .mobileNavOverlay{
    transition: opacity .34s ease, visibility .34s ease !important;
  }
}

/* Burger stacked-lines icon fix */
@media (max-width: 980px){
  .burger{
    display:inline-flex !important;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:4px;
    line-height:0;
  }

  .burger span{
    display:block !important;
    width:18px;
    height:2px;
    border-radius:999px;
    background:rgba(255,255,255,.9);
    margin:0;
    padding:0;
    transform:none;
  }
}

/* Mobile topbar non-sticky */
@media (max-width: 980px){
  .topbar,
  .lo-topbar{
    position:relative !important;
    top:auto !important;
  }

  header,
  .lo-header{
    top:0 !important;
  }
}