/*
 * www.gen4systems.com — shared stylesheet (theme v1, "classic" look)
 * Recreates the WordPress site (Hello Elementor + Elementor Pro, 2020 design), a re-branded copy of
 * www.benefitzone.com: same layout, Gen4 colours from the Elementor kit (post-1196). Pages must not add their own CSS.
 * Cached for a year: to change anything, copy to theme.v2.css and update the assets partial (then sync).
 */

/* ---- Tokens ------------------------------------------------------------- */
:root {
  --bz-orange: #416d9e;      /* Gen4 blue: buttons, header Request a Demo, footer icons (name kept from the Benefit Zone stylesheet) */
  --bz-orange-hover: #2f538e; /* button hover */
  --bz-sub: #537fae;         /* every h3 (Elementor kit), e.g. the sub-headings and footer title */
  --bz-link: #54595f;        /* links (Elementor kit) */
  --bz-text: #666666;        /* body text (Elementor kit) */
  --bz-dark: #333333;        /* home hero heading */
  --bz-nav: #54595f;         /* menu, captions */
  --bz-muted: #7a7a7a;       /* footer text, header Login */
  --bz-bg: #ffffff;
  --bz-bg-soft: #f7f7f8;     /* grey bands, footer */
  --bz-line: #dddddd;        /* header bottom border */
  --bz-border: #d1d6dc;      /* form fields */
  --bz-error: #b42318;
  --bz-success: #1d6b3a;
  --bz-success-bg: #ecf8f0;
  --bz-max: 1140px;          /* Elementor boxed width */
  --bz-col: 10px;            /* Elementor column padding (default gap) */
  --bz-font: Arial, Helvetica, sans-serif; /* the Elementor kit's body font; Roboto is loaded by WordPress but never used */
}

/* ---- Base --------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bz-bg);
  color: var(--bz-text);
  font: 400 14px/21px var(--bz-font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-wrap: break-word;
}
img { max-width: 100%; height: auto; display: block; border: 0; }

/* Hello Elementor: headings weight 500, colour inherited. Elementor heading widgets: no margin, line-height 1
   (h3 1.2 from the kit). Sizes from the kit: h1 46, h2 26, h3 18, h4 16, h5 15. */
h1, h2, h3, h4, h5 { font-weight: 500; color: inherit; margin: 0; line-height: 1; }
h1 { font-size: 46px; }
h2 { font-size: 26px; }
h3 { font-size: 18px; line-height: 1.2; }
h4 { font-size: 16px; }
h5 { font-size: 15px; }
p, ul, ol { margin: 0 0 13px; }
ul, ol { padding-left: 1.4rem; }

a { color: var(--bz-link); text-decoration: none; }
a:hover, a:focus { color: #333333; }
:focus-visible { outline: 3px solid #0270e0; outline-offset: 2px; }

.skip-link { position: absolute; left: 0.5rem; top: -3rem; background: var(--bz-bg); padding: 0.5rem 1rem; z-index: 100; }
.skip-link:focus { top: 0.5rem; }

.wrap { max-width: var(--bz-max); margin: 0 auto; padding: 0 var(--bz-col); }

/* ---- Buttons (Elementor button widget, size sm) -------------------------- */
.button {
  display: inline-block;
  background: var(--bz-orange);
  color: #ffffff;
  border: 0;
  border-radius: 3px;
  padding: 12px 24px;
  font: 400 15px/1 var(--bz-font);
  text-align: center;
  cursor: pointer;
  transition: all 0.3s;
}
.button:hover, .button:focus { color: #ffffff; background: var(--bz-orange-hover); }
.button[disabled] { opacity: 0.6; cursor: wait; }

/* ---- Header (Elementor header template 1314) ----------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--bz-bg);
  border-bottom: 1px solid var(--bz-line);
}
.site-header__inner { display: flex; align-items: center; min-height: 60px; padding: var(--bz-col); }
/* The logo sits in a column 16.083% of the window wide (45px left margin, 10px padding each side), so it
   shrinks below about 1400px, as on WordPress. */
.site-header__logo { flex: 0 0 auto; margin-left: 45px; width: calc(16.083vw - 65px); max-width: 150px; min-width: 90px; }
.site-header__logo img { width: 150px; }
.site-header__right { flex: 1 1 auto; display: flex; align-items: center; justify-content: flex-end; }

.nav-toggle {
  display: none;
  margin-left: auto;
  padding: 0.25em;
  background: #ffffff;
  border: 0;
  border-radius: 3px;
  color: #000000;
  cursor: pointer;
}
.nav-toggle svg { display: block; width: 20px; height: 20px; fill: currentColor; }
.nav-toggle .nav-toggle__close { display: none; }
.site-header.is-open .nav-toggle__open { display: none; }
.site-header.is-open .nav-toggle__close { display: block; }

.site-nav ul { list-style: none; margin: 0; padding: 0; }
.site-nav a, .site-nav__parent { display: block; color: var(--bz-nav); white-space: nowrap; }
.site-nav__parent { width: 100%; background: none; border: 0; font-family: inherit; text-align: left; cursor: default; }
.site-nav__menu { display: flex; align-items: center; }
.site-nav__menu > li { position: relative; }
.site-nav__menu > li > a, .site-nav__menu > li > .site-nav__parent {
  position: relative;
  padding: 13px 26px;
  font-size: 12px;
  line-height: 20px;
  text-transform: uppercase;
}
/* Underline pointer, fading in on hover (Elementor "underline" + "fade") */
.site-nav__menu > li > a::after, .site-nav__parent::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 3px;
  background: #3f444b;
  opacity: 0;
  transition: opacity 0.3s;
}
.site-nav__menu > li:hover > a::after, .site-nav__menu > li:hover > .site-nav__parent::after, .site-nav__menu > li:focus-within > a::after, .site-nav__menu > li:focus-within > .site-nav__parent::after { opacity: 1; }
.site-nav__menu > li > a[aria-current="page"]::after { opacity: 1; }
.site-nav__sub {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 100%;
  background: #f1f1f1;
  z-index: 60;
}
.site-nav__menu > li:hover > .site-nav__sub, .site-nav__menu > li:focus-within > .site-nav__sub { display: block; }
.site-nav__sub a { padding: 8px 10px; font-size: 14px; line-height: 20px; }
.site-nav__sub a:hover, .site-nav__sub a:focus { background: #b6b6b6; color: var(--bz-nav); }
.site-nav__phone { display: none; } /* Talk to Us / Login / Request a Demo repeated in the phone menu */
.nav-label--phone { display: none; } /* WordPress labels this item differently in the phone menu */

.site-header__actions { display: flex; align-items: center; }
.header-button {
  display: inline-block;
  white-space: nowrap;
  margin-left: 22px;
  padding: 0 10px;
  border: 1px solid #000000;
  background: #ffffff;
  color: var(--bz-nav);
  font-size: 12px;
  line-height: 40px;
  text-transform: uppercase;
}
.header-button:hover, .header-button:focus { color: var(--bz-nav); }
.header-login { padding: 0 40px 0 120px; color: var(--bz-muted); font-size: 12px; line-height: 12px; }
.header-login:hover, .header-login:focus { color: var(--bz-muted); }
.header-demo { display: inline-block; white-space: nowrap; margin-right: 45px; padding: 0 10px 0 9px; background: var(--bz-orange); color: #ffffff; font-size: 12px; line-height: 40px; }
.header-demo:hover, .header-demo:focus { color: #ffffff; background: var(--bz-orange-hover); }
/* Between the tablet breakpoint and ~1200px the full menu is tight: give up some of Login's spacing. */
@media (min-width: 1025px) and (max-width: 1200px) {
  .site-nav__menu > li > a, .site-nav__menu > li > .site-nav__parent { padding-left: 18px; padding-right: 18px; }
  .header-login { padding: 0 24px 0 40px; }
}

/* Tablet (Elementor 768–1024): the menu folds into a burger; the buttons stay. */
@media (max-width: 1024px) {
  .js .nav-toggle { display: block; }
  .js .site-nav { display: none; position: absolute; top: 100%; left: 0; right: 0; background: #f1f1f1; }
  .js .site-header.is-open .site-nav { display: block; }
  .site-nav__menu { display: block; }
  .site-nav__menu > li > a, .site-nav__menu > li > .site-nav__parent { padding: 10px 20px; font-size: 14px; }
  .site-nav__menu > li > a::after, .site-nav__parent::after { display: none; }
  .site-nav__sub { display: block; position: static; background: none; }
  .site-nav__sub a { padding: 8px 20px 8px 40px; }
  .site-header__actions { order: -1; }
}
/* Phone (Elementor up to 767): logo + burger only; the black drop-down holds everything. */
@media (max-width: 767px) {
  .site-header__logo { margin-left: 0; }
  .site-header__actions { display: none; }
  .js .site-nav { background: #000000; }
  .site-nav a, .site-nav__parent { color: #ffffff; }
  .site-nav__menu > li > a, .site-nav__parent { text-transform: uppercase; }
  .site-nav__sub a:hover, .site-nav__sub a:focus, .site-nav a:hover, .site-nav a:focus { background: #333333; color: #ffffff; }
  .site-nav__phone { display: block; }
  .nav-label--wide { display: none; }
  .nav-label--phone { display: inline; }
}

/* ---- Footer (Elementor footer template 1337) ----------------------------- */
.site-footer { position: relative; background: var(--bz-bg-soft); }
.site-footer__inner { max-width: var(--bz-max); margin: 0 auto; padding-top: 60px; } /* column padding + 30px spacer + widget gap */
.site-footer__title { color: var(--bz-sub); margin: 0; padding: var(--bz-col) var(--bz-col) 20px; font-size: 18px; line-height: 1.2; font-weight: 500; } /* an h3 in WordPress */
.site-footer__contact { display: flex; flex-wrap: wrap; font-style: normal; }
.site-footer__col { padding: var(--bz-col); }
.site-footer__col--address { flex: 0 0 25%; }
.site-footer__col--reach { flex: 0 0 43%; }
.site-footer__list { list-style: none; margin: 0; padding: 0; }
.site-footer__list li { display: flex; align-items: flex-start; margin: 0; }
.site-footer__list li + li { margin-top: 10px; }
.site-footer__list svg { flex: 0 0 auto; width: 21px; height: 21px; fill: var(--bz-orange); }
.site-footer__list span, .site-footer__list a { padding-left: 5px; color: var(--bz-muted); }
.site-footer__list a { display: flex; align-items: flex-start; padding: 0; }
.site-footer__list a span { padding-left: 5px; }
.site-footer__list a:hover span, .site-footer__list a:focus span { color: var(--bz-link); }
.site-footer__legal { max-width: var(--bz-max); margin: 0 auto; padding: 17px var(--bz-col) var(--bz-col); color: var(--bz-muted); }
.site-footer__legal p { margin: 0 0 13px; }
@media (max-width: 767px) {
  .site-footer__col--address, .site-footer__col--reach { flex-basis: 100%; }
}

/* Curved edge (Elementor shape divider "curve"): white SVG path over the coloured band. */
.curve { position: absolute; left: 0; width: 100%; overflow: hidden; line-height: 0; pointer-events: none; }
.curve svg { display: block; position: relative; left: 50%; width: calc(100% + 1.3px); transform: translateX(-50%); fill: #ffffff; }
.curve--top { top: -1px; }
.curve--top svg { height: 49px; }
.curve--bottom { bottom: -1px; transform: rotate(180deg); }
.curve--bottom svg { height: 35px; }

/* ---- Home hero (centred text over a photo, curved bottom) ---------------- */
.hero-home { position: relative; overflow: hidden; background: #cccaca; }
.hero-home__bg { position: absolute; top: 50%; left: 50%; width: 1100px; max-width: none; transform: translate(-50%, -50%); opacity: 0.87; }
.hero-home__inner { position: relative; z-index: 1; max-width: 400px; min-height: 527px; margin: 0 auto; padding: var(--bz-col); text-align: center; }
.hero-home h1 { color: var(--bz-dark); margin-bottom: 20px; }
.hero-home p { margin: 4px 0 33px; }
@media (max-width: 1024px) {
  /* Elementor repeats the photo on tablets and phones */
  .hero-home__bg { display: none; }
  .hero-home { background: #cccaca url("/assets/img/home/team-agency-management.webp") center center repeat; }
}

/* ---- Product hero (grey band, text left, screenshot hanging below) ------- */
/* Band: 82px spacer + widget gap + column paddings above the heading; a 134px spacer section below. */
.hero { position: relative; background: var(--bz-bg-soft); padding-top: 112px; margin-bottom: 154px; }
.hero__inner { max-width: var(--bz-max); margin: 0 auto; display: flex; }
.hero__text { flex: 0 0 50%; padding: var(--bz-col) var(--bz-col) 126px; }
.hero__text h1 { line-height: 52px; letter-spacing: 0.9px; margin-bottom: 20px; }
.hero__text p { margin-bottom: 33px; }
.hero__media { flex: 0 0 50%; position: relative; padding: var(--bz-col); }
.hero__media img { position: absolute; top: 0; left: var(--bz-col); width: 708px; max-width: none; border-radius: 6px; }
/* hero-w-N: the big screenshot's width, set per page in Elementor */
.hero__media .hero-w-556 { width: 556px; } .hero__media .hero-w-570 { width: 570px; } .hero__media .hero-w-591 { width: 591px; }
.hero__media .hero-w-610 { width: 610px; } .hero__media .hero-w-612 { width: 612px; } .hero__media .hero-w-708 { width: 708px; }
.hero__media .hero-w-722 { width: 722px; } .hero__media .hero-w-835 { width: 835px; } .hero__media .hero-w-914 { width: 914px; }
.hero__media .hero-w-932 { width: 932px; }
.hero__text .mb-30 { margin-bottom: 30px; }
.hero__text .mt-10 { margin-top: 10px; }
.hero__text .mt-29 { margin-top: 29px; }
.hero__media .radius-10 { border-radius: 10px; }
.hero__media .lift-32 { top: -32px; }
.hero__phone .radius-6 { border-radius: 6px; }
.hero__phone { display: none; }
@media (max-width: 1024px) {
  .hero__media img[class*="hero-w-"] { width: 100%; }
}
@media (max-width: 767px) {
  .hero { margin-bottom: 0; }
  .hero__inner { display: block; }
  .hero__text { padding-bottom: 40px; }
  .hero__media { display: none; }
  .hero__phone { display: block; padding: 20px var(--bz-col); }
  .hero__phone img { margin: 0 auto; }
}

/* ---- Image tiles (four linked pictures with captions) -------------------- */
.tiles { max-width: var(--bz-max); margin: 0 auto 70px; display: flex; flex-wrap: wrap; }
.tiles__item { display: block; flex: 0 0 25%; padding: var(--bz-col); text-align: center; color: var(--bz-nav); }
.tiles__item:hover, .tiles__item:focus { color: var(--bz-nav); }
.tiles__item img { opacity: 0.96; margin: 0 auto; }
.tiles__caption { display: block; margin-top: 9px; font-size: 14px; }
@media (max-width: 767px) { .tiles__item { flex-basis: 100%; } }

/* ---- Feature sections: text column + picture column ---------------------- */
/* Elementor: two 50% columns. The text column holds an h2, a 50px spacer, then h3 + paragraph pairs.
   The picture column has a faded photo as its background and a screenshot on top, pushed down. */
.feature { max-width: var(--bz-max); margin: 0 auto; display: flex; }
/* gap-N: the N px spacer section WordPress puts after the section (plus its column padding) */
.gap-50 { padding-bottom: 70px; } .gap-108 { padding-bottom: 128px; }
.feature__text, .feature__media { flex: 0 0 50%; padding: var(--bz-col); }
.feature__text h2 { margin-bottom: 90px; }
.feature__text h3 { color: var(--bz-sub); margin-bottom: 5px; }
.feature__text p { margin-bottom: 33px; }
.feature__text > :last-child { margin-bottom: 13px; }
.feature__media { position: relative; margin: 0; }
.feature__back { position: absolute; top: 50%; transform: translateY(-50%); max-width: none; }
.feature--image-left .feature__back { left: 0; }
.feature--image-right .feature__back { right: 0; }
.feature__front { position: relative; border-radius: 6px; }
.feature--image-left .feature__front { margin-left: auto; }
.feature--image-right .feature__front { margin-right: auto; }
.feature__front.shadow { box-shadow: 0 0 6px 1px rgba(0, 0, 0, 0.5); }
.shadow-6-0 { box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.5); }
.shadow-10-0 { box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.5); }
.shadow-10-1 { box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.5); }
/* Per-section settings, as set in Elementor: */
.back-80 { width: 80%; } .back-87 { width: 87%; }
.fade-36 { opacity: 0.36; } .fade-43 { opacity: 0.43; } .fade-50 { opacity: 0.5; }
/* front-N: screenshot N px wide. drop-N: screenshot starts N px below the top of its column (spacers, widget gaps
   and padding added up); the column itself has 10px padding, hence N - 10. */
.front-175 { width: 175px; } .front-250 { width: 250px; } .front-253 { width: 253px; }
.front-264 { width: 264px; } .front-275 { width: 275px; } .front-286 { width: 286px; }
.front-292 { width: 292px; } .front-298 { width: 298px; } .front-300 { width: 300px; }
.front-301 { width: 301px; } .front-303 { width: 303px; } .front-343 { width: 343px; }
.front-350 { width: 350px; } .front-352 { width: 352px; } .front-354 { width: 354px; }
.front-377 { width: 377px; } .front-388 { width: 388px; } .front-391 { width: 391px; }
.front-400 { width: 400px; } .front-402 { width: 402px; } .front-450 { width: 450px; }
.drop-89 { margin-top: 79px; } .drop-112 { margin-top: 102px; } .drop-118 { margin-top: 108px; }
.drop-134 { margin-top: 124px; } .drop-138 { margin-top: 128px; } .drop-143 { margin-top: 133px; }
.drop-154 { margin-top: 144px; } .drop-213 { margin-top: 203px; } .drop-224 { margin-top: 214px; }
.drop-226 { margin-top: 216px; } .drop-234 { margin-top: 224px; } .drop-237 { margin-top: 227px; }
.drop-242 { margin-top: 232px; } .drop-259 { margin-top: 249px; } .drop-263 { margin-top: 253px; }
.drop-312 { margin-top: 302px; } .drop-320 { margin-top: 310px; } .drop-322 { margin-top: 312px; }
.drop-327 { margin-top: 317px; }
.back-bottom { top: auto; bottom: 0; transform: none; }
@media (max-width: 767px) {
  .feature { display: block; padding-bottom: 40px; }
  .feature__media { min-height: 0; }
  .feature__text h2 { margin-bottom: 40px; }
  .feature__front[class*="drop-"] { margin-top: 60px; }
  .feature__front { margin-left: auto; margin-right: auto; }
}

/* ---- Text-only section and centred call to action ------------------------ */
.text-section { max-width: var(--bz-max); margin: 0 auto; padding: 50px var(--bz-col); }
.cta { max-width: var(--bz-max); margin: 0 auto; padding: 50px var(--bz-col); text-align: center; }
.cta h2, .cta h3 { margin-bottom: 70px; }

/* ---- Banner (Why Benefit Zone, Request a Demo): centred text over a faded full-width photo ---- */
.banner { position: relative; overflow: hidden; background: rgba(247, 247, 248, 0.5); text-align: center; }
.banner__bg { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: top center; opacity: 0.4; }
.banner__inner { position: relative; max-width: var(--bz-max); margin: 0 auto; padding: 148px var(--bz-col) 83px; } /* spacers 128 / 73 + gaps */
.banner h1 { line-height: 1.3; margin-bottom: -2px; }
.banner .banner__lead { font-size: 16px; line-height: 1.6; padding: 19px 0 22px; margin: 0 0 20px; }
.banner--demo { background: none; }
.banner--demo .banner__inner { padding: 132px var(--bz-col) 129px; } /* spacers 102 / 109 + gaps */
.banner--demo h1 { line-height: 1.2; margin-bottom: 17px; }
.banner--demo .banner__lead { font-size: 18px; line-height: 1.5; padding: 0; margin: 0; }

/* ---- Grey title band (Contact Us, Pricing) ---- */
.band { background: var(--bz-bg-soft); text-align: center; }
.band__inner { max-width: var(--bz-max); margin: 0 auto; padding: 148px var(--bz-col) 154px; } /* spacers 118 / 134 + gaps */
.band h1 { margin-bottom: 20px; }
.band .band__lead { font-size: 16px; line-height: 1.6; margin: 0; }
/* Contact Us: the photo shows faintly through a white layer at 45% over the grey */
.band--photo { position: relative; overflow: hidden; }
.band__overlay { position: absolute; inset: 0; background: #ffffff; opacity: 0.45; }
.band__overlay img { width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: top center; }
.band--photo .band__inner { position: relative; }
.band--pricing .band__inner { padding: 80px var(--bz-col) 70px; } /* 50px spacers + gaps */
.band--pricing h1 { font-size: 26px; margin: 0; }

/* ---- Numbers row (Why Benefit Zone) ---- */
.stats { max-width: none; display: flex; flex-wrap: wrap; padding-top: 5px; margin: 0 0 70px; list-style: none; }
.stats__item { flex: 0 0 25%; padding: var(--bz-col); text-align: center; }
.stats__item:not(:last-child) { border-right: 1px solid #54595f; }
.stats__number { display: block; margin-top: 34px; font-size: 46px; line-height: 1; font-weight: 500; }
.stats__label { display: block; margin-top: 30px; } /* widget gap 20 + 10px margin */
@media (max-width: 767px) { .stats__item { flex-basis: 100%; } .stats__item:not(:last-child) { border-right: 0; } }

/* ---- Story sections (Why Benefit Zone): text with a quote beside a rounded photo ---- */
.story { max-width: var(--bz-max); margin: 0 auto; display: flex; align-items: flex-start; }
.story.gap-50 { padding-bottom: 70px; }
.story__text, .story__media { flex: 0 0 50%; padding: var(--bz-col); margin: 0; }
.story__text h2 { margin-bottom: 30px; }
.story__text p { margin-bottom: 33px; }
.story__text hr { border: 0; border-top: 1px solid #000000; margin: 15px 0 35px; }
.story__text blockquote { margin: 0; font-style: italic; }
.story__text blockquote p { margin-bottom: 13px; }
.story__media img { padding: 16px; }
.radius-8 { border-radius: 8px; } .radius-9 { border-radius: 9px; } .story__media .radius-10 { border-radius: 10px; }
@media (max-width: 767px) { .story { display: block; } }

/* ---- Pricing tiers ---- */
.tiers { max-width: var(--bz-max); margin: 0 auto; display: flex; flex-wrap: wrap; padding: 77px 7px 7px; } /* 50px spacer section above */
.tiers__item { flex: 0 0 calc(25% - 10px); margin: 5px; padding: 20px; border: 1px solid #bdbcbc; border-radius: 3px; text-align: center; }
.tiers__item img { margin: 0 auto 20px; }
.tiers__item h2 { margin-bottom: 30px; }
.tiers__item p { margin-bottom: 13px; }
.tiers { align-items: flex-start; }
.tier-69 { width: 69px; } .tier-133 { width: 133px; } .tier-168 { width: 168px; } .tier-225 { width: 225px; }
@media (max-width: 767px) { .tiers__item { flex-basis: calc(100% - 10px); } }
.cta--pricing { padding: 80px var(--bz-col) 102px; }
.cta--pricing h2 { color: var(--bz-sub); font-size: 18px; line-height: 1.9; letter-spacing: 0.5px; margin-bottom: 70px; }

/* ---- Request a Demo / Contact Us form areas ---- */
.form-area { max-width: var(--bz-max); margin: 0 auto; padding: var(--bz-col) var(--bz-col) 67px; text-align: center; }
.form-area--demo { padding: 99px var(--bz-col) 130px; } /* spacers 69 above, 50 + 50 below */
.form-area h2 { margin-bottom: 20px; }
.form-area .form-area__lead { font-size: 16px; line-height: 1.5; margin-bottom: 20px; }
.help { max-width: 570px; margin: 0 auto; padding: var(--bz-col) var(--bz-col) 80px; text-align: center; }
.help h2 { font-size: 18px; line-height: 1.2; margin-bottom: 10px; color: var(--bz-sub); } /* an h3 in WordPress */

/* ---- Confirmation and not-found pages ---- */
.message { max-width: 50rem; margin: 0 auto; padding: 120px var(--bz-col) 140px; text-align: center; }
.message h1 { margin-bottom: 30px; }

/* ---- Forms -------------------------------------------------------------- */
.form { max-width: 36rem; margin: 0 auto; }
.form__field { margin-bottom: 1.1rem; }
.form__field label { display: block; font-weight: 600; margin-bottom: 0.35rem; }
.form__field input, .form__field textarea, .form__field select {
  width: 100%;
  padding: 0.7rem 0.8rem;
  border: 2px solid var(--bz-border);
  border-radius: 3px;
  font: 14px/1.4 var(--bz-font);
  color: var(--bz-text);
  background: #ffffff;
}
.form__field input:focus, .form__field textarea:focus { border-color: #0270e0; outline: none; }
.form__hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* WordPress HappyForms look (forms 1009 / 1176): placeholders in half-width boxes, black text,
   #dbdbdb borders with 6px corners, orange centred button. */
.wform { max-width: none; padding: 3.5%; text-align: left; }
.wform__fields { display: flex; flex-wrap: wrap; align-items: flex-start; }
.wform__field { width: 100%; margin: 0 0 15px; padding: 5px 1%; border: 0; min-width: 0; }
@media (min-width: 800px) { .wform__field--half { width: 50%; } }
.wform__field > label, .wform legend { display: block; padding: 0; margin-bottom: 10px; color: #000000; font-size: 16px; line-height: 1; }
.wform__hint { display: block; margin-bottom: 10px; color: #454545; font-size: 14px; }
.wform input[type="text"], .wform input[type="email"], .wform input[type="tel"] {
  width: 100%;
  margin: 0;
  padding: 10px;
  border: 1px solid #dbdbdb;
  border-radius: 6px;
  background: #ffffff;
  color: #000000;
  font: 13px/1.4 var(--bz-font);
}
.wform input::placeholder { color: #888888; opacity: 1; }
.wform input:focus { border-color: #407fff; outline: none; }
.wform__choice { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; color: #000000; font-size: 13px; cursor: pointer; }
.wform__choice input {
  appearance: none;
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin: 0;
  border: 1px solid #dbdbdb;
  border-radius: 6px;
  background: #ffffff center / 12px no-repeat;
  cursor: pointer;
}
.wform__choice input:checked {
  border-color: #000000;
  background-color: #000000;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M20.285 2l-11.285 11.567-5.286-5.011-3.714 3.716 9 8.728 15-15.285z'/%3E%3C/svg%3E");
}
.wform__choice input:focus-visible { outline: 3px solid #0270e0; outline-offset: 2px; }
.wform__submit { margin: 0; padding: 5px 1%; text-align: center; }
.wform__button { padding: 10px 20px; border: 0; border-radius: 4px; background: var(--bz-orange); color: #ffffff; font: 16px/1.4 var(--bz-font); cursor: pointer; transition: all 0.25s ease-in; }
.wform__button:hover, .wform__button:focus { background: var(--bz-orange-hover); }
.wform__button[disabled] { opacity: 0.6; cursor: wait; }
.form__status { margin-top: 1rem; padding: 0.9rem 1rem; border-radius: 3px; }
.form__status--error { color: var(--bz-error); background: #fdf0ee; }
.form__status--success { color: var(--bz-success); background: var(--bz-success-bg); }

/* ---- Narrower windows: keep a side margin ------------------------------- */
/* Once the window is narrower than the 1140px content area plus margins, content keeps 57px from each
   edge (47px + the 10px column padding), matching the live site at tablet widths (checked against a
   screenshot, 2026-11-10). Phones keep Elementor's 10px. */
@media (min-width: 768px) and (max-width: 1233px) {
  .hero__inner, .feature, .tiles, .site-footer__inner, .story, .tiers, .stats { padding-left: 47px; padding-right: 47px; }
  .text-section, .cta, .site-footer__legal, .banner__inner, .band__inner, .form-area { padding-left: 57px; padding-right: 57px; }
}

/* ---- Phones: Elementor stacks columns at 767px --------------------------- */
@media (max-width: 767px) {
  h1 { font-size: 36px; }
}