:root{
  --red:#C20D16;
  --dark-red:#8E0A10;
  --grey:#7A7A7A;
  --black:#000000;
  --white:#FFFFFF;
  --soft:#F4F4F4;
  --section-grey:#eeeeee;
  --line:#E5E5E5;
  --text:#111111;
  --shadow:0 12px 30px rgba(0,0,0,.12);
  --radius:8px;
  --container:1190px;
  --font-display:"Roboto Condensed","Arial Narrow",Impact,"Arial Black",sans-serif;
  --font-body:Arial,Helvetica,sans-serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;width:100%;overflow-x:hidden}
body{margin:0;font-family:var(--font-body);color:var(--text);background:#fff;line-height:1.42;width:100%;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}

/* Zoho Sites full-width breakout wrapper */
.xv-page{
  width:100vw;
  max-width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
  overflow:hidden;
  background:#fff;
}
.xv-container{width:min(var(--container),calc(100% - 96px));margin-inline:auto}

.site-header{background:#fff;position:relative;z-index:50;border-bottom:1px solid #efefef;width:100%}
.header-inner{height:82px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{display:flex;align-items:center;gap:10px;min-width:235px}
.brand-logo{height:70px;object-fit:contain;flex:0 0 auto}
.brand-mascot{width:62px;height:62px;object-fit:contain;flex:0 0 auto}
.brand-copy{display:flex;flex-direction:column;line-height:1}
.brand-word{font-size:35px;font-weight:900;letter-spacing:-1px;white-space:nowrap}
.brand-xtra{color:#7b7b7b;font-family:Arial,Helvetica,sans-serif;font-weight:900}
.brand-viral{color:var(--red);font-family:var(--font-display);font-weight:900;letter-spacing:.2px}
.brand-tagline{font-size:12px;color:#111;font-weight:800;margin-top:4px;letter-spacing:.1px}
.primary-nav{display:flex;align-items:center;gap:29px;font-size:13px;font-weight:900;line-height:1}

/*
.primary-nav a{padding:31px 0 27px;border-bottom:3px solid transparent;white-space:nowrap}
.primary-nav a:hover,.primary-nav a.active{color:var(--red);border-bottom-color:var(--red)}
*/
.primary-nav a {
  position: relative;
  padding: 31px 0 25px;
  border-bottom: none;
  white-space: nowrap;
}

.primary-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 18px; /* move the red line closer or further from the text */
  height: 3px;
  background: transparent;
  border-radius: 999px;
}

.primary-nav a:hover,
.primary-nav a.active {
  color: var(--red);
}

.primary-nav a:hover::after,
.primary-nav a.active::after {
  background: var(--red);
}




.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;border-radius:6px;padding:17px 24px;font-weight:900;font-size:15px;line-height:1.1;text-align:center;transition:.2s ease;border:2px solid transparent;cursor:pointer}
.btn i{font-size:18px}.btn-primary{background:linear-gradient(135deg,var(--red),#e01b24);color:#fff;box-shadow:0 8px 18px rgba(194,13,22,.28)}.btn-primary:hover{background:var(--dark-red);transform:translateY(-1px)}.btn-outline-light{border-color:rgba(255,255,255,.78);color:#fff;background:rgba(0,0,0,.15)}.btn-outline-light:hover{background:#fff;color:#111}.btn-dark{background:#050505;color:#fff;border-color:#050505}.btn-dark:hover{background:var(--red);border-color:var(--red)}.btn-light{background:#fff;color:var(--red);border-color:#fff}.btn-light:hover{background:#f4f4f4;color:var(--dark-red)}
.header-cta{padding:13px 18px;font-size:13px;min-width:178px;min-height:52px}

.section-dark{background:#000;color:#fff}.section-white{background:#fff}.section-grey{background:linear-gradient(180deg,#f0f0f0,#e8e8e8)}
.hero{background:#000 radial-gradient(circle at 75% 54%,rgba(194,13,22,.18),transparent 36%);border-top:1px solid #0a0a0a}
.hero-grid{display:grid;grid-template-columns:430px minmax(0,1fr);gap:40px;align-items:center;padding:47px 0 45px;min-height:520px}.hero-copy h1{font-family:var(--font-display);font-weight:900;font-size:46px;line-height:.98;text-transform:uppercase;margin:0 0 28px;letter-spacing:.1px}.hero-copy h1 span{color:var(--red);display:inline}.hero-copy p{font-size:18px;line-height:1.62;max-width:530px;color:#f5f5f5;margin:0 0 28px}.hero-actions{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:29px}.rating{display:flex;align-items:center;gap:15px;color:#fff;font-size:14px;font-style:italic}.stars{color:var(--red);letter-spacing:4px;font-style:normal}.hero-visual{display:flex;justify-content:flex-end;align-items:center}

/*.hero-visual img{width:min(100%,620px);border-radius:2px;filter:contrast(1.12) saturate(1.08)}*/

.hero-full-bg {
  position: relative;
  min-height: 560px;
  background: #000;
}

/* Keep the hero banner graphic inside the same max-width container as the rest of the page, without cropping the right edge. */
.hero-full-bg .hero-grid {
  display: grid;
  grid-template-columns: minmax(360px, 520px) 1fr;
  align-items: center;
  min-height: 560px;
  padding: 70px 0;
  background:
    linear-gradient(
      90deg,
      rgba(0, 0, 0, 0.95) 0%,
      rgba(0, 0, 0, 0.88) 18%,
      rgba(0, 0, 0, 0.55) 28%,
      rgba(0, 0, 0, 0.00) 36%,
      rgba(0, 0, 0, 0.00) 100%
    ),
    url("assets/images/hero-growth-system4.png");
  background-size: 100% auto;
  background-position: center center;
  background-repeat: no-repeat;
  background-color: #000;
}

.hero-full-bg .hero-copy {
  position: relative;
  z-index: 2;
}

.hero-full-bg .hero-copy h1 {
  color: #ffffff !important;
}

.hero-full-bg .hero-copy h1 span {
  color: #C20D16 !important;
}
.section-heading h2{font-family:var(--font-display);font-weight:900;font-size:36px;line-height:1.07;text-transform:uppercase;margin:0;letter-spacing:.1px}.section-heading h2 span{color:var(--red)}.centered{text-align:center}.compact{margin-bottom:26px}.problem-section{padding:46px 0 51px}.problem-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:12px;margin-top:31px}.mini-card{border:1px solid var(--line);border-radius:8px;text-align:center;padding:24px 10px 17px;min-height:151px;transition:.2s ease;background:#fff}.mini-card:hover{transform:translateY(-3px);box-shadow:var(--shadow)}.mini-card i{font-size:34px;color:var(--red);margin-bottom:17px}.mini-card h3{font-family:var(--font-display);font-weight:900;font-size:15px;line-height:1.08;text-transform:uppercase;margin:0 0 12px}.mini-card p{font-size:13px;margin:0;color:#202020;line-height:1.35}.problem-line{text-align:center;font-size:17px;font-weight:900;margin:28px 0 7px}.we-fix{text-align:center;color:var(--red);font-family:var(--font-display);font-weight:900;font-size:30px;text-transform:uppercase;margin:0;line-height:1}

.growth-system{padding:57px 0 56px;background:linear-gradient(180deg,#efefef,#e8e8e8)}.split-grid{display:grid;grid-template-columns:430px minmax(0,1fr);gap:48px;align-items:center}.split-copy h2{font-family:var(--font-display);font-weight:900;text-transform:uppercase;font-size:34px;line-height:1.08;margin:0 0 25px}.split-copy h2 span{display:block;color:var(--red)}.split-copy p{font-size:16px;line-height:1.6;margin:0 0 27px;max-width:510px}

.check-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 36px;
  padding: 0;
  margin: 0 0 29px;
  list-style: none;
}

.check-grid li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.35;
}

.check-grid i {
  color: var(--red);
  flex: 0 0 auto;
  margin-top: 2px;
}

.check-grid span {
  display: block;
}

.dashboard-visual{display:flex;justify-content:flex-end}
.dashboard-visual img{width:min(100%,620px);filter:drop-shadow(0 16px 18px rgba(0,0,0,.15))}

.services{padding:40px 0 49px}.service-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:14px}.service-card{position:relative;border:1px solid var(--line);border-radius:8px;text-align:center;padding:25px 13px 17px;background:#fff;box-shadow:0 8px 22px rgba(0,0,0,.045);min-height:258px;display:flex;flex-direction:column;align-items:center;transition:.2s ease}.service-card:hover{transform:translateY(-3px);box-shadow:var(--shadow)}.service-card .badge{position:absolute;top:12px;left:12px;background:var(--red);color:#fff;border-radius:50%;width:24px;height:24px;display:grid;place-items:center;font-weight:900;font-size:12px}.service-card > i{font-size:31px;color:#777777;margin:6px 0 18px}.service-card h3{font-family:var(--font-display);font-weight:900;font-size:16px;line-height:1.08;text-transform:uppercase;margin:0 0 12px;min-height:36px}.service-card strong{font-size:27px;display:block;margin:0 0 8px;line-height:1}.service-card strong span{font-size:13px}.service-card p{font-size:13px;margin:0 0 16px;flex:1;line-height:1.35}.small-btn{display:inline-flex;align-items:center;justify-content:center;min-height:42px;padding:10px 12px;border-radius:5px;background:var(--red);color:#fff;font-weight:900;font-size:13px;line-height:1.1;width:100%;max-width:150px}.small-btn:hover{background:var(--dark-red)}.small-btn.outline{background:#fff;color:var(--red);border:1px solid var(--red)}.small-btn.outline:hover{background:var(--red);color:#fff}

.process{padding:37px 0 48px}.process-row{display:grid;grid-template-columns:1fr 40px 1fr 40px 1fr 40px 1fr;gap:17px;align-items:center}.process-step{display:grid;grid-template-columns:auto auto 1fr;gap:7px 12px;align-items:center}.process-step span{grid-row:1/3;background:var(--red);color:#ffffff;border-radius:50%;width:35px;height:35px;display:grid;place-items:center;font-weight:900}.process-step i{grid-row:1/3;font-size:30px;color:#777777}.process-step h3{font-family:var(--font-display);font-weight:900;font-size:17px;text-transform:uppercase;margin:0;line-height:1}.process-step p{font-size:13px;margin:0;line-height:1.25}.process-arrow{color:var(--red);font-size:26px;text-align:center}

.credibility{padding:35px 0;background:#030303}.credibility-grid{display:grid;grid-template-columns:1.72fr repeat(4,1fr);align-items:center;gap:0}.cred-heading h2{font-family:var(--font-display);font-weight:900;text-transform:uppercase;font-size:29px;line-height:1.05;margin:0 0 8px}.cred-heading p{font-family:var(--font-display);font-weight:900;text-transform:uppercase;color:var(--red);font-size:22px;margin:0}.cred-item{min-height:108px;border-left:1px solid var(--red);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;text-align:center}.cred-item i{font-size:32px}.cred-item span{font-family:var(--font-display);font-weight:900;text-transform:uppercase;font-size:15px;line-height:1.15}

.final-cta{background:linear-gradient(90deg,#8e0a10,var(--red),#8e0a10);color:#fff;padding:31px 0 32px}.final-cta-inner{display:flex;align-items:center;justify-content:center;gap:36px;text-align:center}.final-cta h2{font-family:var(--font-display);font-weight:900;text-transform:uppercase;font-size:32px;line-height:1;margin:0}.final-actions{display:flex;gap:14px;flex-wrap:wrap}.site-footer{background:#050505;color:#fff;padding:22px 0}.footer-inner{display:flex;align-items:center;justify-content:space-between;gap:20px;font-size:13px}.footer-inner p{margin:0}.footer-inner nav{display:flex;gap:28px}.footer-inner a{color:#fff}.footer-inner a:hover{color:var(--red)}

@media (max-width:1150px){
  .primary-nav{gap:16px;font-size:12px}.hero-grid,.split-grid{grid-template-columns:1fr}.hero-copy h1{font-size:48px}.problem-grid{grid-template-columns:repeat(4,1fr)}.service-grid{grid-template-columns:repeat(3,1fr)}.credibility-grid{grid-template-columns:1fr 1fr}.cred-heading{grid-column:1/-1;margin-bottom:20px}.cred-item{border-top:1px solid rgba(194,13,22,.55)}.final-cta-inner{flex-direction:column}.process-row{grid-template-columns:1fr}.process-arrow{transform:rotate(90deg);justify-self:center}.dashboard-visual img,.hero-visual img{max-width:680px;margin-inline:auto}.hero-visual,.dashboard-visual{justify-content:center}
}
@media (max-width:820px){
  .xv-container{width:min(100% - 28px,var(--container))}.header-inner{height:auto;min-height:88px;flex-wrap:wrap;padding:12px 0}.brand{min-width:0}.brand-word{font-size:29px}.brand-tagline{font-size:11px}.primary-nav{order:3;width:100%;justify-content:center;flex-wrap:wrap;gap:8px 18px}.primary-nav a{padding:10px 0}.header-cta{margin-left:auto;min-width:auto;padding:12px 14px}.hero-grid{padding:42px 0}.hero-copy h1{font-size:39px}.hero-copy p{font-size:16px}.hero-actions .btn{width:100%}.problem-grid{grid-template-columns:repeat(2,1fr)}.split-copy h2,.section-heading h2{font-size:29px}    
.check-grid{grid-template-columns:1fr}
.service-grid{grid-template-columns:1fr 1fr}.credibility-grid{grid-template-columns:1fr}.cred-item{border-left:0}.footer-inner{flex-direction:column;text-align:center}.footer-inner nav{gap:14px;flex-wrap:wrap;justify-content:center}.final-actions .btn{width:100%}.process-step{grid-template-columns:auto auto 1fr}
}
@media (max-width:500px){
  .service-grid,.problem-grid{grid-template-columns:1fr}.hero-copy h1{font-size:33px}.brand-mascot{width:48px;height:48px}.header-cta span{display:none}.header-cta{padding:12px}.mini-card{min-height:auto}.final-cta h2{font-size:26px}.btn{width:100%;padding:15px 18px}.hero-actions,.final-actions{width:100%}.brand-word{font-size:25px}.brand-tagline{font-size:10px}.process-step{grid-template-columns:auto 1fr}.process-step i{grid-row:auto}.process-step span{grid-row:auto}.process-step h3,.process-step p{grid-column:2}
}

@media (max-width: 760px) {
  .hero-full-bg {
    background: #000;
  }

  .hero-full-bg .hero-grid {
    grid-template-columns: 1fr;
    min-height: auto;
    padding: 60px 0;
    background:
      linear-gradient(
        180deg,
        rgba(0, 0, 0, 0.96) 0%,
        rgba(0, 0, 0, 0.9) 45%,
        rgba(0, 0, 0, 0.68) 100%
      ),
      url("assets/images/hero-growth-system2.png");
    background-size: 100% auto;
    background-position: center center;
    background-repeat: no-repeat;
    background-color: #000;
  }
}

/* FORCE COLORS because of the Zoho Sites template */
body .xv-page section.hero .hero-copy h1 {
  color: #FFFFFF !important;
}

body .xv-page section.hero .hero-copy h1 span {
  color: #C20D16 !important;
}


/* Force normal content text to black without changing button text colours */
.xv-page p:not(.btn *),
.xv-page li,
.xv-page .mini-card h3,
.xv-page .mini-card p,
.xv-page .service-card h3,
.xv-page .service-card p,
.xv-page .service-card strong,
.xv-page .process-step h3,
.xv-page .process-step p,
.xv-page .split-copy p,
.xv-page .check-grid li,
.xv-page .section-white h1,
.xv-page .section-white h2,
.xv-page .section-white h3,
.xv-page .section-grey h1,
.xv-page .section-grey h2,
.xv-page .section-grey h3,
.xv-page .section-heading h2 {
  color: #000000 !important;
}

/* Keep dark section text white without affecting buttons */
.xv-page .section-dark h1,
.xv-page .section-dark h2,
.xv-page .section-dark h3,
.xv-page .section-dark p,
.xv-page .section-dark li,
.xv-page .section-dark .cred-item span,
.xv-page .hero h1,
.xv-page .hero p,
.xv-page .rating,
.xv-page .rating span,
.xv-page .site-footer p,
.xv-page .site-footer a,
.xv-page .final-cta-inner h2{
  color: #FFFFFF !important;
}

/* Rating stars red */
.xv-page .rating .stars,
.xv-page .rating .stars i {
  color: #C20D16 !important;
}

/* Keep XtraVIRAL red highlights */
.xv-page h1 span,
.xv-page h2 span,
.xv-page .we-fix,
.xv-page .cred-heading p,
.xv-page .primary-nav a.active,
.xv-page .primary-nav a:hover,
.xv-page .stars,
.xv-page .problem-grid i,
.xv-page .mini-card i,
.xv-page .check-grid i {
  color: #C20D16 !important;
}

/* Preserve button font colours */
.xv-page .btn-primary,
.xv-page .btn-primary *,
.xv-page .small-btn,
.xv-page .small-btn *,
.xv-page .btn-dark,
.xv-page .btn-dark * {
  color: #FFFFFF !important;
}

.xv-page .btn-light,
.xv-page .btn-light *,
.xv-page .small-btn.outline,
.xv-page .small-btn.outline * {
  color: #C20D16 !important;
}

.xv-page .btn-outline-light,
.xv-page .btn-outline-light * {
  color: #FFFFFF !important;
}

.xv-page .btn-outline-light:hover,
.xv-page .btn-outline-light:hover * {
  color: #000000 !important;
}
/* =========================================================
   MOBILE ONLY FIXES - XtraVIRAL / Zoho Sites
   Changes:
   - Remove Zoho template top/bottom padding on mobile
   - Centre logo in the mobile header
   - Keep CTA button text white
   - Enlarge mobile menu text
   - Force red underline below each mobile menu item
   - Reduce blank space under the hero rating
   ========================================================= */
@media (max-width: 760px) {

  /* Remove Zoho Sites wrapper spacing at the very top and bottom on mobile */
  html,
  body {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  .zpsite-container,
  .zpcontent-wrapper,
  .zpcontent-container,
  .zpelem-html,
  .zphtml,
  .zprow,
  .zpsection,
  .xv-page {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  /* Mobile header layout */
  .xv-page .header-inner {
    height: auto !important;
    min-height: 0 !important;
    padding: 8px 0 12px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
  }

  /* Centre XtraVIRAL logo */
  .xv-page .brand {
    order: 1 !important;
    width: 100% !important;
    min-width: 0 !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    margin: 0 auto !important;
    text-align: center !important;
  }

  .xv-page .brand-logo {
    height: 70px !important;
    margin: 0 auto !important;
  }

  /* Mobile menu */
  .xv-page .primary-nav {
    order: 2 !important;
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 10px 18px !important;
    font-size: 15px !important;
    line-height: 1.15 !important;
    text-align: center !important;
  }

  .xv-page .primary-nav a {
    position: relative !important;
    padding: 0 0 8px !important;
    font-size: 15px !important;
    line-height: 1.15 !important;
    color: #000000 !important;
    border-bottom: none !important;
  }

  /* Force a red line below every menu item on mobile */
  .xv-page .primary-nav a::after {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    height: 3px !important;
    background: #C20D16 !important;
    border-radius: 999px !important;
    display: block !important;
  }

  .xv-page .primary-nav a:hover,
  .xv-page .primary-nav a.active {
    color: #C20D16 !important;
  }

  /* Mobile CTA button */
  .xv-page .header-cta {
    order: 3 !important;
    margin: 0 auto !important;
    min-width: 220px !important;
    min-height: 48px !important;
    padding: 12px 18px !important;
  }

  .xv-page .header-cta,
  .xv-page .header-cta *,
  .xv-page .header-cta span,
  .xv-page .header-cta i {
    color: #FFFFFF !important;
  }

  /* Override the earlier max-width:500px rule that hides the CTA words */
  .xv-page .header-cta span {
    display: inline !important;
  }

  /* Reduce bottom space under hero rating on mobile */
  .xv-page .hero-full-bg {
    min-height: 0 !important;
  }

  .xv-page .hero-full-bg .hero-grid {
    min-height: 0 !important;
    padding-top: 46px !important;
    padding-bottom: 22px !important;
  }

  .xv-page .hero-copy {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }

  .xv-page .rating {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }
}

@media (max-width: 500px) {
  .xv-page .primary-nav {
    font-size: 15px !important;
    gap: 10px 16px !important;
  }

  .xv-page .primary-nav a {
    font-size: 15px !important;
  }

  .xv-page .header-cta {
    width: auto !important;
  }

  .xv-page .header-cta span {
    display: inline !important;
  }

  .xv-page .hero-full-bg .hero-grid {
    padding-top: 38px !important;
    padding-bottom: 18px !important;
  }
}

/* =========================================================
   MOBILE HAMBURGER MENU + SERVICE BUTTON FIXES
   Added for mobile phone layout only. Desktop layout is unchanged.
   ========================================================= */

.mobile-nav-toggle,
.hamburger-menu {
  display: none;
}

@media (max-width: 820px) {
  /* Hide the desktop menu list on mobile and replace it with hamburger control */
  .xv-page .mobile-nav-toggle {
    position: absolute !important;
    opacity: 0 !important;
    pointer-events: none !important;
    width: 1px !important;
    height: 1px !important;
  }

  .xv-page .hamburger-menu {
    order: 2 !important;
    display: inline-flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 5px !important;
    width: 50px !important;
    height: 48px !important;
    margin: 0 10px 0 auto !important;
    padding: 0 !important;
    border: 2px solid #C20D16 !important;
    border-radius: 6px !important;
    background: #FFFFFF !important;
    cursor: pointer !important;
  }

  .xv-page .hamburger-menu span {
    display: block !important;
    width: 24px !important;
    height: 3px !important;
    background: #C20D16 !important;
    border-radius: 999px !important;
  }

  .xv-page .primary-nav {
    order: 4 !important;
    width: 100% !important;
    display: none !important;
    justify-content: center !important;
    align-items: center !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    gap: 0 !important;
    margin: 8px 0 0 !important;
    padding: 10px 0 4px !important;
    background: #FFFFFF !important;
    border-top: 1px solid #EFEFEF !important;
    text-align: center !important;
  }

  .xv-page .mobile-nav-toggle:checked ~ .primary-nav {
    display: flex !important;
  }

  .xv-page .primary-nav a {
    display: inline-block !important;
    width: auto !important;
    margin: 0 0 12px !important;
    padding: 0 0 8px !important;
    font-size: 16px !important;
    line-height: 1.15 !important;
    color: #000000 !important;
    border-bottom: none !important;
  }

  .xv-page .primary-nav a::after {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    height: 3px !important;
    background: #C20D16 !important;
    border-radius: 999px !important;
    display: block !important;
  }

  .xv-page .header-cta {
    order: 3 !important;
    margin: 0 auto 0 0 !important;
    min-width: 220px !important;
    width: auto !important;
  }

  .xv-page .header-cta,
  .xv-page .header-cta *,
  .xv-page .header-cta span,
  .xv-page .header-cta i {
    color: #FFFFFF !important;
  }

  /* Make service-card buttons full width on mobile */
  .xv-page .service-card .small-btn {
    width: 100% !important;
    max-width: none !important;
    min-height: 46px !important;
  }
}

@media (max-width: 500px) {
  .xv-page .hamburger-menu {
    width: 48px !important;
    height: 48px !important;
    margin-right: 8px !important;
  }

  .xv-page .header-cta {
    min-width: 215px !important;
  }

  .xv-page .header-cta span {
    display: inline !important;
  }
}

@media (max-width: 380px) {
  .xv-page .hamburger-menu {
    width: 44px !important;
    margin-right: 6px !important;
  }

  .xv-page .header-cta {
    min-width: 0 !important;
    flex: 1 1 auto !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
}

/* =========================================================
   MOBILE HEADER HAMBURGER + CTA SAME-LINE FIX
   Added after previous mobile styles so it wins over Zoho/template styles.
   Desktop layout is unchanged.
   ========================================================= */
@media (max-width: 820px) {
  /* Keep the logo centred on its own row */
  .xv-page .header-inner {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 10px !important;
  }

  .xv-page .brand {
    order: 1 !important;
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    margin: 0 auto 2px !important;
  }

  .xv-page .brand-logo {
    margin: 0 auto !important;
  }

  /* Put hamburger and CTA on the same row */
  .xv-page .hamburger-menu {
    order: 2 !important;
    flex: 0 0 50px !important;
    width: 50px !important;
    height: 50px !important;
    margin: 0 !important;
  }

  .xv-page .header-cta {
    order: 3 !important;
    flex: 1 1 0 !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
    min-height: 50px !important;
    padding: 12px 14px !important;
  }

  .xv-page .header-cta,
  .xv-page .header-cta *,
  .xv-page .header-cta span,
  .xv-page .header-cta i {
    color: #FFFFFF !important;
  }

  /* Mobile dropdown menu: left aligned */
  .xv-page .primary-nav {
    order: 4 !important;
    width: 100% !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    text-align: left !important;
    padding: 12px 0 4px !important;
  }

  .xv-page .mobile-nav-toggle:checked ~ .primary-nav {
    display: flex !important;
  }

  .xv-page .primary-nav a {
    position: relative !important;
    display: inline-block !important;
    width: auto !important;
    margin: 0 0 14px !important;
    padding: 0 0 7px !important;
    text-align: left !important;
    font-size: 16px !important;
    color: #000000 !important;
    border-bottom: none !important;
  }

  /* Remove red underline from all mobile menu items by default */
  .xv-page .primary-nav a::after,
  .xv-page .primary-nav a:hover::after {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    right: auto !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 3px !important;
    background: transparent !important;
    border-radius: 999px !important;
    display: block !important;
  }

  /* Only underline the current/active page menu item */
  .xv-page .primary-nav a.active::after {
    background: #C20D16 !important;
  }

  .xv-page .primary-nav a.active {
    color: #C20D16 !important;
  }
}

@media (max-width: 500px) {
  .xv-page .hamburger-menu {
    flex-basis: 48px !important;
    width: 48px !important;
    height: 48px !important;
    margin: 0 !important;
  }

  .xv-page .header-cta {
    flex: 1 1 0 !important;
    width: auto !important;
    min-width: 0 !important;
    min-height: 48px !important;
  }

  .xv-page .header-cta span {
    display: inline !important;
  }
}

@media (max-width: 380px) {
  .xv-page .hamburger-menu {
    flex-basis: 44px !important;
    width: 44px !important;
  }

  .xv-page .header-cta {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
}

/* =========================================================
   FINAL MOBILE HEADER ROW + ACTIVE-ONLY MENU STYLE FIX
   Mobile only. Keeps hamburger and CTA on one row.
   Makes only the active menu item red and underlined.
   ========================================================= */
@media (max-width: 820px) {
  .xv-page .header-inner {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 10px !important;
  }

  /* Logo remains centred on its own row */
  .xv-page .brand {
    order: 1 !important;
    flex: 0 0 100% !important;
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    margin: 0 auto 2px !important;
  }

  .xv-page .brand-logo {
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Hamburger and CTA sit on the same row */
  .xv-page .hamburger-menu {
    order: 2 !important;
    display: inline-flex !important;
    flex: 0 0 50px !important;
    width: 50px !important;
    height: 50px !important;
    margin: 0 !important;
    align-self: stretch !important;
  }

  .xv-page .header-cta {
    order: 3 !important;
    flex: 1 1 0 !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    min-height: 50px !important;
    margin: 0 !important;
    padding: 12px 14px !important;
  }

  .xv-page .header-cta,
  .xv-page .header-cta *,
  .xv-page .header-cta span,
  .xv-page .header-cta i {
    color: #FFFFFF !important;
  }

  /* Mobile menu dropdown */
  .xv-page .primary-nav {
    order: 4 !important;
    width: 100% !important;
    display: none !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 0 !important;
    margin: 8px 0 0 !important;
    padding: 12px 0 4px !important;
    text-align: left !important;
    background: #FFFFFF !important;
    border-top: 1px solid #EFEFEF !important;
  }

  .xv-page .mobile-nav-toggle:checked ~ .primary-nav {
    display: flex !important;
  }

  /* Default mobile menu items: black, no underline */
  .xv-page .primary-nav a,
  .xv-page .primary-nav a:visited,
  .xv-page .primary-nav a:hover,
  .xv-page .primary-nav a:focus,
  .xv-page .primary-nav a:active {
    position: relative !important;
    display: inline-block !important;
    width: auto !important;
    margin: 0 0 14px !important;
    padding: 0 0 7px !important;
    text-align: left !important;
    font-size: 16px !important;
    line-height: 1.15 !important;
    color: #000000 !important;
    border-bottom: none !important;
  }

  .xv-page .primary-nav a::after,
  .xv-page .primary-nav a:hover::after,
  .xv-page .primary-nav a:focus::after,
  .xv-page .primary-nav a:active::after {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    right: auto !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 3px !important;
    background: transparent !important;
    border-radius: 999px !important;
    display: block !important;
  }

  /* Active/current menu item only: red text and red underline */
  .xv-page .primary-nav a.active,
  .xv-page .primary-nav a.active:visited,
  .xv-page .primary-nav a.active:hover,
  .xv-page .primary-nav a.active:focus,
  .xv-page .primary-nav a.active:active {
    color: #C20D16 !important;
  }

  .xv-page .primary-nav a.active::after,
  .xv-page .primary-nav a.active:hover::after,
  .xv-page .primary-nav a.active:focus::after,
  .xv-page .primary-nav a.active:active::after {
    background: #C20D16 !important;
  }
}

@media (max-width: 500px) {
  .xv-page .hamburger-menu {
    flex: 0 0 48px !important;
    width: 48px !important;
    height: 48px !important;
    margin: 0 !important;
  }

  .xv-page .header-cta {
    flex: 1 1 0 !important;
    width: auto !important;
    min-width: 0 !important;
    min-height: 48px !important;
  }

  .xv-page .header-cta span {
    display: inline !important;
  }
}

@media (max-width: 380px) {
  .xv-page .hamburger-menu {
    flex: 0 0 44px !important;
    width: 44px !important;
  }

  .xv-page .header-cta {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
}


/* =========================================================
   FINAL MOBILE HEADER FORCE FIX
   Mobile only. Forces hamburger and CTA onto one row.
   Open hamburger menu: all items black, no red underline ever.
   ========================================================= */
.mobile-header-action-row {
  display: contents;
}

@media (max-width: 820px) {
  .xv-page .header-inner {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
  }

  .xv-page .brand {
    order: 1 !important;
    flex: 0 0 100% !important;
    width: 100% !important;
    justify-content: center !important;
    margin: 0 auto 2px !important;
  }

  .xv-page .mobile-header-action-row {
    order: 2 !important;
    display: flex !important;
    flex: 0 0 100% !important;
    width: 100% !important;
    align-items: stretch !important;
    justify-content: space-between !important;
    gap: 10px !important;
    margin: 0 !important;
  }

  .xv-page .hamburger-menu {
    order: 1 !important;
    display: inline-flex !important;
    flex: 0 0 50px !important;
    width: 50px !important;
    min-width: 50px !important;
    height: 50px !important;
    min-height: 50px !important;
    margin: 0 !important;
    align-self: stretch !important;
  }

  .xv-page .mobile-header-action-row .header-cta {
    order: 2 !important;
    display: inline-flex !important;
    flex: 1 1 auto !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    min-height: 50px !important;
    margin: 0 !important;
    padding: 12px 14px !important;
  }

  .xv-page .mobile-header-action-row .header-cta,
  .xv-page .mobile-header-action-row .header-cta *,
  .xv-page .mobile-header-action-row .header-cta span,
  .xv-page .mobile-header-action-row .header-cta i {
    color: #FFFFFF !important;
  }

  .xv-page .primary-nav {
    order: 3 !important;
    flex: 0 0 100% !important;
    width: 100% !important;
    display: none !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 0 !important;
    margin: 8px 0 0 !important;
    padding: 12px 0 4px !important;
    text-align: left !important;
    background: #FFFFFF !important;
    border-top: 1px solid #EFEFEF !important;
  }

  .xv-page .mobile-nav-toggle:checked ~ .primary-nav {
    display: flex !important;
  }

  .xv-page .primary-nav a,
  .xv-page .primary-nav a.active,
  .xv-page .primary-nav a:visited,
  .xv-page .primary-nav a:hover,
  .xv-page .primary-nav a:focus,
  .xv-page .primary-nav a:active,
  .xv-page .primary-nav a.active:visited,
  .xv-page .primary-nav a.active:hover,
  .xv-page .primary-nav a.active:focus,
  .xv-page .primary-nav a.active:active {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 11px 0 !important;
    text-align: left !important;
    font-size: 16px !important;
    line-height: 1.15 !important;
    color: #000000 !important;
    border: 0 !important;
    border-bottom: 0 !important;
    text-decoration: none !important;
    background: transparent !important;
  }

  .xv-page .primary-nav a::after,
  .xv-page .primary-nav a.active::after,
  .xv-page .primary-nav a:hover::after,
  .xv-page .primary-nav a:focus::after,
  .xv-page .primary-nav a:active::after,
  .xv-page .primary-nav a.active:hover::after,
  .xv-page .primary-nav a.active:focus::after,
  .xv-page .primary-nav a.active:active::after {
    content: none !important;
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    background: transparent !important;
    border: 0 !important;
  }
}

@media (max-width: 500px) {
  .xv-page .mobile-header-action-row {
    gap: 8px !important;
  }

  .xv-page .hamburger-menu {
    flex: 0 0 48px !important;
    width: 48px !important;
    min-width: 48px !important;
    height: 48px !important;
    min-height: 48px !important;
  }

  .xv-page .mobile-header-action-row .header-cta {
    flex: 1 1 auto !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    min-height: 48px !important;
  }

  .xv-page .mobile-header-action-row .header-cta span {
    display: inline !important;
  }
}

@media (max-width: 380px) {
  .xv-page .hamburger-menu {
    flex: 0 0 44px !important;
    width: 44px !important;
    min-width: 44px !important;
  }

  .xv-page .mobile-header-action-row .header-cta {
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
}


/* =========================================================
   FINAL MOBILE HEADER LAYOUT FIX
   Mobile only:
   - Hamburger menu sits on the same row as the XtraVIRAL logo, on the left.
   - Get a free Growth Audit button becomes full screen/container width below.
   - Open hamburger menu items stay black with no red underline.
   ========================================================= */
@media (max-width: 820px) {
  .xv-page .header-inner {
    display: grid !important;
    grid-template-columns: 52px minmax(0, 1fr) !important;
    grid-template-rows: auto auto auto !important;
    align-items: center !important;
    justify-content: stretch !important;
    column-gap: 10px !important;
    row-gap: 10px !important;
    width: min(100% - 28px, var(--container)) !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 10px 0 !important;
    margin-inline: auto !important;
  }

  .xv-page .mobile-header-action-row {
    display: contents !important;
    width: auto !important;
    flex: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .xv-page .hamburger-menu {
    grid-column: 1 !important;
    grid-row: 1 !important;
    display: inline-flex !important;
    width: 52px !important;
    min-width: 52px !important;
    max-width: 52px !important;
    height: 52px !important;
    min-height: 52px !important;
    margin: 0 !important;
    justify-self: start !important;
    align-self: center !important;
  }

  .xv-page .brand {
    grid-column: 2 !important;
    grid-row: 1 !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    margin: 0 !important;
  }

  .xv-page .brand-logo {
    height: 66px !important;
    max-width: 100% !important;
    object-fit: contain !important;
  }

  .xv-page .mobile-header-action-row .header-cta,
  .xv-page .header-cta {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    display: inline-flex !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    min-height: 50px !important;
    margin: 0 !important;
    padding: 13px 16px !important;
    justify-self: stretch !important;
  }

  .xv-page .mobile-header-action-row .header-cta,
  .xv-page .mobile-header-action-row .header-cta *,
  .xv-page .header-cta,
  .xv-page .header-cta *,
  .xv-page .header-cta span,
  .xv-page .header-cta i {
    color: #FFFFFF !important;
  }

  .xv-page .header-cta span {
    display: inline !important;
  }

  .xv-page .primary-nav {
    grid-column: 1 / -1 !important;
    grid-row: 3 !important;
    width: 100% !important;
    display: none !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 0 !important;
    margin: 0 !important;
    padding: 10px 0 4px !important;
    text-align: left !important;
    background: #FFFFFF !important;
    border-top: 1px solid #EFEFEF !important;
  }

  .xv-page .mobile-nav-toggle:checked ~ .primary-nav {
    display: flex !important;
  }

  .xv-page .primary-nav a,
  .xv-page .primary-nav a.active,
  .xv-page .primary-nav a:visited,
  .xv-page .primary-nav a:hover,
  .xv-page .primary-nav a:focus,
  .xv-page .primary-nav a:active,
  .xv-page .primary-nav a.active:visited,
  .xv-page .primary-nav a.active:hover,
  .xv-page .primary-nav a.active:focus,
  .xv-page .primary-nav a.active:active {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 11px 0 !important;
    text-align: left !important;
    font-size: 16px !important;
    line-height: 1.15 !important;
    color: #000000 !important;
    border: 0 !important;
    border-bottom: 0 !important;
    text-decoration: none !important;
    background: transparent !important;
  }

  .xv-page .primary-nav a::after,
  .xv-page .primary-nav a.active::after,
  .xv-page .primary-nav a:hover::after,
  .xv-page .primary-nav a:focus::after,
  .xv-page .primary-nav a:active::after,
  .xv-page .primary-nav a.active:hover::after,
  .xv-page .primary-nav a.active:focus::after,
  .xv-page .primary-nav a.active:active::after {
    content: none !important;
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    background: transparent !important;
    border: 0 !important;
  }
}

@media (max-width: 500px) {
  .xv-page .header-inner {
    grid-template-columns: 48px minmax(0, 1fr) !important;
    column-gap: 8px !important;
  }

  .xv-page .hamburger-menu {
    width: 48px !important;
    min-width: 48px !important;
    max-width: 48px !important;
    height: 48px !important;
    min-height: 48px !important;
  }

  .xv-page .brand-logo {
    height: 62px !important;
  }

  .xv-page .mobile-header-action-row .header-cta,
  .xv-page .header-cta {
    width: 100% !important;
    min-height: 48px !important;
  }
}

@media (max-width: 380px) {
  .xv-page .header-inner {
    grid-template-columns: 44px minmax(0, 1fr) !important;
  }

  .xv-page .hamburger-menu {
    width: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
  }

  .xv-page .brand-logo {
    height: 58px !important;
  }
}


/* =========================================================
   FINAL MOBILE LOGO RIGHT JUSTIFY FIX
   Mobile only: hamburger remains left, XtraVIRAL logo is right justified.
   ========================================================= */
@media (max-width: 820px) {
  .xv-page .brand {
    justify-content: flex-end !important;
    text-align: right !important;
  }

  .xv-page .brand-logo {
    margin-left: auto !important;
    margin-right: 0 !important;
  }
}


/* =========================================================
   FINAL MOBILE LOGO LEFT / HAMBURGER RIGHT FIX
   Mobile only: XtraVIRAL logo is left justified and hamburger menu button is right justified on the same row.
   The Growth Audit CTA remains full width below.
   ========================================================= */
@media (max-width: 820px) {
  .xv-page .header-inner {
    grid-template-columns: minmax(0, 1fr) 52px !important;
    grid-template-rows: auto auto auto !important;
    column-gap: 10px !important;
    align-items: center !important;
  }

  .xv-page .brand {
    grid-column: 1 !important;
    grid-row: 1 !important;
    justify-content: flex-start !important;
    text-align: left !important;
    width: 100% !important;
    margin: 0 !important;
  }

  .xv-page .brand-logo {
    margin-left: 0 !important;
    margin-right: auto !important;
  }

  .xv-page .mobile-header-action-row {
    display: contents !important;
  }

  .xv-page .hamburger-menu {
    grid-column: 2 !important;
    grid-row: 1 !important;
    justify-self: end !important;
    align-self: center !important;
    margin: 0 !important;
  }

  .xv-page .mobile-header-action-row .header-cta,
  .xv-page .header-cta {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    width: 100% !important;
    max-width: none !important;
    justify-self: stretch !important;
  }

  .xv-page .primary-nav {
    grid-column: 1 / -1 !important;
    grid-row: 3 !important;
  }
}

@media (max-width: 500px) {
  .xv-page .header-inner {
    grid-template-columns: minmax(0, 1fr) 48px !important;
  }
}

@media (max-width: 380px) {
  .xv-page .header-inner {
    grid-template-columns: minmax(0, 1fr) 44px !important;
  }
}

/* =========================================================
   DESKTOP ONLY HEADER FIX
   Desktop only: keep the Growth Audit CTA to the right of the menu
   and make the header sticky while scrolling.
   ========================================================= */
@media (min-width: 821px) {
  .xv-page .site-header {
    position: sticky !important;
    position: -webkit-sticky !important;
    top: 0 !important;
    z-index: 9999 !important;
    background: #FFFFFF !important;
    box-shadow: 0 3px 14px rgba(0, 0, 0, 0.08) !important;
  }

  .xv-page .header-inner {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 24px !important;
  }

  .xv-page .brand {
    order: 1 !important;
    flex: 0 0 auto !important;
  }

  .xv-page .primary-nav {
    order: 2 !important;
    display: flex !important;
    flex: 1 1 auto !important;
    justify-content: flex-end !important;
    align-items: center !important;
    width: auto !important;
  }

  .xv-page .mobile-header-action-row {
    order: 3 !important;
    display: flex !important;
    flex: 0 0 auto !important;
    align-items: center !important;
    justify-content: flex-end !important;
    width: auto !important;
  }

  .xv-page .hamburger-menu,
  .xv-page .mobile-nav-toggle {
    display: none !important;
  }

  .xv-page .header-cta {
    order: 3 !important;
    display: inline-flex !important;
    flex: 0 0 auto !important;
    margin-left: 0 !important;
    width: auto !important;
    max-width: none !important;
  }

  .xv-page .header-cta,
  .xv-page .header-cta *,
  .xv-page .header-cta span,
  .xv-page .header-cta i {
    color: #FFFFFF !important;
  }
}


/* =========================================================
   FINAL ZOHO PADDING + FORCED STICKY HEADER FIX
   Removes Zoho Sites wrapper padding around this HTML block and
   forces the desktop header to remain fixed at the top while scrolling.
   ========================================================= */

/* Remove padding/margins from this custom HTML block itself. */
html,
body,
.xv-page {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Force common Zoho Sites wrappers that contain this page to have no top/bottom spacing. */
body:has(.xv-page),
body:has(.xv-page) .zpcontent-wrapper,
body:has(.xv-page) .zpcontent-container,
body:has(.xv-page) .zpcontainer,
body:has(.xv-page) .zpsection,
body:has(.xv-page) .zpsection-content,
body:has(.xv-page) .zprow,
body:has(.xv-page) .zpcol-md-12,
body:has(.xv-page) .zpelement,
body:has(.xv-page) .zpelement-wrapper,
body:has(.xv-page) .zphtml,
body:has(.xv-page) .zphtmlcontent,
body:has(.xv-page) .theme-content-area,
body:has(.xv-page) .theme-content-container,
body:has(.xv-page) .theme-container,
body:has(.xv-page) .theme-section,
body:has(.xv-page) .theme-section-content,
body:has(.xv-page) .theme-single-post,
body:has(.xv-page) .theme-single-post-content {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* Desktop only: use fixed positioning instead of sticky so Zoho wrappers cannot break it. */
@media (min-width: 821px) {
  body:has(.xv-page) {
    padding-top: 0 !important;
    margin-top: 0 !important;
  }

  .xv-page {
    overflow: visible !important;
  }

  .xv-page .site-header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    z-index: 2147483647 !important;
    background: #FFFFFF !important;
    box-shadow: 0 3px 14px rgba(0, 0, 0, 0.10) !important;
  }

  .xv-page main {
    padding-top: 82px !important;
  }

  .xv-page section,
  .xv-page [id] {
    scroll-margin-top: 92px !important;
  }

  .xv-page .header-inner {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 24px !important;
  }

  .xv-page .brand {
    order: 1 !important;
    flex: 0 0 auto !important;
  }

  .xv-page .primary-nav {
    order: 2 !important;
    display: flex !important;
    flex: 1 1 auto !important;
    justify-content: flex-end !important;
    align-items: center !important;
    width: auto !important;
  }

  .xv-page .mobile-header-action-row {
    order: 3 !important;
    display: flex !important;
    flex: 0 0 auto !important;
    align-items: center !important;
    justify-content: flex-end !important;
    width: auto !important;
  }

  .xv-page .hamburger-menu,
  .xv-page .mobile-nav-toggle {
    display: none !important;
  }

  .xv-page .header-cta {
    display: inline-flex !important;
    flex: 0 0 auto !important;
    margin-left: 0 !important;
    width: auto !important;
    max-width: none !important;
  }

  .xv-page .header-cta,
  .xv-page .header-cta *,
  .xv-page .header-cta span,
  .xv-page .header-cta i {
    color: #FFFFFF !important;
  }
}

/* Mobile/tablet: keep the header in normal flow so the mobile layout is not affected. */
@media (max-width: 820px) {
  .xv-page .site-header {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    width: 100% !important;
  }

  .xv-page main {
    padding-top: 0 !important;
  }
}

/* =========================================================
   FINAL MOBILE HAMBURGER ICON RED FIX
   Mobile only: forces the hamburger button outline and the
   three hamburger bars to XtraVIRAL red, even inside Zoho Sites.
   ========================================================= */
@media (max-width: 820px) {
  .xv-page .hamburger-menu {
    border-color: #C20D16 !important;
    background: #FFFFFF !important;
    color: #C20D16 !important;
  }

  .xv-page .hamburger-menu span,
  .xv-page .hamburger-menu span[aria-hidden="true"] {
    display: block !important;
    width: 24px !important;
    height: 3px !important;
    min-height: 3px !important;
    background-color: #C20D16 !important;
    background: #C20D16 !important;
    border-radius: 999px !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  .xv-page .hamburger-menu:hover,
  .xv-page .hamburger-menu:focus {
    border-color: #C20D16 !important;
    color: #C20D16 !important;
  }

  .xv-page .hamburger-menu:hover span,
  .xv-page .hamburger-menu:focus span {
    background-color: #C20D16 !important;
    background: #C20D16 !important;
  }
}

@media (max-width: 500px) {
  .xv-page .hamburger-menu span,
  .xv-page .hamburger-menu span[aria-hidden="true"] {
    width: 23px !important;
    height: 3px !important;
  }
}

/* =========================================================
   FINAL CTA BUTTON HOVER FIX
   Makes the "Get a free Growth Audit" button in the final CTA
   section turn black on hover, without changing other buttons.
   ========================================================= */
.xv-page .final-cta .btn-light:hover,
.xv-page .final-cta .btn-light:focus {
  background: #000000 !important;
  border-color: #000000 !important;
  color: #FFFFFF !important;
}

.xv-page .final-cta .btn-light:hover *,
.xv-page .final-cta .btn-light:focus *,
.xv-page .final-cta .btn-light:hover i,
.xv-page .final-cta .btn-light:focus i {
  color: #FFFFFF !important;
}

/* =========================================================
   REQUEST HOURLY HELP BUTTON HOVER FIX
   Forces the outlined service button text to turn white on hover,
   overriding the Zoho/template button colour preservation rules.
   ========================================================= */
.xv-page .service-card .small-btn.outline:hover,
.xv-page .service-card .small-btn.outline:focus {
  background: #C20D16 !important;
  border-color: #C20D16 !important;
  color: #FFFFFF !important;
}

.xv-page .service-card .small-btn.outline:hover *,
.xv-page .service-card .small-btn.outline:focus * {
  color: #FFFFFF !important;
}


/* =========================================================
   SINGLE-PAGE XTRAVIRAL SECTION SYSTEM
   Converts Services, Audit, AI Automation, About and Contact
   into long-form home page sections while retaining the existing
   header, footer, brand colours, buttons and Zoho fixes.
   ========================================================= */
.xv-page .xv-long-section {
  scroll-margin-top: 96px;
}

.xv-page .section-intro {
  max-width: 780px;
  margin: 12px auto 0;
  font-size: 17px;
  line-height: 1.55;
  color: #111111 !important;
}

.xv-page .light-copy h2,
.xv-page .light-copy p {
  color: #FFFFFF !important;
}

.xv-page .light-copy h2 span {
  color: #C20D16 !important;
}

.xv-page .service-list-table {
  display: grid;
  gap: 12px;
  margin-top: 30px;
}

.xv-page .service-row {
  display: grid;
  grid-template-columns: 42px 52px 1.2fr 1fr 1fr .8fr 150px;
  align-items: center;
  gap: 18px;
  padding: 20px 18px;
  border: 1px solid #E5E5E5;
  border-radius: 12px;
  background: linear-gradient(180deg, #ffffff, #f5f5f5);
  box-shadow: 0 8px 20px rgba(0,0,0,.045);
}

.xv-page .service-row .service-number {
  width: 31px;
  height: 31px;
  display: grid;
  place-items: center;
  background: #050505;
  color: #ffffff !important;
  border-radius: 50%;
  font-weight: 900;
}

.xv-page .service-row > i {
  font-size: 36px;
  color: #C20D16 !important;
  text-align: center;
}

.xv-page .service-row h3 {
  font-family: var(--font-display);
  font-size: 21px;
  line-height: 1.05;
  text-transform: uppercase;
  margin: 0 0 6px;
  color: #111111 !important;
}

.xv-page .service-row strong {
  display: block;
  font-size: 21px;
  color: #111111 !important;
}

.xv-page .service-row p {
  margin: 0;
  font-size: 13px;
  line-height: 1.35;
  color: #111111 !important;
}

.xv-page .choice-matrix {
  margin-top: 34px;
  padding: 24px;
  border-radius: 12px;
  background: #050505;
  color: #ffffff;
}

.xv-page .choice-matrix h3 {
  margin: 0 0 18px;
  text-align: center;
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: 28px;
  color: #FFFFFF !important;
}

.xv-page .choice-matrix h3 span {
  color: #C20D16 !important;
}

.xv-page .matrix-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.xv-page .matrix-grid div {
  padding: 16px;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 8px;
  color: #FFFFFF !important;
  font-weight: 700;
}

.xv-page .matrix-grid strong {
  display: block;
  margin-top: 8px;
  color: #C20D16 !important;
  text-transform: uppercase;
}

.xv-page .audit-hero,
.xv-page .ai-hero,
.xv-page .contact-hero {
  padding: 62px 0;
  background:
    radial-gradient(circle at 72% 50%, rgba(194,13,22,.22), transparent 32%),
    linear-gradient(180deg, #000000, #050505);
}

.xv-page .audit-scorecards,
.xv-page .contact-hero-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.xv-page .audit-scorecards article,
.xv-page .contact-hero-cards article {
  padding: 18px;
  border: 1px solid #C20D16;
  border-radius: 10px;
  background: rgba(0,0,0,.72);
  box-shadow: 0 0 18px rgba(194,13,22,.22);
}

.xv-page .audit-scorecards span,
.xv-page .contact-hero-cards strong {
  display: block;
  font-family: var(--font-display);
  text-transform: uppercase;
  color: #FFFFFF !important;
  font-size: 16px;
}

.xv-page .audit-scorecards strong {
  display: block;
  font-size: 32px;
  color: #C20D16 !important;
  line-height: 1;
  margin: 8px 0;
}

.xv-page .audit-scorecards small,
.xv-page .contact-hero-cards span {
  color: #FFFFFF !important;
}

.xv-page .icon-card-grid {
  display: grid;
  gap: 14px;
  margin-top: 28px;
}

.xv-page .icon-card-grid.six { grid-template-columns: repeat(6, 1fr); }
.xv-page .icon-card-grid.eight { grid-template-columns: repeat(8, 1fr); }

.xv-page .icon-card-grid article {
  min-height: 142px;
  padding: 22px 13px;
  border: 1px solid #E5E5E5;
  border-radius: 8px;
  background: #FFFFFF;
  text-align: center;
  box-shadow: 0 8px 20px rgba(0,0,0,.04);
}

.xv-page .icon-card-grid article i {
  font-size: 34px;
  color: #C20D16 !important;
  margin-bottom: 16px;
}

.xv-page .icon-card-grid article h3 {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-size: 16px;
  line-height: 1.1;
  text-transform: uppercase;
  color: #111111 !important;
}

.xv-page .icon-card-grid article p {
  margin: 0;
  font-size: 13px;
  line-height: 1.35;
  color: #111111 !important;
}

.xv-page .red-line-note {
  margin: 24px auto 0;
  text-align: center;
  color: #C20D16 !important;
  font-weight: 900;
  font-size: 18px;
}

.xv-page .audit-package-grid {
  display: grid;
  grid-template-columns: 1fr 1.3fr 1fr;
  gap: 22px;
  align-items: stretch;
}

.xv-page .audit-report-card,
.xv-page .price-card,
.xv-page .audit-details-card {
  padding: 28px;
  border: 1px solid #E5E5E5;
  border-radius: 12px;
  background: #FFFFFF;
  box-shadow: var(--shadow);
}

.xv-page .audit-report-card i {
  font-size: 58px;
  color: #C20D16 !important;
}

.xv-page .price-card h2,
.xv-page .audit-report-card h3 {
  font-family: var(--font-display);
  text-transform: uppercase;
  margin: 0 0 12px;
  color: #111111 !important;
}

.xv-page .price-card strong {
  display: block;
  font-size: 56px;
  line-height: .95;
  color: #C20D16 !important;
}

.xv-page .price-card span,
.xv-page .audit-details-card p,
.xv-page .audit-report-card p {
  color: #111111 !important;
}

.xv-page .workflow-compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.xv-page .workflow-compare div {
  padding: 24px;
  border: 1px solid #C20D16;
  border-radius: 12px;
  background: rgba(0,0,0,.78);
}

.xv-page .workflow-compare h3 {
  margin: 0 0 14px;
  color: #FFFFFF !important;
  font-family: var(--font-display);
  text-transform: uppercase;
}

.xv-page .workflow-compare p {
  margin: 10px 0;
  color: #FFFFFF !important;
}

.xv-page .workflow-compare i.fa-xmark { color: #C20D16 !important; }
.xv-page .workflow-compare i.fa-check { color: #18a84a !important; }

.xv-page .check-grid.single {
  grid-template-columns: 1fr;
}

.xv-page .deliverables-strip {
  padding: 42px 0;
}

.xv-page .deliverables-strip h2 {
  font-family: var(--font-display);
  text-transform: uppercase;
  margin: 0 0 20px;
  color: #FFFFFF !important;
}

.xv-page .dark-card-row {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 12px;
}

.xv-page .dark-card-row article {
  padding: 18px 12px;
  min-height: 92px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 8px;
  color: #FFFFFF !important;
  font-weight: 900;
}

.xv-page .about-section {
  padding: 58px 0;
}

.xv-page .about-intro {
  margin-bottom: 42px;
}

.xv-page .target-visual {
  min-height: 220px;
  display: grid;
  place-items: center;
}

.xv-page .target-visual i {
  font-size: 140px;
  color: #C20D16 !important;
}

.xv-page .flow-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
  margin: 25px 0;
}

.xv-page .flow-row span {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  font-weight: 900;
  color: #111111 !important;
}

.xv-page .flow-row i {
  color: #C20D16 !important;
  font-size: 28px;
}

.xv-page .quote-box {
  max-width: 780px;
  margin: 24px auto 0;
  padding: 22px;
  border: 1px solid #C20D16;
  border-radius: 8px;
  text-align: center;
  font-size: 24px;
  font-weight: 900;
  color: #C20D16 !important;
}

.xv-page .contact-section {
  padding: 52px 0;
}

.xv-page .contact-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 24px;
  align-items: stretch;
}

.xv-page .contact-form,
.xv-page .contact-help-card {
  padding: 32px;
  border-radius: 12px;
}

.xv-page .contact-form {
  background: #FFFFFF;
  border: 1px solid #E5E5E5;
  box-shadow: var(--shadow);
}

.xv-page .contact-form h2,
.xv-page .contact-help-card h2 {
  font-family: var(--font-display);
  text-transform: uppercase;
  margin: 0 0 12px;
  font-size: 34px;
}

.xv-page .contact-form h2,
.xv-page .contact-form p,
.xv-page .contact-form label {
  color: #111111 !important;
}

.xv-page .contact-form label {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-weight: 900;
  margin-bottom: 16px;
}

.xv-page .contact-form label span { color: #C20D16 !important; }

.xv-page .form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 22px;
}

.xv-page .contact-form input,
.xv-page .contact-form select,
.xv-page .contact-form textarea {
  width: 100%;
  min-height: 48px;
  padding: 13px 14px;
  border: 1px solid #DCDCDC;
  border-radius: 6px;
  font: inherit;
}

.xv-page .contact-form textarea {
  min-height: 130px;
  resize: vertical;
}

.xv-page .form-submit {
  width: 70%;
  margin: 8px auto 10px;
  display: flex;
}

.xv-page .secure-note {
  text-align: center;
  font-size: 13px;
}

.xv-page .secure-note i { color: #C20D16 !important; }

.xv-page .contact-help-card {
  background: #050505;
  color: #FFFFFF;
}

.xv-page .contact-help-card h2,
.xv-page .contact-help-card li,
.xv-page .contact-help-card p {
  color: #FFFFFF !important;
}

.xv-page .contact-help-card ul {
  list-style: none;
  margin: 24px 0;
  padding: 0;
}

.xv-page .contact-help-card li {
  position: relative;
  padding-left: 28px;
  margin-bottom: 18px;
  font-size: 17px;
}

.xv-page .contact-help-card li::before {
  content: "\f058";
  font-family: "Font Awesome 7 Free";
  font-weight: 900;
  position: absolute;
  left: 0;
  top: 0;
  color: #C20D16;
}

.xv-page .faq-section {
  padding: 36px 0;
}

.xv-page .faq-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 22px;
}

.xv-page details {
  border: 1px solid #E5E5E5;
  border-radius: 8px;
  background: #FFFFFF;
  padding: 14px 18px;
}

.xv-page summary {
  cursor: pointer;
  font-weight: 900;
  color: #111111 !important;
}

.xv-page details p {
  color: #111111 !important;
  margin-bottom: 0;
}

/* Strong section anchor offsets for fixed desktop header */
.xv-page #services,
.xv-page #growth-systems-audit,
.xv-page #ai-automation,
.xv-page #about,
.xv-page #contact {
  scroll-margin-top: 96px !important;
}

@media (max-width: 1150px) {
  .xv-page .service-row {
    grid-template-columns: 42px 52px 1fr 1fr;
  }
  .xv-page .service-row p,
  .xv-page .service-row .small-btn { grid-column: span 2; }
  .xv-page .icon-card-grid.six { grid-template-columns: repeat(3, 1fr); }
  .xv-page .icon-card-grid.eight { grid-template-columns: repeat(4, 1fr); }
  .xv-page .dark-card-row { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 820px) {
  .xv-page .section-intro { font-size: 15px; }
  .xv-page .service-row { grid-template-columns: 35px 42px 1fr; gap: 12px; }
  .xv-page .service-row p,
  .xv-page .service-row .small-btn { grid-column: 1 / -1; }
  .xv-page .matrix-grid,
  .xv-page .audit-package-grid,
  .xv-page .contact-grid,
  .xv-page .form-grid,
  .xv-page .faq-grid,
  .xv-page .workflow-compare { grid-template-columns: 1fr; }
  .xv-page .icon-card-grid.six,
  .xv-page .icon-card-grid.eight { grid-template-columns: repeat(2, 1fr); }
  .xv-page .audit-scorecards,
  .xv-page .contact-hero-cards { grid-template-columns: 1fr; }
  .xv-page .dark-card-row { grid-template-columns: 1fr 1fr; }
  .xv-page .form-submit { width: 100%; }
  .xv-page .quote-box { font-size: 19px; }
}

@media (max-width: 500px) {
  .xv-page .icon-card-grid.six,
  .xv-page .icon-card-grid.eight,
  .xv-page .dark-card-row { grid-template-columns: 1fr; }
  .xv-page .service-row { grid-template-columns: 32px 1fr; }
  .xv-page .service-row > i { grid-column: 1; }
  .xv-page .service-row > div { grid-column: 2; }
  .xv-page .service-row p,
  .xv-page .service-row .small-btn { grid-column: 1 / -1; }
  .xv-page .price-card strong { font-size: 44px; }
  .xv-page .contact-form,
  .xv-page .contact-help-card { padding: 24px 18px; }
}


/* =========================================================
   DESKTOP SECTION PADDING FIX
   Adds extra breathing room above and below selected long-form
   sections on desktop only. Mobile/tablet spacing is unchanged.
   ========================================================= */
@media (min-width: 821px) {
  .xv-page .diagnosis-section,
  .xv-page .audit-shows-section,
  .xv-page .audit-report-section,
  .xv-page .ai-useless-section,
  .xv-page .what-automate-section,
  .xv-page .why-exists-section {
    padding-top: 72px !important;
    padding-bottom: 72px !important;
  }

  .xv-page .audit-report-section .audit-package-grid {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
  }
}


/* =========================================================
   DESKTOP AUDIT REPORT TWO-BOX + ABOUT ICON UPDATE
   Desktop only: changes the Audit Report pricing area from
   three boxes to two balanced boxes. Also supports the updated
   increasing chart icon in the Not a Generic Marketing Agency section.
   ========================================================= */
@media (min-width: 821px) {
  .xv-page .audit-package-grid.audit-package-grid-two {
    grid-template-columns: 1fr 1fr !important;
    gap: 28px !important;
    align-items: stretch !important;
  }

  .xv-page .audit-combined-card,
  .xv-page .audit-details-card {
    min-height: 100% !important;
  }

  .xv-page .audit-combined-heading {
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    margin-bottom: 18px !important;
  }

  .xv-page .audit-combined-heading i {
    font-size: 44px !important;
    color: #C20D16 !important;
    flex: 0 0 auto !important;
  }

  .xv-page .audit-combined-heading h3 {
    margin: 0 !important;
    font-family: var(--font-display) !important;
    text-transform: uppercase !important;
    color: #111111 !important;
  }

  .xv-page .audit-combined-card h2 {
    margin-top: 24px !important;
  }
}

@media (max-width: 820px) {
  .xv-page .audit-package-grid.audit-package-grid-two {
    grid-template-columns: 1fr !important;
  }

  .xv-page .audit-combined-heading {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    margin-bottom: 16px !important;
  }

  .xv-page .audit-combined-heading i {
    font-size: 38px !important;
    color: #C20D16 !important;
  }
}

/* =========================================================
   MOBILE SERVICES + SECTION PADDING FIX
   Mobile only:
   - Services Built section buttons are full width
   - More right spacing after service icons
   - Adds breathing room above/below selected content sections
   ========================================================= */
@media (max-width: 820px) {
  /* Services Built section: give icons more breathing room before text */
  .xv-page #services .service-row {
    column-gap: 20px !important;
    row-gap: 14px !important;
  }

  .xv-page #services .service-row > i {
    margin-right: 8px !important;
    padding-right: 8px !important;
  }

  /* Services Built section: make all row buttons full width */
  .xv-page #services .service-row .small-btn,
  .xv-page #services .service-row .small-btn.outline {
    display: inline-flex !important;
    width: 100% !important;
    max-width: none !important;
    min-height: 48px !important;
    padding-left: 18px !important;
    padding-right: 18px !important;
    justify-content: center !important;
    text-align: center !important;
  }

  /* Add mobile breathing room to the requested sections */
  .xv-page .diagnosis-section,
  .xv-page .audit-shows-section,
  .xv-page .audit-report-section,
  .xv-page .ai-useless-section,
  .xv-page .what-automate-section,
  .xv-page .why-exists-section {
    padding-top: 46px !important;
    padding-bottom: 46px !important;
  }

  .xv-page .diagnosis-section .section-heading,
  .xv-page .audit-shows-section .section-heading,
  .xv-page .ai-useless-section .section-heading,
  .xv-page .why-exists-section .section-heading {
    margin-bottom: 24px !important;
  }

  .xv-page .audit-report-section .audit-package-grid,
  .xv-page .what-automate-section .split-grid {
    padding-top: 4px !important;
    padding-bottom: 4px !important;
  }
}

@media (max-width: 500px) {
  .xv-page #services .service-row {
    column-gap: 18px !important;
  }

  .xv-page #services .service-row > i {
    margin-right: 10px !important;
    padding-right: 10px !important;
  }

  .xv-page .diagnosis-section,
  .xv-page .audit-shows-section,
  .xv-page .audit-report-section,
  .xv-page .ai-useless-section,
  .xv-page .what-automate-section,
  .xv-page .why-exists-section {
    padding-top: 42px !important;
    padding-bottom: 42px !important;
  }
}

/* =========================================================
   DESKTOP ABOUT INTRO 2/3 + 1/3 GRID FIX
   Desktop only: makes the "Not a Generic Marketing Agency.
   A Growth Systems Business." section use a 2/3 left content area
   and a 1/3 right graph icon area.
   ========================================================= */
@media (min-width: 821px) {
  .xv-page .about-intro {
    display: grid !important;
    grid-template-columns: 2fr 1fr !important;
    gap: 56px !important;
    align-items: center !important;
  }

  .xv-page .about-intro .split-copy {
    grid-column: 1 !important;
    max-width: none !important;
  }

  .xv-page .about-intro .target-visual {
    grid-column: 2 !important;
    width: 100% !important;
    min-height: 260px !important;
    display: grid !important;
    place-items: center !important;
  }

  .xv-page .about-intro .target-visual i {
    font-size: 150px !important;
  }
}

/* Make form field placeholder text normal weight */
.xv-page input::placeholder,
.xv-page textarea::placeholder {
  font-weight: 400 !important;
}

/* Browser support */
.xv-page input::-webkit-input-placeholder,
.xv-page textarea::-webkit-input-placeholder {
  font-weight: 400 !important;
}

.xv-page input::-moz-placeholder,
.xv-page textarea::-moz-placeholder {
  font-weight: 400 !important;
}

.xv-page input,
.xv-page textarea,
.xv-page select {
  font-weight: 400 !important;
}

/* Match the "How did you find us" dropdown to other form fields */
.xv-page select {
  height: 52px !important;
  min-height: 52px !important;
  padding: 0 16px !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  color: #111111 !important;
  border: 1px solid #DADADA !important;
  border-radius: 6px !important;
  background-color: #FFFFFF !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.xv-page select:invalid {
  color: #7A7A7A !important;
}

.xv-page select option {
  color: #111111 !important;
}

.xv-page select option[value=""] {
  color: #7A7A7A !important;
}



/* Fix anchor links being hidden behind fixed desktop header */
@media (min-width: 821px) {
    html {
  scroll-padding-top: 110px !important;
}
  .xv-page section[id],
  .xv-page [id="top"],
  .xv-page [id="services"],
  .xv-page [id="growth-systems-audit"],
  .xv-page [id="audit"],
  .xv-page [id="ai-automation"],
  .xv-page [id="about"],
  .xv-page [id="contact"] {
    scroll-margin-top: 110px !important;
  }
}

/* =========================================================
   BITE & EARN REFERRAL PAGE BUILD PACK
   Uses the same XtraVIRAL system with extra styles for the
   non-client referral page.
   ========================================================= */
.xv-page .referral-hero {
  background:
    radial-gradient(circle at 78% 45%, rgba(194,13,22,.28), transparent 34%),
    linear-gradient(180deg, #000000, #050505);
  padding: 78px 0 76px;
}

.xv-page .referral-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(320px, .92fr);
  gap: 54px;
  align-items: center;
}

.xv-page .referral-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 13px;
  border: 1px solid rgba(194,13,22,.75);
  border-radius: 999px;
  color: #FFFFFF !important;
  font-size: 13px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .4px;
  margin-bottom: 18px;
}

.xv-page .referral-eyebrow i { color: #C20D16 !important; }

.xv-page .referral-hero h1 {
  font-family: var(--font-display);
  font-size: 58px;
  line-height: .95;
  text-transform: uppercase;
  margin: 0 0 24px;
  color: #FFFFFF !important;
}

.xv-page .referral-hero h1 span { color: #C20D16 !important; }

.xv-page .referral-hero p {
  color: #FFFFFF !important;
  font-size: 18px;
  line-height: 1.6;
  max-width: 670px;
  margin: 0 0 28px;
}

.xv-page .referral-hero-actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin: 0 0 22px;
}

.xv-page .referral-proof-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 22px;
}

.xv-page .referral-proof-row span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #FFFFFF !important;
  font-weight: 900;
  font-size: 14px;
}

.xv-page .referral-proof-row i { color: #C20D16 !important; }

.xv-page .reward-preview-card {
  border: 1px solid rgba(194,13,22,.85);
  border-radius: 16px;
  background: rgba(0,0,0,.70);
  box-shadow: 0 0 28px rgba(194,13,22,.22);
  padding: 28px;
}

.xv-page .reward-preview-card h2 {
  font-family: var(--font-display);
  font-size: 34px;
  line-height: 1;
  text-transform: uppercase;
  margin: 0 0 18px;
  color: #FFFFFF !important;
}

.xv-page .reward-preview-card h2 span { color: #C20D16 !important; }

.xv-page .mini-reward-list {
  display: grid;
  gap: 12px;
}

.xv-page .mini-reward-list div {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 14px;
  align-items: center;
  padding: 15px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 10px;
  background: rgba(255,255,255,.05);
}

.xv-page .mini-reward-list i {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #C20D16;
  color: #FFFFFF !important;
  font-size: 22px;
}

.xv-page .mini-reward-list strong {
  display: block;
  color: #FFFFFF !important;
  font-size: 16px;
  line-height: 1.15;
}

.xv-page .mini-reward-list small {
  display: block;
  margin-top: 4px;
  color: rgba(255,255,255,.82) !important;
  line-height: 1.3;
}

.xv-page .bite-section {
  padding: 62px 0;
}

.xv-page .bite-section .section-heading p {
  max-width: 850px;
  margin: 14px auto 0;
  font-size: 17px;
  line-height: 1.55;
  color: #111111 !important;
}

.xv-page .how-steps-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 32px;
}

.xv-page .how-step-card {
  position: relative;
  padding: 28px 22px;
  border: 1px solid #E5E5E5;
  border-radius: 12px;
  background: #FFFFFF;
  box-shadow: 0 8px 22px rgba(0,0,0,.055);
  text-align: center;
}

.xv-page .how-step-number {
  width: 40px;
  height: 40px;
  margin: 0 auto 16px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #C20D16;
  color: #FFFFFF !important;
  font-weight: 900;
}

.xv-page .how-step-card i {
  font-size: 38px;
  color: #C20D16 !important;
  margin-bottom: 16px;
}

.xv-page .how-step-card h3 {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: 22px;
  line-height: 1.08;
  margin: 0 0 12px;
  color: #111111 !important;
}

.xv-page .how-step-card p {
  margin: 0;
  color: #111111 !important;
}

.xv-page .friend-benefit-grid,
.xv-page .who-refer-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-top: 30px;
}

.xv-page .friend-benefit-grid article,
.xv-page .who-refer-grid article {
  padding: 22px 16px;
  border: 1px solid #E5E5E5;
  border-radius: 10px;
  background: #FFFFFF;
  text-align: center;
  box-shadow: 0 8px 20px rgba(0,0,0,.04);
}

.xv-page .friend-benefit-grid i,
.xv-page .who-refer-grid i {
  font-size: 34px;
  color: #C20D16 !important;
  margin-bottom: 16px;
}

.xv-page .friend-benefit-grid h3,
.xv-page .who-refer-grid h3 {
  margin: 0 0 9px;
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: 17px;
  line-height: 1.12;
  color: #111111 !important;
}

.xv-page .friend-benefit-grid p,
.xv-page .who-refer-grid p {
  margin: 0;
  font-size: 13px;
  line-height: 1.4;
  color: #111111 !important;
}

.xv-page .rewards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 32px;
}

.xv-page .reward-card {
  padding: 30px 22px;
  border: 1px solid #E5E5E5;
  border-radius: 14px;
  background: linear-gradient(180deg, #FFFFFF, #F5F5F5);
  box-shadow: var(--shadow);
  text-align: center;
}

.xv-page .reward-graphic {
  width: 92px;
  height: 92px;
  display: grid;
  place-items: center;
  margin: 0 auto 18px;
  border-radius: 50%;
  background: #050505;
  color: #FFFFFF !important;
  border: 3px solid #C20D16;
}

.xv-page .reward-graphic i {
  font-size: 40px;
  color: #FFFFFF !important;
}

.xv-page .reward-card h3 {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: 25px;
  line-height: 1;
  margin: 0 0 12px;
  color: #111111 !important;
}

.xv-page .reward-card h3 span { color: #C20D16 !important; }
.xv-page .reward-card p { color: #111111 !important; margin: 0; }

.xv-page .referral-form-section {
  padding: 68px 0;
}

.xv-page .referral-form-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(300px, .85fr);
  gap: 24px;
  align-items: start;
}

.xv-page .referral-form,
.xv-page .referral-side-card {
  border-radius: 12px;
  padding: 32px;
}

.xv-page .referral-form {
  background: #FFFFFF;
  border: 1px solid #E5E5E5;
  box-shadow: var(--shadow);
}

.xv-page .referral-form h2,
.xv-page .referral-side-card h2 {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: 34px;
  line-height: 1.05;
  margin: 0 0 12px;
}

.xv-page .referral-form p,
.xv-page .referral-form label,
.xv-page .referral-form h2 {
  color: #111111 !important;
}

.xv-page .referral-form label {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-weight: 900;
  margin-bottom: 16px;
}

.xv-page .referral-form input,
.xv-page .referral-form select,
.xv-page .referral-form textarea {
  width: 100%;
  min-height: 52px;
  padding: 13px 14px;
  border: 1px solid #DADADA;
  border-radius: 6px;
  font: inherit;
  font-weight: 400 !important;
  color: #111111 !important;
  background: #FFFFFF;
}

.xv-page .referral-form input::placeholder,
.xv-page .referral-form textarea::placeholder { color: #7A7A7A !important; font-weight: 400 !important; }

.xv-page .referral-form textarea { min-height: 118px; resize: vertical; }

.xv-page .referral-form input[readonly] {
  background: #F4F4F4 !important;
  color: #111111 !important;
  cursor: not-allowed;
}

.xv-page .referral-field-note {
  margin: -6px 0 14px;
  font-size: 12px;
  color: #7A7A7A !important;
  line-height: 1.35;
}

.xv-page .referral-pairs-heading {
  margin: 22px 0 14px;
  padding-top: 18px;
  border-top: 1px solid #E5E5E5;
}

.xv-page .referral-pairs-heading h3 {
  margin: 0;
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: 26px;
  color: #111111 !important;
}

.xv-page .referral-form-grid-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 20px;
}

.xv-page .referral-submit-row {
  margin-top: 10px;
}

.xv-page .referral-submit-row .btn {
  width: 100%;
  min-height: 56px;
}

.xv-page .referral-side-card {
  background: #050505;
  color: #FFFFFF;
  position: sticky;
  top: 112px;
}

.xv-page .referral-side-card h2,
.xv-page .referral-side-card p,
.xv-page .referral-side-card li,
.xv-page .referral-side-card strong {
  color: #FFFFFF !important;
}

.xv-page .referral-side-card ul {
  list-style: none;
  padding: 0;
  margin: 22px 0;
}

.xv-page .referral-side-card li {
  position: relative;
  padding-left: 30px;
  margin-bottom: 16px;
  line-height: 1.4;
}

.xv-page .referral-side-card li::before {
  content: "\f058";
  font-family: "Font Awesome 7 Free";
  font-weight: 900;
  position: absolute;
  left: 0;
  top: 0;
  color: #C20D16;
}

.xv-page .secure-referral-note {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin-top: 14px;
  font-size: 13px;
  line-height: 1.35;
  color: #111111 !important;
}

.xv-page .secure-referral-note i { color: #C20D16 !important; margin-top: 2px; }

.xv-page .legal-mini {
  margin-top: 18px;
  font-size: 12px;
  line-height: 1.45;
  color: rgba(255,255,255,.82) !important;
}

@media (max-width: 1150px) {
  .xv-page .friend-benefit-grid,
  .xv-page .who-refer-grid { grid-template-columns: repeat(2, 1fr); }
  .xv-page .referral-hero-grid { grid-template-columns: 1fr; }
}

@media (max-width: 820px) {
  .xv-page .referral-hero { padding: 46px 0 42px; }
  .xv-page .referral-hero h1 { font-size: 40px; }
  .xv-page .referral-hero p { font-size: 16px; }
  .xv-page .referral-hero-actions .btn { width: 100%; }
  .xv-page .how-steps-grid,
  .xv-page .rewards-grid,
  .xv-page .referral-form-grid,
  .xv-page .referral-form-grid-fields { grid-template-columns: 1fr; }
  .xv-page .bite-section,
  .xv-page .referral-form-section { padding: 46px 0; }
  .xv-page .referral-form,
  .xv-page .referral-side-card { padding: 24px 18px; }
  .xv-page .referral-form h2,
  .xv-page .referral-side-card h2 { font-size: 29px; }
  .xv-page .referral-side-card { position: static; }
  .xv-page .reward-preview-card { padding: 22px 18px; }
}

@media (max-width: 500px) {
  .xv-page .friend-benefit-grid,
  .xv-page .who-refer-grid { grid-template-columns: 1fr; }
  .xv-page .referral-hero h1 { font-size: 34px; }
  .xv-page .reward-card h3 { font-size: 22px; }
}

/* =========================================================
   BITE & EARN LOGO + HERO + STEP NUMBER UPDATES
   - Restores homepage-style header via HTML
   - Adds centered Thankyou text at top of hero
   - Uses supplied reward logos instead of Font Awesome icons
   - Makes How Bite & Earn Works number circles black
   ========================================================= */
.xv-page .referral-thankyou {
  text-align: center !important;
  font-family: var(--font-display) !important;
  font-size: 34px !important;
  line-height: 1 !important;
  text-transform: uppercase !important;
  font-weight: 900 !important;
  color: #FFFFFF !important;
  margin: 0 0 30px !important;
}

.xv-page .mini-reward-list img {
  width: 48px !important;
  height: 48px !important;
  object-fit: contain !important;
  display: block !important;
  border-radius: 6px !important;
  background: #FFFFFF !important;
}

.xv-page .reward-graphic {
  width: 116px !important;
  height: 116px !important;
  border-radius: 12px !important;
  background: #FFFFFF !important;
  border: 3px solid #C20D16 !important;
  padding: 10px !important;
}

.xv-page .reward-graphic img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  display: block !important;
}

.xv-page .how-step-number {
  background: #000000 !important;
  color: #FFFFFF !important;
}

@media (max-width: 820px) {
  .xv-page .referral-thankyou {
    font-size: 29px !important;
    margin-bottom: 22px !important;
  }
}

/* =========================================================
   BITE & EARN REWARD GRAPHIC BORDER FIX
   Removes the red borders around the reward graphics in the
   "Choose One of Three" section only.
   ========================================================= */
.xv-page .rewards-grid .reward-graphic,
.xv-page .reward-card .reward-graphic {
  border: none !important;
}


/* =========================================================
   BITE & EARN MOBILE DESKTOP-STYLE FIX
   Mobile only: makes the referral page keep the same visual
   treatment as the desktop version instead of switching to the
   simplified mobile-specific styling.
   ========================================================= */
@media (max-width: 820px) {
  .xv-page.bite-earn-page .referral-hero {
    padding: 78px 0 76px !important;
  }

  .xv-page.bite-earn-page .referral-thankyou {
    font-size: 34px !important;
    margin: 0 0 30px !important;
  }

  .xv-page.bite-earn-page .referral-hero h1 {
    font-size: 58px !important;
    line-height: .95 !important;
  }

  .xv-page.bite-earn-page .referral-hero p {
    font-size: 18px !important;
    line-height: 1.6 !important;
  }

  .xv-page.bite-earn-page .referral-hero-actions .btn {
    width: auto !important;
  }

  .xv-page.bite-earn-page .reward-preview-card {
    padding: 28px !important;
  }

  .xv-page.bite-earn-page .bite-section,
  .xv-page.bite-earn-page .referral-form-section {
    padding: 62px 0 !important;
  }

  .xv-page.bite-earn-page .how-steps-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 18px !important;
  }

  .xv-page.bite-earn-page .friend-benefit-grid,
  .xv-page.bite-earn-page .who-refer-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 14px !important;
  }

  .xv-page.bite-earn-page .rewards-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 20px !important;
  }

  .xv-page.bite-earn-page .reward-card {
    padding: 30px 22px !important;
  }

  .xv-page.bite-earn-page .reward-card h3 {
    font-size: 25px !important;
  }

  .xv-page.bite-earn-page .referral-form-grid {
    grid-template-columns: minmax(0, 1.5fr) minmax(300px, .85fr) !important;
    gap: 24px !important;
    align-items: start !important;
  }

  .xv-page.bite-earn-page .referral-form-grid-fields {
    grid-template-columns: 1fr 1fr !important;
    gap: 0 20px !important;
  }

  .xv-page.bite-earn-page .referral-form,
  .xv-page.bite-earn-page .referral-side-card {
    padding: 32px !important;
  }

  .xv-page.bite-earn-page .referral-form h2,
  .xv-page.bite-earn-page .referral-side-card h2 {
    font-size: 34px !important;
  }

  .xv-page.bite-earn-page .referral-side-card {
    position: sticky !important;
    top: 112px !important;
  }
}

@media (max-width: 500px) {
  .xv-page.bite-earn-page .referral-hero h1 {
    font-size: 58px !important;
  }

  .xv-page.bite-earn-page .friend-benefit-grid,
  .xv-page.bite-earn-page .who-refer-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }

  .xv-page.bite-earn-page .reward-card h3 {
    font-size: 25px !important;
  }
}

/* =========================================================
   BITE & EARN MOBILE STACK FIX
   Mobile only: stack boxes/cards in the main content sections
   while keeping the same visual styling as desktop.
   ========================================================= */
@media (max-width: 820px) {
  /* How Bite & Earn Works */
  .xv-page.bite-earn-page .how-steps-grid {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }

  /* Why Refer Someone to XtraVIRAL */
  .xv-page.bite-earn-page .friend-benefit-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  /* Choose One of Three */
  .xv-page.bite-earn-page .rewards-grid {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }

  /* Who Should You Refer */
  .xv-page.bite-earn-page .who-refer-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  /* Referral form section */
  .xv-page.bite-earn-page .referral-form-grid {
    grid-template-columns: 1fr !important;
    gap: 22px !important;
  }

  .xv-page.bite-earn-page .referral-form-grid-fields {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
  }

  .xv-page.bite-earn-page .referral-side-card {
    position: static !important;
    top: auto !important;
  }
}

@media (max-width: 500px) {
  .xv-page.bite-earn-page .how-steps-grid,
  .xv-page.bite-earn-page .friend-benefit-grid,
  .xv-page.bite-earn-page .rewards-grid,
  .xv-page.bite-earn-page .who-refer-grid,
  .xv-page.bite-earn-page .referral-form-grid,
  .xv-page.bite-earn-page .referral-form-grid-fields {
    grid-template-columns: 1fr !important;
  }
}

/* =========================================================
   FORM THANK YOU PAGE BUILD PACK
   Uses existing XtraVIRAL header, footer, buttons, colours and
   mobile header behaviour. Scoped to .thank-you-page only.
   ========================================================= */
.thank-you-page .thank-you-hero {
  padding: 96px 0 92px;
  background:
    radial-gradient(circle at 50% 18%, rgba(194,13,22,.30), transparent 28%),
    radial-gradient(circle at 76% 52%, rgba(194,13,22,.18), transparent 34%),
    linear-gradient(180deg, #000000, #050505);
  text-align: center;
}

.thank-you-page .thank-you-hero-inner {
  max-width: 880px;
}

.thank-you-page .thank-you-icon {
  width: 92px;
  height: 92px;
  display: grid;
  place-items: center;
  margin: 0 auto 22px;
  border: 2px solid #C20D16;
  border-radius: 50%;
  box-shadow: 0 0 28px rgba(194,13,22,.38);
}

.thank-you-page .thank-you-icon i {
  font-size: 48px;
  color: #C20D16 !important;
}

.thank-you-page .thank-you-eyebrow {
  margin: 0 0 12px;
  color: #C20D16 !important;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 900;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.thank-you-page .thank-you-hero h1 {
  margin: 0 0 22px;
  color: #FFFFFF !important;
  font-family: var(--font-display);
  font-size: clamp(46px, 6vw, 78px);
  font-weight: 900;
  line-height: .95;
  text-transform: uppercase;
}

.thank-you-page .thank-you-hero h1 span {
  display: block;
  color: #C20D16 !important;
}

.thank-you-page .thank-you-hero p {
  max-width: 720px;
  margin: 0 auto 30px;
  color: #FFFFFF !important;
  font-size: 20px;
  line-height: 1.55;
}

.thank-you-page .thank-you-actions {
  display: flex;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
}

.thank-you-page .thank-you-next-section {
  padding: 62px 0;
}

.thank-you-page .thank-you-next-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 28px;
}

.thank-you-page .thank-you-next-grid article {
  position: relative;
  min-height: 235px;
  padding: 30px 22px 24px;
  border: 1px solid #E5E5E5;
  border-radius: 12px;
  background: #FFFFFF;
  text-align: center;
  box-shadow: 0 8px 22px rgba(0,0,0,.06);
}

.thank-you-page .thank-you-step-number {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  margin: 0 auto 18px;
  background: #000000;
  color: #FFFFFF !important;
  border-radius: 50%;
  font-weight: 900;
}

.thank-you-page .thank-you-next-grid article i {
  font-size: 38px;
  color: #C20D16 !important;
  margin-bottom: 16px;
}

.thank-you-page .thank-you-next-grid h3 {
  margin: 0 0 12px;
  color: #111111 !important;
  font-family: var(--font-display);
  font-size: 22px;
  text-transform: uppercase;
}

.thank-you-page .thank-you-next-grid p {
  margin: 0;
  color: #111111 !important;
  font-size: 15px;
  line-height: 1.45;
}

.thank-you-page .thank-you-reminder-section {
  padding: 64px 0;
}

.thank-you-page .thank-you-reminder-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 44px;
  align-items: center;
}

.thank-you-page .thank-you-reminder-copy h2 {
  margin: 0 0 22px;
  color: #111111 !important;
  font-family: var(--font-display);
  font-size: 42px;
  line-height: 1.03;
  text-transform: uppercase;
}

.thank-you-page .thank-you-reminder-copy h2 span {
  color: #C20D16 !important;
}

.thank-you-page .thank-you-reminder-copy p {
  max-width: 760px;
  margin: 0 0 26px;
  color: #111111 !important;
  font-size: 17px;
  line-height: 1.6;
}

.thank-you-page .thank-you-reminder-card {
  padding: 34px 28px;
  border: 1px solid #C20D16;
  border-radius: 14px;
  background: #050505;
  color: #FFFFFF;
  text-align: center;
  box-shadow: 0 14px 30px rgba(0,0,0,.16);
}

.thank-you-page .thank-you-reminder-card i {
  font-size: 72px;
  color: #C20D16 !important;
  margin-bottom: 20px;
}

.thank-you-page .thank-you-reminder-card h3 {
  margin: 0 0 14px;
  color: #FFFFFF !important;
  font-family: var(--font-display);
  font-size: 28px;
  text-transform: uppercase;
}

.thank-you-page .thank-you-reminder-card p {
  margin: 0;
  color: #FFFFFF !important;
  font-size: 16px;
  line-height: 1.5;
}

@media (max-width: 820px) {
  .thank-you-page .thank-you-hero {
    padding: 58px 0 54px;
  }

  .thank-you-page .thank-you-hero p {
    font-size: 17px;
  }

  .thank-you-page .thank-you-actions .btn {
    width: 100%;
  }

  .thank-you-page .thank-you-next-grid,
  .thank-you-page .thank-you-reminder-grid {
    grid-template-columns: 1fr !important;
  }

  .thank-you-page .thank-you-next-section,
  .thank-you-page .thank-you-reminder-section {
    padding: 46px 0;
  }

  .thank-you-page .thank-you-reminder-copy h2 {
    font-size: 32px;
  }
}

/* =========================================================
   FORM THANK YOU MOBILE DESKTOP-STYLE + STACK FIX
   Mobile only:
   - Keeps the Thank You page visual treatment aligned with desktop
   - Stacks card/box grids vertically for easy mobile reading
   - Scoped to the Thank You page only
   ========================================================= */
@media (max-width: 820px) {
  .xv-page.thank-you-page .thank-you-hero {
    padding: 96px 0 92px !important;
    background:
      radial-gradient(circle at 50% 18%, rgba(194,13,22,.30), transparent 28%),
      radial-gradient(circle at 76% 52%, rgba(194,13,22,.18), transparent 34%),
      linear-gradient(180deg, #000000, #050505) !important;
    text-align: center !important;
  }

  .xv-page.thank-you-page .thank-you-icon {
    width: 92px !important;
    height: 92px !important;
    margin: 0 auto 22px !important;
    border: 2px solid #C20D16 !important;
    border-radius: 50% !important;
    box-shadow: 0 0 28px rgba(194,13,22,.38) !important;
  }

  .xv-page.thank-you-page .thank-you-icon i {
    font-size: 48px !important;
  }

  .xv-page.thank-you-page .thank-you-eyebrow {
    font-size: 20px !important;
  }

  .xv-page.thank-you-page .thank-you-hero h1 {
    font-size: clamp(46px, 12vw, 78px) !important;
    line-height: .95 !important;
  }

  .xv-page.thank-you-page .thank-you-hero p {
    font-size: 20px !important;
    line-height: 1.55 !important;
  }

  .xv-page.thank-you-page .thank-you-actions {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 14px !important;
    flex-wrap: wrap !important;
  }

  .xv-page.thank-you-page .thank-you-actions .btn {
    width: auto !important;
    max-width: none !important;
  }

  .xv-page.thank-you-page .thank-you-next-section,
  .xv-page.thank-you-page .thank-you-reminder-section {
    padding: 62px 0 !important;
  }

  .xv-page.thank-you-page .thank-you-next-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 18px !important;
    margin-top: 28px !important;
  }

  .xv-page.thank-you-page .thank-you-next-grid article {
    min-height: 235px !important;
    padding: 30px 22px 24px !important;
    border: 1px solid #E5E5E5 !important;
    border-radius: 12px !important;
    background: #FFFFFF !important;
    text-align: center !important;
    box-shadow: 0 8px 22px rgba(0,0,0,.06) !important;
  }

  .xv-page.thank-you-page .thank-you-step-number {
    width: 42px !important;
    height: 42px !important;
    margin: 0 auto 18px !important;
    background: #000000 !important;
    color: #FFFFFF !important;
    border-radius: 50% !important;
  }

  .xv-page.thank-you-page .thank-you-next-grid article i {
    font-size: 38px !important;
    color: #C20D16 !important;
    margin-bottom: 16px !important;
  }

  .xv-page.thank-you-page .thank-you-next-grid h3 {
    font-size: 22px !important;
  }

  .xv-page.thank-you-page .thank-you-reminder-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 28px !important;
    align-items: stretch !important;
  }

  .xv-page.thank-you-page .thank-you-reminder-copy h2 {
    font-size: 42px !important;
    line-height: 1.03 !important;
  }

  .xv-page.thank-you-page .thank-you-reminder-copy p {
    font-size: 17px !important;
    line-height: 1.6 !important;
  }

  .xv-page.thank-you-page .thank-you-reminder-card {
    padding: 34px 28px !important;
    border: 1px solid #C20D16 !important;
    border-radius: 14px !important;
    background: #050505 !important;
    color: #FFFFFF !important;
    text-align: center !important;
    box-shadow: 0 14px 30px rgba(0,0,0,.16) !important;
  }

  .xv-page.thank-you-page .thank-you-reminder-card i {
    font-size: 72px !important;
    color: #C20D16 !important;
    margin-bottom: 20px !important;
  }

  .xv-page.thank-you-page .thank-you-reminder-card h3 {
    font-size: 28px !important;
  }
}

@media (max-width: 500px) {
  .xv-page.thank-you-page .thank-you-hero {
    padding: 78px 0 74px !important;
  }

  .xv-page.thank-you-page .thank-you-hero h1 {
    font-size: 46px !important;
  }

  .xv-page.thank-you-page .thank-you-hero p {
    font-size: 18px !important;
  }

  .xv-page.thank-you-page .thank-you-actions .btn {
    width: 100% !important;
  }

  .xv-page.thank-you-page .thank-you-reminder-copy h2 {
    font-size: 34px !important;
  }

  .xv-page.thank-you-page .thank-you-next-grid,
  .xv-page.thank-you-page .thank-you-reminder-grid {
    grid-template-columns: 1fr !important;
  }
}

/* =========================================================
   XTRAVIRAL TERMS OF SERVICE PAGE
   Build pack page based on the supplied Terms of Service design.
   Scoped to .terms-page so it does not affect other pages.
   ========================================================= */
.terms-page {
  background: #FFFFFF;
}

.terms-page .primary-nav i {
  font-size: 10px !important;
  margin-left: 4px !important;
}

.terms-page .site-footer a.active {
  color: #C20D16 !important;
}

.terms-page .terms-hero {
  position: relative;
  overflow: hidden;
  min-height: 430px;
  background:
    radial-gradient(circle at 68% 58%, rgba(194,13,22,.30), transparent 34%),
    radial-gradient(circle at 78% 38%, rgba(194,13,22,.18), transparent 24%),
    linear-gradient(180deg, #000000, #050505) !important;
  border-top: 1px solid rgba(255,255,255,.05);
}

.terms-page .terms-hero::before {
  content: "";
  position: absolute;
  inset: auto -8% -34% 42%;
  height: 74%;
  background:
    repeating-radial-gradient(ellipse at center, rgba(194,13,22,.34) 0 1px, transparent 1px 18px),
    linear-gradient(90deg, transparent, rgba(194,13,22,.22), transparent);
  opacity: .52;
  transform: perspective(600px) rotateX(62deg);
  pointer-events: none;
}

.terms-page .terms-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle, rgba(194,13,22,.70) 1px, transparent 1.5px),
    linear-gradient(90deg, rgba(194,13,22,.10) 1px, transparent 1px),
    linear-gradient(0deg, rgba(194,13,22,.10) 1px, transparent 1px);
  background-size: 56px 56px, 64px 64px, 64px 64px;
  background-position: 0 0, center center, center center;
  opacity: .16;
  pointer-events: none;
}

.terms-page .terms-hero-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(330px, .78fr) minmax(480px, 1.22fr);
  gap: 56px;
  align-items: center;
  min-height: 430px;
  padding: 68px 0;
}

.terms-page .terms-hero-copy h1 {
  margin: 0 0 26px;
  color: #FFFFFF !important;
  font-family: var(--font-display);
  font-size: clamp(54px, 6.6vw, 86px);
  line-height: .92;
  font-weight: 900;
  letter-spacing: .3px;
  text-transform: uppercase;
}

.terms-page .terms-hero-copy p {
  max-width: 500px;
  margin: 0 0 42px;
  color: #FFFFFF !important;
  font-size: 22px;
  line-height: 1.55;
  font-weight: 700;
}

.terms-page .terms-updated {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  color: #FFFFFF !important;
  font-weight: 900;
  font-size: 17px;
}

.terms-page .terms-updated i {
  color: #C20D16 !important;
  font-size: 26px;
}

.terms-page .terms-hero-visual {
  position: relative;
  min-height: 330px;
  display: grid;
  place-items: center;
}

.terms-page .terms-neon-document {
  position: relative;
  width: min(36vw, 250px);
  height: 248px;
  display: grid;
  place-items: center;
  border: 4px solid #ff1a24;
  border-radius: 16px;
  background: rgba(0,0,0,.54);
  color: #ff1a24;
  box-shadow:
    0 0 16px rgba(255,24,36,.95),
    inset 0 0 24px rgba(255,24,36,.26),
    0 26px 54px rgba(194,13,22,.36);
}

.terms-page .terms-neon-document::before {
  content: "";
  position: absolute;
  top: -4px;
  right: -4px;
  width: 78px;
  height: 78px;
  background: linear-gradient(135deg, #000 0 49%, #ff1a24 50% 53%, transparent 54%);
  border-top-right-radius: 16px;
}

.terms-page .terms-neon-document > .fa-file-lines {
  font-size: 148px;
  opacity: .95;
  filter: drop-shadow(0 0 12px rgba(255,24,36,.78));
}

.terms-page .terms-neon-document > .fa-shield-halved {
  position: absolute;
  right: -42px;
  bottom: -24px;
  font-size: 86px;
  color: #ff1a24 !important;
  filter: drop-shadow(0 0 10px rgba(255,24,36,.9));
}

.terms-page .terms-neon-card {
  position: absolute;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 190px;
  min-height: 78px;
  padding: 12px 14px;
  border: 1px solid #C20D16;
  border-radius: 10px;
  background: rgba(0,0,0,.76);
  box-shadow: 0 0 18px rgba(194,13,22,.35), inset 0 0 14px rgba(194,13,22,.12);
}

.terms-page .terms-neon-card i {
  flex: 0 0 auto;
  width: 34px;
  color: #FFFFFF !important;
  font-size: 28px;
  filter: drop-shadow(0 0 7px rgba(194,13,22,.9));
}

.terms-page .terms-neon-card strong,
.terms-page .terms-neon-card small {
  display: block;
  color: #FFFFFF !important;
  line-height: 1.2;
}

.terms-page .terms-neon-card strong {
  font-size: 13px;
  font-weight: 900;
}

.terms-page .terms-neon-card small {
  margin-top: 4px;
  font-size: 11px;
}

.terms-page .terms-neon-card-one { left: 2%; top: 8%; }
.terms-page .terms-neon-card-two { left: 5%; bottom: 11%; }
.terms-page .terms-neon-card-three { right: 0; top: 12%; }
.terms-page .terms-neon-card-four { right: 2%; bottom: 16%; }

.terms-page .terms-summary-section {
  padding: 40px 0;
}

.terms-page .terms-summary-grid {
  display: grid;
  grid-template-columns: 130px minmax(0, 1.35fr) minmax(260px, .9fr);
  gap: 34px;
  align-items: center;
}

.terms-page .terms-summary-icon {
  width: 126px;
  height: 126px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: #FFF4F4;
}

.terms-page .terms-summary-icon i,
.terms-page .terms-summary-agree i {
  color: #C20D16 !important;
}

.terms-page .terms-summary-icon i {
  font-size: 78px;
}

.terms-page .terms-summary-copy {
  padding-right: 34px;
  border-right: 1px solid #DCDCDC;
}

.terms-page .terms-summary-copy h2,
.terms-page .terms-question-card h2 {
  margin: 0 0 12px;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 36px;
  line-height: 1.05;
  text-transform: uppercase;
  color: #111111 !important;
}

.terms-page .terms-summary-copy h2 span,
.terms-page .terms-question-card h2 span {
  color: #C20D16 !important;
}

.terms-page .terms-summary-copy p {
  margin: 0;
  color: #111111 !important;
  font-size: 17px;
  line-height: 1.55;
  font-weight: 700;
}

.terms-page .terms-summary-agree {
  display: grid;
  grid-template-columns: 50px 1fr;
  gap: 16px;
  align-items: center;
}

.terms-page .terms-summary-agree i {
  font-size: 42px;
}

.terms-page .terms-summary-agree p {
  margin: 0;
  color: #111111 !important;
  font-size: 21px;
  line-height: 1.32;
  font-weight: 900;
}

.terms-page .terms-main-section {
  padding: 34px 0 28px;
  background: linear-gradient(180deg, #F2F2F2, #ECECEC) !important;
}

.terms-page .terms-main-grid {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}

.terms-page .terms-sidebar {
  position: sticky;
  top: 112px;
  border-radius: 8px;
  background: #FFFFFF;
  box-shadow: 0 12px 26px rgba(0,0,0,.08);
  overflow: hidden;
}

.terms-page .terms-sidebar h2 {
  margin: 0;
  padding: 23px 20px;
  background: #050505;
  color: #FFFFFF !important;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 22px;
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
}

.terms-page .terms-sidebar nav {
  display: grid;
}

.terms-page .terms-sidebar a {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 12px;
  align-items: center;
  min-height: 64px;
  padding: 14px 20px;
  background: #FFFFFF;
  color: #111111 !important;
  border-bottom: 1px solid #F1F1F1;
  font-weight: 900;
  line-height: 1.25;
}

.terms-page .terms-sidebar a i {
  color: #C20D16 !important;
  font-size: 24px;
  text-align: center;
}

.terms-page .terms-sidebar a:hover,
.terms-page .terms-sidebar a.active {
  background: linear-gradient(135deg, #C20D16, #E01B24);
  color: #FFFFFF !important;
}

.terms-page .terms-sidebar a:hover i,
.terms-page .terms-sidebar a.active i {
  color: #FFFFFF !important;
}

.terms-page .terms-content-card {
  padding: 26px 34px;
  border: 1px solid #E5E5E5;
  border-radius: 9px;
  background: #FFFFFF;
  box-shadow: 0 12px 26px rgba(0,0,0,.08);
}

.terms-page .terms-content-card section {
  padding: 0 0 21px;
  margin: 0 0 20px;
  border-bottom: 1px solid #DCDCDC;
  scroll-margin-top: 120px !important;
}

.terms-page .terms-content-card section:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: 0;
}

.terms-page .terms-content-card h2 {
  margin: 0 0 7px;
  color: #C20D16 !important;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 25px;
  line-height: 1.05;
  letter-spacing: .2px;
  text-transform: uppercase;
}

.terms-page .terms-content-card p {
  margin: 0;
  color: #111111 !important;
  font-size: 16px;
  line-height: 1.45;
  font-weight: 700;
}

.terms-page .terms-key-section {
  padding: 26px 0 16px;
}

.terms-page .terms-key-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 13px;
}

.terms-page .terms-key-grid article {
  min-height: 150px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 15px;
  padding: 22px 16px;
  border: 1px solid #E8E8E8;
  border-radius: 8px;
  background: #FFFFFF;
  text-align: center;
  box-shadow: 0 8px 20px rgba(0,0,0,.045);
}

.terms-page .terms-key-grid i {
  color: #C20D16 !important;
  font-size: 54px;
}

.terms-page .terms-key-grid p {
  margin: 0;
  color: #111111 !important;
  font-size: 14px;
  line-height: 1.25;
  font-weight: 900;
}

.terms-page .terms-question-section {
  padding: 12px 0 40px;
}

.terms-page .terms-question-card {
  display: grid;
  grid-template-columns: 120px 1fr auto;
  gap: 28px;
  align-items: center;
  padding: 28px 44px;
  border-radius: 8px;
  background: linear-gradient(90deg, #FFF4F4, #FFFFFF, #FFF4F4);
  box-shadow: 0 8px 20px rgba(0,0,0,.035);
}

.terms-page .terms-question-icon i {
  color: #C20D16 !important;
  font-size: 86px;
}

.terms-page .terms-question-card p {
  margin: 0;
  max-width: 600px;
  color: #111111 !important;
  font-size: 17px;
  line-height: 1.45;
  font-weight: 700;
}

.terms-page .terms-question-card .btn {
  min-width: 250px;
}

.terms-page .terms-credibility {
  border-top: 1px solid rgba(255,255,255,.08);
}

/* Desktop/tablet design adjustments */
@media (max-width: 1150px) {
  .terms-page .terms-hero-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .terms-page .terms-hero-visual {
    min-height: 360px;
  }

  .terms-page .terms-summary-grid,
  .terms-page .terms-main-grid,
  .terms-page .terms-question-card {
    grid-template-columns: 1fr;
  }

  .terms-page .terms-summary-icon {
    margin: 0 auto;
  }

  .terms-page .terms-summary-copy {
    padding-right: 0;
    border-right: 0;
    text-align: center;
  }

  .terms-page .terms-summary-agree {
    max-width: 520px;
    margin: 0 auto;
  }

  .terms-page .terms-sidebar {
    position: static;
  }

  .terms-page .terms-sidebar nav {
    grid-template-columns: 1fr 1fr;
  }

  .terms-page .terms-key-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .terms-page .terms-question-card {
    text-align: center;
    justify-items: center;
  }
}

/* Mobile: keep desktop-style visual treatment but stack boxes/cards */
@media (max-width: 820px) {
  .terms-page .terms-hero {
    min-height: 0 !important;
  }

  .terms-page .terms-hero-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 26px !important;
    min-height: 0 !important;
    padding: 72px 0 62px !important;
    text-align: left !important;
  }

  .terms-page .terms-hero-copy h1 {
    font-size: clamp(50px, 13vw, 70px) !important;
  }

  .terms-page .terms-hero-copy p {
    font-size: 20px !important;
    margin-bottom: 30px !important;
  }

  .terms-page .terms-hero-visual {
    min-height: 620px !important;
    width: 100% !important;
  }

  .terms-page .terms-neon-document {
    width: min(78vw, 250px) !important;
    height: 248px !important;
  }

  .terms-page .terms-neon-card {
    width: min(86vw, 320px) !important;
    min-height: 78px !important;
  }

  .terms-page .terms-neon-card-one { left: 50% !important; top: 0 !important; transform: translateX(-50%) !important; }
  .terms-page .terms-neon-card-two { left: 50% !important; bottom: 0 !important; transform: translateX(-50%) !important; }
  .terms-page .terms-neon-card-three { left: 50% !important; right: auto !important; top: 100px !important; transform: translateX(-50%) !important; }
  .terms-page .terms-neon-card-four { left: 50% !important; right: auto !important; bottom: 98px !important; transform: translateX(-50%) !important; }

  .terms-page .terms-summary-section,
  .terms-page .terms-main-section,
  .terms-page .terms-key-section,
  .terms-page .terms-question-section {
    padding-top: 46px !important;
    padding-bottom: 46px !important;
  }

  .terms-page .terms-summary-grid,
  .terms-page .terms-main-grid,
  .terms-page .terms-key-grid,
  .terms-page .terms-question-card {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }

  .terms-page .terms-summary-copy h2,
  .terms-page .terms-question-card h2 {
    font-size: 34px !important;
  }

  .terms-page .terms-summary-agree {
    grid-template-columns: 44px 1fr !important;
    text-align: left !important;
  }

  .terms-page .terms-sidebar nav {
    grid-template-columns: 1fr !important;
  }

  .terms-page .terms-sidebar a {
    min-height: 58px !important;
  }

  .terms-page .terms-content-card {
    padding: 24px 18px !important;
  }

  .terms-page .terms-content-card h2 {
    font-size: 22px !important;
  }

  .terms-page .terms-key-grid article {
    min-height: 140px !important;
  }

  .terms-page .terms-question-card {
    padding: 30px 20px !important;
  }

  .terms-page .terms-question-card .btn {
    width: 100% !important;
    min-width: 0 !important;
  }
}

@media (max-width: 500px) {
  .terms-page .terms-hero-grid {
    padding: 56px 0 48px !important;
  }

  .terms-page .terms-hero-visual {
    min-height: 610px !important;
  }

  .terms-page .terms-hero-copy h1 {
    font-size: 46px !important;
  }

  .terms-page .terms-hero-copy p {
    font-size: 17px !important;
  }

  .terms-page .terms-neon-card {
    width: 100% !important;
  }

  .terms-page .terms-summary-copy h2,
  .terms-page .terms-question-card h2 {
    font-size: 30px !important;
  }

  .terms-page .terms-summary-agree {
    grid-template-columns: 1fr !important;
    text-align: center !important;
    justify-items: center !important;
  }

  .terms-page .terms-content-card p {
    font-size: 15px !important;
  }

  .terms-page .terms-key-grid i {
    font-size: 46px !important;
  }
}


/* =========================================================
   TERMS OF SERVICE HERO IMAGE UPDATE
   Uses the generated neon terms/shield hero banner image
   instead of the previous individual icon/card illustration.
   ========================================================= */
.terms-page .terms-hero {
  background:
    linear-gradient(90deg, rgba(0,0,0,.96) 0%, rgba(0,0,0,.90) 27%, rgba(0,0,0,.38) 48%, rgba(0,0,0,.10) 100%),
    url("../assets/images/terms-of-service-hero.png") center center / cover no-repeat,
    #000000 !important;
}

.terms-page .terms-hero::before,
.terms-page .terms-hero::after {
  content: none !important;
  display: none !important;
}

.terms-page .terms-hero-grid {
  grid-template-columns: minmax(330px, .72fr) minmax(520px, 1.28fr) !important;
  gap: 44px !important;
}

.terms-page .terms-hero-visual {
  min-height: 330px !important;
  display: block !important;
}

.terms-page .terms-hero-image {
  width: 100% !important;
  height: 330px !important;
  object-fit: cover !important;
  object-position: center right !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.terms-page .terms-neon-card,
.terms-page .terms-neon-document {
  display: none !important;
}

@media (max-width: 820px) {
  .terms-page .terms-hero {
    background:
      linear-gradient(180deg, rgba(0,0,0,.94) 0%, rgba(0,0,0,.88) 42%, rgba(0,0,0,.50) 100%),
      url("../assets/images/terms-of-service-hero.png") center center / cover no-repeat,
      #000000 !important;
  }

  .terms-page .terms-hero-grid {
    grid-template-columns: 1fr !important;
    gap: 22px !important;
  }

  .terms-page .terms-hero-visual,
  .terms-page .terms-hero-image {
    display: none !important;
  }
}

/* =========================================================
   TERMS HERO DESKTOP HEIGHT FIX
   Desktop only: reduces the Terms of Service hero banner height
   and scales the generated hero image to fit the banner height.
   ========================================================= */
@media (min-width: 821px) {
  .terms-page .terms-hero {
    min-height: 330px !important;
    background:
      linear-gradient(90deg, rgba(0,0,0,.96) 0%, rgba(0,0,0,.90) 27%, rgba(0,0,0,.45) 50%, rgba(0,0,0,.12) 100%),
      url("../assets/images/terms-of-service-hero.png") center right / auto 100% no-repeat,
      #000000 !important;
  }

  .terms-page .terms-hero-grid {
    min-height: 330px !important;
    padding-top: 42px !important;
    padding-bottom: 42px !important;
  }

  .terms-page .terms-hero-visual {
    min-height: 260px !important;
  }

  .terms-page .terms-hero-image {
    height: 260px !important;
  }
}

/* =========================================================
   TERMS HERO CONTAINED IMAGE FIX
   Desktop only: keeps the generated hero artwork inside the
   page container instead of using it as a full-width section
   background image. This prevents the artwork from extending
   outside the desktop content width.
   ========================================================= */
@media (min-width: 821px) {
  .terms-page .terms-hero {
    min-height: 330px !important;
    overflow: hidden !important;
    background: #000000 !important;
  }

  .terms-page .terms-hero-grid {
    display: grid !important;
    grid-template-columns: minmax(330px, 0.72fr) minmax(0, 1.28fr) !important;
    gap: 44px !important;
    align-items: center !important;
    min-height: 330px !important;
    padding-top: 42px !important;
    padding-bottom: 42px !important;
    overflow: hidden !important;
  }

  .terms-page .terms-hero-copy {
    position: relative !important;
    z-index: 2 !important;
  }

  .terms-page .terms-hero-visual {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 260px !important;
    overflow: hidden !important;
  }

  .terms-page .terms-hero-image {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 260px !important;
    object-fit: contain !important;
    object-position: center right !important;
    opacity: 1 !important;
    pointer-events: none !important;
  }
}

/* =========================================================
   TERMS HERO FULL-HEIGHT IMAGE FIX
   Desktop only: keeps the hero artwork inside the page
   container, makes it taller, and stretches it to fill the
   full height of the hero banner.
   ========================================================= */
@media (min-width: 821px) {
  .terms-page .terms-hero {
    min-height: 380px !important;
    overflow: hidden !important;
    background: #000000 !important;
  }

  .terms-page .terms-hero-grid {
    display: grid !important;
    grid-template-columns: minmax(330px, 0.72fr) minmax(0, 1.28fr) !important;
    gap: 44px !important;
    align-items: stretch !important;
    min-height: 380px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    overflow: hidden !important;
  }

  .terms-page .terms-hero-copy {
    position: relative !important;
    z-index: 2 !important;
    align-self: center !important;
    padding-top: 44px !important;
    padding-bottom: 44px !important;
  }

  .terms-page .terms-hero-visual {
    display: flex !important;
    align-items: stretch !important;
    justify-content: flex-end !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 380px !important;
    height: 100% !important;
    overflow: hidden !important;
    align-self: stretch !important;
  }

  .terms-page .terms-hero-image {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 380px !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center right !important;
    opacity: 1 !important;
    pointer-events: none !important;
  }
}


/* =========================================================
   XTRAVIRAL PRIVACY POLICY PAGE
   Build pack page based on the supplied Privacy Policy design.
   Reuses the Terms page legal layout with privacy-specific hero,
   sidebar, key point and CTA refinements.
   Scoped to .privacy-page so it does not affect other pages.
   ========================================================= */
.privacy-page {
  background: #FFFFFF;
}

.privacy-page .site-footer a.active {
  color: #C20D16 !important;
}

.privacy-page .privacy-hero {
  position: relative;
  overflow: hidden;
  min-height: 430px;
  background:
    radial-gradient(circle at 67% 48%, rgba(194,13,22,.34), transparent 30%),
    radial-gradient(circle at 78% 40%, rgba(194,13,22,.18), transparent 24%),
    linear-gradient(180deg, #000000, #050505) !important;
  border-top: 1px solid rgba(255,255,255,.05);
}

.privacy-page .privacy-hero::before {
  content: "";
  position: absolute;
  inset: auto -8% -34% 38%;
  height: 78%;
  background:
    repeating-radial-gradient(ellipse at center, rgba(194,13,22,.34) 0 1px, transparent 1px 18px),
    linear-gradient(90deg, transparent, rgba(194,13,22,.22), transparent);
  opacity: .55;
  transform: perspective(600px) rotateX(62deg);
  pointer-events: none;
}

.privacy-page .privacy-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle, rgba(194,13,22,.70) 1px, transparent 1.5px),
    linear-gradient(90deg, rgba(194,13,22,.10) 1px, transparent 1px),
    linear-gradient(0deg, rgba(194,13,22,.10) 1px, transparent 1px);
  background-size: 56px 56px, 64px 64px, 64px 64px;
  background-position: 0 0, center center, center center;
  opacity: .16;
  pointer-events: none;
}

.privacy-page .privacy-hero-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(330px, .82fr) minmax(520px, 1.18fr);
  gap: 56px;
  align-items: center;
  min-height: 430px;
  padding: 68px 0;
}

.privacy-page .privacy-hero-copy h1 {
  margin: 0 0 26px;
  color: #FFFFFF !important;
  font-family: var(--font-display);
  font-size: clamp(54px, 6.6vw, 82px);
  line-height: .92;
  font-weight: 900;
  letter-spacing: .3px;
  text-transform: uppercase;
}

.privacy-page .privacy-hero-copy p {
  max-width: 520px;
  margin: 0 0 42px;
  color: #FFFFFF !important;
  font-size: 22px;
  line-height: 1.55;
  font-weight: 700;
}

.privacy-page .privacy-updated {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  color: #FFFFFF !important;
  font-weight: 900;
  font-size: 17px;
}

.privacy-page .privacy-updated i {
  color: #C20D16 !important;
  font-size: 26px;
}

.privacy-page .privacy-hero-visual {
  position: relative;
  min-height: 330px;
  display: grid;
  place-items: center;
}

.privacy-page .privacy-neon-shield {
  position: relative;
  width: min(34vw, 250px);
  height: 250px;
  display: grid;
  place-items: center;
  color: #ff1a24;
  filter: drop-shadow(0 0 18px rgba(255,24,36,.72));
}

.privacy-page .privacy-neon-shield::before {
  content: "";
  position: absolute;
  inset: 0;
  clip-path: polygon(50% 0%, 88% 15%, 82% 66%, 50% 100%, 18% 66%, 12% 15%);
  border: 4px solid #ff1a24;
  background: rgba(0,0,0,.42);
  box-shadow:
    0 0 18px rgba(255,24,36,.96),
    inset 0 0 26px rgba(255,24,36,.22),
    0 28px 58px rgba(194,13,22,.36);
}

.privacy-page .privacy-neon-shield::after {
  content: "";
  position: absolute;
  inset: 24px;
  clip-path: polygon(50% 0%, 88% 15%, 82% 66%, 50% 100%, 18% 66%, 12% 15%);
  border: 2px solid rgba(255,26,36,.92);
  opacity: .95;
}

.privacy-page .privacy-neon-shield i {
  position: relative;
  z-index: 2;
  font-size: 86px;
  color: #ff1a24 !important;
  filter: drop-shadow(0 0 10px rgba(255,24,36,.95));
}

.privacy-page .privacy-neon-card {
  position: absolute;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 198px;
  min-height: 78px;
  padding: 12px 14px;
  border: 1px solid #C20D16;
  border-radius: 10px;
  background: rgba(0,0,0,.76);
  box-shadow: 0 0 18px rgba(194,13,22,.35), inset 0 0 14px rgba(194,13,22,.12);
}

.privacy-page .privacy-neon-card i {
  flex: 0 0 auto;
  width: 34px;
  color: #FFFFFF !important;
  font-size: 28px;
  filter: drop-shadow(0 0 7px rgba(194,13,22,.9));
}

.privacy-page .privacy-neon-card strong,
.privacy-page .privacy-neon-card small {
  display: block;
  color: #FFFFFF !important;
  line-height: 1.2;
}

.privacy-page .privacy-neon-card strong {
  font-size: 13px;
  font-weight: 900;
}

.privacy-page .privacy-neon-card small {
  margin-top: 4px;
  font-size: 11px;
}

.privacy-page .privacy-neon-card-one { left: 0; top: 6%; }
.privacy-page .privacy-neon-card-two { left: 2%; bottom: 9%; }
.privacy-page .privacy-neon-card-three { right: 0; top: 7%; }
.privacy-page .privacy-neon-card-four { right: 2%; bottom: 10%; }

.privacy-page .privacy-main-section {
  background: linear-gradient(180deg, #F2F2F2, #ECECEC) !important;
}

.privacy-page .terms-summary-icon {
  background: #FFF4F4;
}

.privacy-page .terms-summary-icon i,
.privacy-page .terms-summary-agree i,
.privacy-page .terms-question-icon i,
.privacy-page .terms-key-grid i {
  color: #C20D16 !important;
}

.privacy-page .terms-sidebar h2 {
  text-transform: uppercase;
}

.privacy-page .terms-content-card h2 {
  color: #C20D16 !important;
}

.privacy-page .privacy-key-grid article {
  align-content: start;
  min-height: 190px;
}

.privacy-page .privacy-key-grid p {
  max-width: 160px;
}

.privacy-page .privacy-key-grid small {
  display: block;
  max-width: 190px;
  margin: -4px auto 0;
  color: #111111 !important;
  font-size: 12px;
  line-height: 1.35;
  font-weight: 700;
}

.privacy-page .privacy-question-card {
  background: linear-gradient(90deg, #FFF4F4, #FFFFFF, #FFF4F4);
}

.privacy-page .privacy-question-card .btn {
  min-width: 250px;
}

/* Privacy responsive behaviour: same desktop-style treatment, stacked content on mobile */
@media (max-width: 1150px) {
  .privacy-page .privacy-hero-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .privacy-page .privacy-hero-visual {
    min-height: 360px;
  }
}

@media (max-width: 820px) {
  .privacy-page .privacy-hero {
    min-height: 0 !important;
  }

  .privacy-page .privacy-hero-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 26px !important;
    min-height: 0 !important;
    padding: 72px 0 62px !important;
    text-align: left !important;
  }

  .privacy-page .privacy-hero-copy h1 {
    font-size: clamp(50px, 13vw, 70px) !important;
  }

  .privacy-page .privacy-hero-copy p {
    font-size: 20px !important;
    margin-bottom: 30px !important;
  }

  .privacy-page .privacy-hero-visual {
    min-height: 620px !important;
    width: 100% !important;
  }

  .privacy-page .privacy-neon-shield {
    width: min(78vw, 250px) !important;
    height: 250px !important;
  }

  .privacy-page .privacy-neon-card {
    width: min(86vw, 320px) !important;
    min-height: 78px !important;
  }

  .privacy-page .privacy-neon-card-one { left: 50% !important; top: 0 !important; transform: translateX(-50%) !important; }
  .privacy-page .privacy-neon-card-two { left: 50% !important; bottom: 0 !important; transform: translateX(-50%) !important; }
  .privacy-page .privacy-neon-card-three { left: 50% !important; right: auto !important; top: 100px !important; transform: translateX(-50%) !important; }
  .privacy-page .privacy-neon-card-four { left: 50% !important; right: auto !important; bottom: 98px !important; transform: translateX(-50%) !important; }

  .privacy-page .terms-summary-section,
  .privacy-page .terms-main-section,
  .privacy-page .terms-key-section,
  .privacy-page .terms-question-section {
    padding-top: 46px !important;
    padding-bottom: 46px !important;
  }

  .privacy-page .terms-summary-grid,
  .privacy-page .terms-main-grid,
  .privacy-page .terms-key-grid,
  .privacy-page .terms-question-card {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }

  .privacy-page .terms-sidebar nav {
    grid-template-columns: 1fr !important;
  }

  .privacy-page .terms-sidebar {
    position: static !important;
  }

  .privacy-page .terms-content-card {
    padding: 24px 18px !important;
  }

  .privacy-page .privacy-question-card {
    padding: 30px 20px !important;
  }

  .privacy-page .privacy-question-card .btn {
    width: 100% !important;
    min-width: 0 !important;
  }

  .privacy-page .privacy-key-grid article {
    min-height: 170px !important;
  }
}

@media (max-width: 500px) {
  .privacy-page .privacy-hero-grid {
    padding: 56px 0 48px !important;
  }

  .privacy-page .privacy-hero-visual {
    min-height: 610px !important;
  }

  .privacy-page .privacy-hero-copy h1 {
    font-size: 46px !important;
  }

  .privacy-page .privacy-hero-copy p {
    font-size: 17px !important;
  }

  .privacy-page .privacy-neon-card {
    width: 100% !important;
  }

  .privacy-page .privacy-key-grid small {
    font-size: 12px !important;
  }
}


/* =========================================================
   Privacy Policy hero image integration
   Uses the generated privacy hero artwork the same way as
   the Terms of Service page hero implementation.
   ========================================================= */
.privacy-page .privacy-hero-image {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
}

@media (min-width: 821px) {
  .privacy-page .privacy-hero {
    min-height: 380px !important;
    overflow: hidden !important;
    background: #000000 !important;
  }

  .privacy-page .privacy-hero::before,
  .privacy-page .privacy-hero::after {
    display: none !important;
  }

  .privacy-page .privacy-hero-grid {
    display: grid !important;
    grid-template-columns: minmax(330px, 0.72fr) minmax(0, 1.28fr) !important;
    gap: 44px !important;
    align-items: stretch !important;
    min-height: 380px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    overflow: hidden !important;
  }

  .privacy-page .privacy-hero-copy {
    position: relative !important;
    z-index: 2 !important;
    align-self: center !important;
    padding-top: 44px !important;
    padding-bottom: 44px !important;
  }

  .privacy-page .privacy-hero-visual {
    display: flex !important;
    align-items: stretch !important;
    justify-content: flex-end !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 380px !important;
    height: 100% !important;
    overflow: hidden !important;
    align-self: stretch !important;
  }

  .privacy-page .privacy-hero-image {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 380px !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center right !important;
    opacity: 1 !important;
    pointer-events: none !important;
  }
}

@media (max-width: 820px) {
  .privacy-page .privacy-hero::before,
  .privacy-page .privacy-hero::after {
    display: none !important;
  }

  .privacy-page .privacy-hero-visual {
    min-height: auto !important;
    width: 100% !important;
    display: block !important;
  }

  .privacy-page .privacy-hero-image {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: 420px !important;
    object-fit: cover !important;
    object-position: center center !important;
  }
}

@media (max-width: 500px) {
  .privacy-page .privacy-hero-visual {
    min-height: auto !important;
  }

  .privacy-page .privacy-hero-image {
    max-height: 320px !important;
  }
}


/* =========================================================
   PRIVACY HERO MATCH TERMS OF SERVICE HERO FIX
   Desktop: positions and sizes the Privacy Policy hero image
   the same way as the Terms of Service hero image.
   Mobile: follows the Terms page pattern by using the image as
   the hero background and hiding the separate visual column.
   ========================================================= */
.privacy-page .privacy-hero {
  background:
    linear-gradient(90deg, rgba(0,0,0,.96) 0%, rgba(0,0,0,.90) 27%, rgba(0,0,0,.38) 48%, rgba(0,0,0,.10) 100%),
    url("../assets/images/privacy-policy-hero.png") center center / cover no-repeat,
    #000000 !important;
}

.privacy-page .privacy-hero::before,
.privacy-page .privacy-hero::after {
  content: none !important;
  display: none !important;
}

.privacy-page .privacy-neon-card,
.privacy-page .privacy-neon-shield {
  display: none !important;
}

.privacy-page .privacy-hero-image {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
}

@media (min-width: 821px) {
  .privacy-page .privacy-hero {
    min-height: 380px !important;
    overflow: hidden !important;
    background: #000000 !important;
  }

  .privacy-page .privacy-hero-grid {
    display: grid !important;
    grid-template-columns: minmax(330px, 0.72fr) minmax(0, 1.28fr) !important;
    gap: 44px !important;
    align-items: stretch !important;
    min-height: 380px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    overflow: hidden !important;
  }

  .privacy-page .privacy-hero-copy {
    position: relative !important;
    z-index: 2 !important;
    align-self: center !important;
    padding-top: 44px !important;
    padding-bottom: 44px !important;
  }

  .privacy-page .privacy-hero-visual {
    display: flex !important;
    align-items: stretch !important;
    justify-content: flex-end !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 380px !important;
    height: 100% !important;
    overflow: hidden !important;
    align-self: stretch !important;
  }

  .privacy-page .privacy-hero-image {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 380px !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center right !important;
    opacity: 1 !important;
    pointer-events: none !important;
  }
}

@media (max-width: 820px) {
  .privacy-page .privacy-hero {
    background:
      linear-gradient(180deg, rgba(0,0,0,.94) 0%, rgba(0,0,0,.88) 42%, rgba(0,0,0,.50) 100%),
      url("../assets/images/privacy-policy-hero.png") center center / cover no-repeat,
      #000000 !important;
  }

  .privacy-page .privacy-hero-visual,
  .privacy-page .privacy-hero-image {
    display: none !important;
  }
}


/* =========================================================
   FINAL CONTACT FORM STANDARD FONT, COLOUR + FIELD FIX
   - Applies the normal XtraVIRAL webpage font and colours to
     the Zoho contact form
   - Makes all placeholder text grey
   - Keeps dropdown placeholder selections grey until a real
     option is selected
   - Makes dropdown fields the same height as other input fields
   ========================================================= */
.xv-page .contact-form {
  font-family: var(--font-body) !important;
  color: #111111 !important;
}

.xv-page .contact-form h2 {
  font-family: var(--font-display) !important;
  color: #111111 !important;
}

.xv-page .contact-form p,
.xv-page .contact-form label,
.xv-page .contact-form .secure-note {
  font-family: var(--font-body) !important;
  color: #111111 !important;
}

.xv-page .contact-form label {
  font-weight: 900 !important;
}

.xv-page .contact-form input,
.xv-page .contact-form select,
.xv-page .contact-form textarea {
  width: 100% !important;
  box-sizing: border-box !important;
  font-family: var(--font-body) !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  line-height: 1.35 !important;
  color: #111111 !important;
  background-color: #FFFFFF !important;
  border: 1px solid #DCDCDC !important;
  border-radius: 6px !important;
  box-shadow: none !important;
}

.xv-page .contact-form input,
.xv-page .contact-form select {
  height: 52px !important;
  min-height: 52px !important;
  padding: 0 14px !important;
}

.xv-page .contact-form textarea {
  min-height: 130px !important;
  padding: 13px 14px !important;
  resize: vertical !important;
}

.xv-page .contact-form input::placeholder,
.xv-page .contact-form textarea::placeholder {
  color: #7A7A7A !important;
  opacity: 1 !important;
  font-weight: 400 !important;
}

.xv-page .contact-form input::-webkit-input-placeholder,
.xv-page .contact-form textarea::-webkit-input-placeholder {
  color: #7A7A7A !important;
  opacity: 1 !important;
  font-weight: 400 !important;
}

.xv-page .contact-form input::-moz-placeholder,
.xv-page .contact-form textarea::-moz-placeholder {
  color: #7A7A7A !important;
  opacity: 1 !important;
  font-weight: 400 !important;
}

/* Dropdown blank / placeholder state */
.xv-page .contact-form select.placeholder-select,
.xv-page .contact-form select:has(option[value="-None-"]:checked),
.xv-page .contact-form select:has(option[value=""]:checked) {
  color: #7A7A7A !important;
  font-weight: 400 !important;
}

/* Actual dropdown option text after a real option is selected */
.xv-page .contact-form select option {
  color: #111111 !important;
  background: #FFFFFF !important;
  font-family: var(--font-body) !important;
  font-weight: 400 !important;
}

.xv-page .contact-form select option[value="-None-"],
.xv-page .contact-form select option[value=""] {
  color: #7A7A7A !important;
}

.xv-page .contact-form .btn,
.xv-page .contact-form .btn * {
  font-family: var(--font-body) !important;
  font-weight: 900 !important;
}

.xv-page .contact-form .btn-primary,
.xv-page .contact-form .btn-primary * {
  color: #FFFFFF !important;
}

.xv-page .contact-form .secure-note i {
  color: #C20D16 !important;
}


/* =========================================================
   CONTACT FORM HEADING STYLE FIX
   Makes the Zoho Forms heading "Tell Us What You Need Help With..."
   use the same display font, uppercase treatment, size, weight and
   spacing as the "And We Can..." heading.
   ========================================================= */
.xv-page .contact-form-title {
  font-family: var(--font-display) !important;
  text-transform: uppercase !important;
  margin: 0 0 12px !important;
  font-size: 34px !important;
  line-height: 1.05 !important;
  font-weight: 900 !important;
  color: #111111 !important;
}

@media (max-width: 820px) {
  .xv-page .contact-form-title {
    font-size: 29px !important;
  }
}


/* =========================================================
   CONTACT FORM HEADING VERTICAL ALIGNMENT FIX
   Aligns the Zoho Forms heading with the top heading inside
   the right-hand "And We Can..." contact help card.
   ========================================================= */
@media (min-width: 821px) {
  .xv-page .contact-zoho-form-wrapper {
    padding-top: 32px !important;
  }
}

@media (max-width: 820px) {
  .xv-page .contact-zoho-form-wrapper {
    padding-top: 0 !important;
  }
}


/* =========================================================
   ZOHO FORMS GREY FOOTER / BOTTOM LOADING SLIVER FIX
   Removes the temporary grey bottom area from the embedded
   Zoho Forms iframe in the Home page contact section.
   ========================================================= */
.xv-page #zf_div_6N7ufCSDPtOMi5GHUo6t23Hgb4wcGU3T5BLcD-q4L34 {
  overflow: hidden !important;
  background: #FFFFFF !important;
}

.xv-page #zf_div_6N7ufCSDPtOMi5GHUo6t23Hgb4wcGU3T5BLcD-q4L34 iframe {
  display: block !important;
  width: 100% !important;
  border: 0 !important;
  background: #FFFFFF !important;
  margin-bottom: -8px !important;
}


/* =========================================================
   BITE & EARN ZOHO FORM HEADING + LOADING GREY AREA FIX
   - Makes "Refer Someone Now" use the same display font,
     uppercase treatment, size, weight and spacing as
     "Why do a referral?"
   - Aligns both headings at the top of their cards on desktop
   - Prevents the Zoho iframe from showing a large temporary
     grey bottom area while its height is being resized
   ========================================================= */
.xv-page.bite-earn-page .zoho-referral-form-wrapper,
.xv-page.bite-earn-page .referral-side-card {
  padding: 32px !important;
  border-radius: 12px !important;
}

.xv-page.bite-earn-page .zoho-referral-form-wrapper {
  background: #FFFFFF !important;
  border: 1px solid #E5E5E5 !important;
  box-shadow: var(--shadow) !important;
  overflow: hidden !important;
  align-self: start !important;
}

.xv-page.bite-earn-page .referral-form-grid {
  align-items: start !important;
}

.xv-page.bite-earn-page .zoho-referral-form-wrapper h2,
.xv-page.bite-earn-page .referral-side-card h2 {
  font-family: var(--font-display) !important;
  text-transform: uppercase !important;
  font-size: 34px !important;
  line-height: 1.05 !important;
  font-weight: 900 !important;
  margin: 0 0 12px !important;
}

.xv-page.bite-earn-page .zoho-referral-form-wrapper h2 {
  color: #111111 !important;
}

.xv-page.bite-earn-page .referral-side-card h2 {
  color: #FFFFFF !important;
}

.xv-page.bite-earn-page .zoho-referral-form-wrapper p {
  color: #111111 !important;
  font-family: var(--font-body) !important;
  font-size: 16px !important;
  line-height: 1.5 !important;
  font-weight: 700 !important;
  margin: 0 0 20px !important;
}

.xv-page.bite-earn-page #zf_div_W5b3k03nCA4Pft4jk82YWy2UDY5Fnis3eAcNKW6GXz8 {
  background: #FFFFFF !important;
  overflow: hidden !important;
}

.xv-page.bite-earn-page #zf_div_W5b3k03nCA4Pft4jk82YWy2UDY5Fnis3eAcNKW6GXz8 iframe {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  border: 0 !important;
  background: #FFFFFF !important;
  overflow: hidden !important;
  margin: 0 0 -8px !important;
}

@media (max-width: 820px) {
  .xv-page.bite-earn-page .zoho-referral-form-wrapper,
  .xv-page.bite-earn-page .referral-side-card {
    padding: 32px !important;
  }

  .xv-page.bite-earn-page .zoho-referral-form-wrapper h2,
  .xv-page.bite-earn-page .referral-side-card h2 {
    font-size: 34px !important;
  }
}

@media (max-width: 500px) {
  .xv-page.bite-earn-page .zoho-referral-form-wrapper,
  .xv-page.bite-earn-page .referral-side-card {
    padding: 24px 18px !important;
  }

  .xv-page.bite-earn-page .zoho-referral-form-wrapper h2,
  .xv-page.bite-earn-page .referral-side-card h2 {
    font-size: 29px !important;
  }
}


/* =========================================================
   BITE & EARN ZOHO IFRAME BOTTOM SPACING FIX
   Crops the extra Zoho iframe footer/sliver that appears after
   the embedded form finishes resizing.
   ========================================================= */
.xv-page.bite-earn-page .zoho-referral-form-wrapper {
  position: relative !important;
  overflow: hidden !important;
  padding-bottom: 18px !important;
}

.xv-page.bite-earn-page .zoho-referral-form-wrapper iframe {
  display: block !important;
  width: 100% !important;
  border: 0 !important;
  background: #FFFFFF !important;
  overflow: hidden !important;
  margin: 0 !important;
}

.xv-page.bite-earn-page .zoho-referral-form-wrapper::after {
  content: "" !important;
  position: absolute !important;
  left: 32px !important;
  right: 32px !important;
  bottom: 24px !important;
  height: 34px !important;
  background: #FFFFFF !important;
  z-index: 5 !important;
  pointer-events: none !important;
}

@media (max-width: 500px) {
  .xv-page.bite-earn-page .zoho-referral-form-wrapper::after {
    left: 18px !important;
    right: 18px !important;
    bottom: 18px !important;
    height: 28px !important;
  }
}