/**
 * Home page built without Elementor.
 *
 * Everything is scoped under .sbp-home and every class carries an sbp- prefix.
 * The mockup used bare names (.section, .wrap, .btn, .icon, .feature) which
 * already exist in the theme and in Elementor — unprefixed they would leak into
 * every other page.
 *
 * Typography follows the site, not the mockup: the mockup is drawn in Arial
 * Narrow, the site runs on Roboto everywhere.
 */

/* Kava puts a 50px margin above #content for ordinary pages. The hero has to
   sit flush under the header, so drop it for this template only. */
body.page-template-home-native #content.site-content { margin-top: 0; }

.sbp-home {
  --sbp-navy: #202734;
  --sbp-navy-soft: #273548;
  --sbp-ink: #3d4756;
  --sbp-muted: #6f7883;
  --sbp-cyan: #2bc0c1;
  --sbp-cyan-dark: #16aeb4;
  --sbp-light: #f5f7f8;
  --sbp-line: #e4e9ed;

  color: var(--sbp-ink);
  font-family: Roboto, Arial, Helvetica, sans-serif;
}

.sbp-home *,
.sbp-home *::before,
.sbp-home *::after { box-sizing: border-box; }

/* The theme turns on hyphens: auto site-wide, which chops words mid-syllable
   ("migra-tion"). Wrap on word boundaries instead. overflow-wrap stays as a
   safety net so an unbreakable string still cannot overflow its box. */
.sbp-home,
.sbp-home * {
  hyphens: none;
  -webkit-hyphens: none;
  overflow-wrap: break-word;
}

.sbp-wrap { width: min(1200px, calc(100% - 40px)); margin-inline: auto; }

.sbp-home h1,
.sbp-home h2,
.sbp-home h3 { font-family: inherit; }

/* ---------- shared button ---------- */
.sbp-home .sbp-btn {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--sbp-cyan); color: #fff; text-decoration: none;
  border: 0; border-radius: 999px; padding: 14px 24px;
  font-weight: 500; font-size: 13px; letter-spacing: .04em; text-transform: uppercase;
  cursor: pointer; transition: background .18s ease;
}
.sbp-home .sbp-btn:hover { background: var(--sbp-cyan-dark); color: #fff; }

/* ---------- hero ---------- */
/* One step lighter than the header (#202734), same hue family, so the two read
   as separate bands instead of one dark mass. The old stack put a 94%-opaque
   dark wash over the base, which pulled the hero to within ~2 luminance points
   of the header — invisible as a boundary. */
.sbp-hero {
  background:
    linear-gradient(90deg, rgba(34,45,61,.86), rgba(34,45,61,.52)),
    radial-gradient(circle at 78% 25%, rgba(44,193,198,.22), transparent 38%),
    linear-gradient(135deg, #2f3d51, #243141);
  color: #fff;
  padding: 54px 0 58px;
}
.sbp-hero-grid { display: grid; grid-template-columns: 1.25fr .75fr; gap: 56px; align-items: center; }
.sbp-hero h1 { margin: 0 0 14px; font-size: 40px; font-weight: 700; line-height: 1.14; letter-spacing: -.01em; color: #fff; }
.sbp-hero p { margin: 0 0 16px; max-width: 720px; color: #e4e9ed; font-size: 15px; font-weight: 300; line-height: 1.55; }
.sbp-hero-note { font-size: 13px; line-height: 1.5; margin-bottom: 0 !important; }
.sbp-hero-list { display: grid; gap: 7px; margin: 16px 0 20px; padding: 0; list-style: none; font-size: 14px; font-weight: 300; }
.sbp-hero-list li::before { content: "✓"; color: var(--sbp-cyan); font-weight: 700; margin-right: 10px; }

/* ---------- form card (Contact Form 7 lives inside) ---------- */
.sbp-form-card {
  background: var(--sbp-navy); padding: 22px; border-radius: 8px;
  box-shadow: 0 18px 50px rgba(0,0,0,.22);
}
/* Contact Form 7 wraps every field in its own <p>, which the theme gives a
   16px bottom margin. Stacked on the fields' own margins that made a 24px gap.
   The paragraph is the single source of spacing here; the controls contribute
   nothing. */
.sbp-form-card form p { margin: 0 0 8px; }
.sbp-form-card form p:last-of-type { margin-bottom: 0; }

.sbp-form-card input[type="text"],
.sbp-form-card input[type="email"],
.sbp-form-card input[type="url"],
.sbp-form-card textarea {
  width: 100%; border: 0; background: #fff; margin: 0;
  padding: 11px 13px; font: inherit; font-size: 14px; color: #333; border-radius: 3px;
}
.sbp-form-card textarea { height: 96px; resize: none; display: block; }
.sbp-form-card label { display: block; margin: 0; }
.sbp-form-card .wpcf7-form-control-wrap { display: block; }

.sbp-form-card input[type="submit"] {
  width: 100%; display: block; background: var(--sbp-cyan); color: #fff; border: 0;
  border-radius: 999px; padding: 14px 20px; font-weight: 500; font-size: 13px;
  letter-spacing: .04em; text-transform: uppercase; cursor: pointer;
  transition: background .18s ease; margin: 4px 0 0;
}
.sbp-form-card input[type="submit"]:hover { background: var(--sbp-cyan-dark); }

/* The spinner sits beside the button and reserves 24px plus 48px of margin even
   when idle — that was the empty band under the button. Only show it while the
   form is actually submitting. */
.sbp-form-card .wpcf7-spinner { display: none; }
.sbp-form-card form.submitting .wpcf7-spinner { display: block; margin: 8px auto 0; }

.sbp-form-card .wpcf7-not-valid-tip { color: #ffb4b4; font-size: 12px; margin: 4px 0 0; }
.sbp-form-card .wpcf7-response-output {
  color: #fff; font-size: 13px; line-height: 1.4;
  border-color: rgba(255,255,255,.4); border-width: 1px;
  margin: 10px 0 0; padding: 8px 12px;
}

/* ---------- partner strip ----------
   The credibility block: it earns more room and more weight than the mockup
   gave it, because it is the strongest trust signal on the page. */
.sbp-partner-strip {
  background: #fff;
  border-bottom: 1px solid var(--sbp-line);
  padding: 32px 0 52px;
}
.sbp-partner-card {
  /* No negative pull any more: the card used to overlap the hero, which
     cancelled the strip's top padding exactly. It now sits inside the strip so
     the 32px above it is actually visible. */
  margin: 0 auto; position: relative; z-index: 5;
  background: #fff;
  border: 1px solid var(--sbp-line);
  border-top: 3px solid var(--sbp-cyan);
  border-radius: 14px;
  box-shadow: 0 22px 48px rgba(35,48,63,.14);
  padding: 26px 34px;
  display: flex; align-items: center; justify-content: center;
  gap: 26px; max-width: 620px;
}
.sbp-partner-badge {
  width: 104px; height: 104px; flex: 0 0 104px; background: var(--sbp-navy);
  border-radius: 16px; display: flex; align-items: center; justify-content: center;
  /* faint cyan halo so the badge reads as the focal point */
  box-shadow: 0 0 0 4px rgba(43,192,193,.14);
}
.sbp-partner-badge img { width: 90px; height: 90px; object-fit: contain; display: block; }
.sbp-partner-copy small {
  display: block; color: var(--sbp-cyan-dark); font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; margin-bottom: 6px; font-size: 14px;
}
.sbp-partner-copy h2 { margin: 0 0 6px; font-size: 30px; font-weight: 700; line-height: 1.1; color: var(--sbp-navy); }
.sbp-partner-note { margin: 0; font-size: 14px; font-weight: 300; line-height: 1.5; color: var(--sbp-muted); }

/* ---------- generic section ---------- */
.sbp-section { padding: 72px 0; }
.sbp-section.sbp-alt { background: var(--sbp-light); }
.sbp-head { text-align: center; max-width: 820px; margin: 0 auto 42px; }
.sbp-head h2 {
  margin: 0 0 10px; font-size: 34px; font-weight: 300; line-height: 1.15;
  color: #46515f; text-transform: uppercase;
}
.sbp-head h2 strong { font-weight: 500; color: var(--sbp-navy); }
.sbp-under { width: 48px; height: 2px; background: var(--sbp-cyan); margin: 15px auto; }
.sbp-head p { margin: 0; color: var(--sbp-muted); font-size: 14px; font-weight: 300; line-height: 1.6; }

/* ---------- feature grids ---------- */
.sbp-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px 70px; max-width: 900px; margin-inline: auto; }
.sbp-feature { display: grid; grid-template-columns: 42px 1fr; gap: 14px; align-items: start; }
.sbp-ico {
  width: 40px; height: 40px; border-radius: 50%; background: var(--sbp-cyan);
  display: flex; align-items: center; justify-content: center; color: #fff;
  font-weight: 700; font-size: 16px; flex: 0 0 40px;
}
.sbp-ico svg {
  width: 20px; height: 20px; display: block;
  fill: none; stroke: currentColor;
  stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}
.sbp-feature h3 { margin: 2px 0 6px; font-size: 16px; font-weight: 500; color: #43505f; }
.sbp-feature p { margin: 0; color: #78828c; font-size: 13px; font-weight: 300; line-height: 1.5; }

/* ---------- platforms ---------- */
.sbp-platforms { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; max-width: 630px; margin-inline: auto; }
/* Same card box as before — only the contents changed from text to the
   platform artwork the Elementor homepage already uses. */
.sbp-platform {
  height: 120px; background: #fff; border: 1px solid #dce2e6;
  box-shadow: 0 4px 12px rgba(31,44,59,.06);
  display: flex; align-items: center; justify-content: center; gap: 20px;
  font-weight: 500; font-size: 22px; color: #2d3a4a;
  text-decoration: none; padding: 0;
  transition: box-shadow .18s ease, border-color .18s ease, transform .18s ease;
}
.sbp-platform:hover {
  border-color: #c3ced6;
  box-shadow: 0 10px 22px rgba(31,44,59,.12);
  transform: translateY(-2px);
}
.sbp-platform img {
  display: block; width: auto; height: auto;
  max-width: 100%; max-height: 100%; object-fit: contain;
}
.sbp-platform .sbp-arrow { color: var(--sbp-cyan); font-size: 26px; }
.sbp-platform .sbp-wix { font-size: 29px; font-weight: 700; letter-spacing: -.04em; }

/* ---------- intro line above a grid ---------- */
.sbp-intro { text-align: center; max-width: 870px; margin: -18px auto 36px; color: var(--sbp-muted); font-size: 16px; font-weight: 300; line-height: 1.55; }
.sbp-intro a { color: var(--sbp-cyan-dark); font-weight: 500; text-decoration: none; white-space: nowrap; }
.sbp-intro a:hover { text-decoration: underline; }

/* ---------- process ---------- */
.sbp-process { display: grid; grid-template-columns: 1fr .85fr; gap: 70px; align-items: center; }
.sbp-steps { display: grid; gap: 22px; }
.sbp-step { display: grid; grid-template-columns: 46px 1fr; gap: 14px; }
.sbp-step-num {
  width: 38px; height: 38px; border-radius: 50%; background: var(--sbp-cyan); color: #fff;
  display: flex; align-items: center; justify-content: center; font-weight: 700;
}
.sbp-step h3 { margin: 0 0 5px; font-size: 15px; font-weight: 500; }
.sbp-step p { margin: 0; color: #747f89; font-size: 13px; font-weight: 300; line-height: 1.45; }
.sbp-process .sbp-form-card { max-width: 410px; }

/* ---------- faq ---------- */
.sbp-faq { max-width: 900px; margin-inline: auto; display: grid; gap: 8px; }
.sbp-faq details { border: 1px solid #d7dee4; background: #fff; }
.sbp-faq summary {
  cursor: pointer; list-style: none; padding: 14px 16px; background: var(--sbp-navy);
  color: #fff; font-size: 13px; font-weight: 500; display: flex;
  justify-content: space-between; gap: 15px;
}
.sbp-faq summary::-webkit-details-marker { display: none; }
.sbp-faq summary::after { content: "+"; color: var(--sbp-cyan); font-size: 16px; }
.sbp-faq details[open] summary { background: var(--sbp-cyan-dark); }
.sbp-faq details[open] summary::after { content: "−"; color: #fff; }
.sbp-faq details p { margin: 0; padding: 16px; color: #69747f; font-size: 13px; font-weight: 300; line-height: 1.55; }

/* ---------- cta band ---------- */
.sbp-cta {
  background:
    linear-gradient(90deg, rgba(25,36,50,.93), rgba(25,36,50,.84)),
    radial-gradient(circle at 70% 30%, rgba(44,193,198,.24), transparent 34%),
    #2d3948;
  color: #fff; text-align: center; padding: 74px 0;
}
.sbp-cta h2 { margin: 0 0 10px; color: #fff; font-size: 38px; font-weight: 300; line-height: 1.15; }
.sbp-cta p { margin: 0 auto 24px; max-width: 700px; color: #d9e0e5; font-size: 16px; font-weight: 300; line-height: 1.6; }

/* ---------- guides ---------- */
.sbp-guides { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.sbp-guide { border-top: 5px solid #59a9c0; background: #fff; text-decoration: none; color: inherit; display: block; }
.sbp-guide-thumb {
  /* 4:3 landscape. The box fixes the shape and background-size crops to fill
     it. Portrait was tried and rejected: the featured images are wide banners
     with headline text across them, and a 3:4 crop cut the words off at both
     edges. */
  aspect-ratio: 4 / 3; background: linear-gradient(135deg, #68b4ca, #243146);
  display: flex; align-items: center; justify-content: center; color: #fff;
  font-weight: 500; text-align: center; padding: 15px; font-size: 14px;
  background-size: cover; background-position: center;
}
.sbp-guide-body { padding: 15px 3px; }
/* A span, not a heading. These are card labels sitting inside a link, and the
   page keeps a clean heading outline without them. */
.sbp-guide-title { display: block; margin: 0 0 6px; font-size: 15px; font-weight: 500; line-height: 1.35; color: #455160; }
.sbp-guide p { margin: 0; color: #7a848f; font-size: 12px; font-weight: 300; line-height: 1.5; }
.sbp-guide:hover .sbp-guide-title { color: var(--sbp-cyan-dark); }

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .sbp-hero-grid { grid-template-columns: 1fr; gap: 32px; }
  .sbp-hero { padding: 54px 0 62px; }
  .sbp-hero h1 { font-size: 36px; }
  .sbp-section { padding: 58px 0; }
  .sbp-head h2 { font-size: 29px; }
  .sbp-grid, .sbp-platforms, .sbp-process, .sbp-guides { grid-template-columns: 1fr; }
  .sbp-grid { gap: 24px; }
  .sbp-process { gap: 34px; }
  .sbp-process .sbp-form-card { max-width: none; }
  .sbp-partner-card { margin: 0 14px; padding: 18px; gap: 17px; }
  .sbp-partner-badge { width: 82px; height: 82px; flex-basis: 82px; }
  .sbp-partner-badge img { width: 70px; height: 70px; }
  .sbp-partner-copy h2 { font-size: 22px; }
  .sbp-cta h2 { font-size: 30px; }
}

@media (max-width: 520px) {
  .sbp-wrap { width: min(100% - 28px, 1200px); }
  .sbp-hero h1 { font-size: 32px; }
  .sbp-hero p { font-size: 15px; }
  .sbp-partner-card { align-items: flex-start; }
  .sbp-partner-badge { width: 72px; height: 72px; flex-basis: 72px; }
  .sbp-partner-badge img { width: 62px; height: 62px; }
  .sbp-partner-copy h2 { font-size: 20px; }
}