:root {
  --sp-navy: #071b33;
  --sp-teal: #064e5f;
  --sp-teal-dark: #043b49;
  --sp-teal-light: #e6f3f5;
  --sp-green: #16a34a;
  --sp-green-dark: #12823d;
  --sp-amber: #f59e0b;
  --sp-bg: #f8fafc;
  --sp-surface: #ffffff;
  --sp-border: #e5e7eb;
  --sp-muted: #64748b;
}

body {
  color: var(--sp-navy);
  background: var(--sp-bg);
}

a {
  color: var(--sp-teal);
}

.navbar {
  padding: 18px 0;
  background: #ffffff;
  box-shadow: 0 8px 30px rgba(7, 27, 51, 0.06);
}

.navbar-brand img {
  height: 46px;
  width: auto;
}

.navbar .nav-link {
  color: var(--sp-navy) !important;
  font-weight: 700;
  font-size: 14px;
}

.navbar .nav-link:hover {
  color: var(--sp-teal) !important;
}

.btn-main-md,
.btn-main-sm {
  background: var(--sp-green);
  border-color: var(--sp-green);
  color: #ffffff !important;
  border-radius: 12px;
  font-weight: 800;
  box-shadow: 0 14px 30px rgba(22, 163, 74, 0.24);
}

.btn-main-md:hover,
.btn-main-sm:hover {
  background: var(--sp-green-dark);
  border-color: var(--sp-green-dark);
}

.btn-outline-sp {
  display: inline-block;
  padding: 15px 32px;
  border: 1px solid rgba(255, 255, 255, 0.44);
  border-radius: 12px;
  color: #ffffff;
  font-weight: 800;
}

.btn-outline-sp:hover {
  color: #ffffff;
  border-color: #ffffff;
}

.stayproof-hero {
  position: relative;
  overflow: hidden;
  padding: 120px 0 170px;
  background:
    radial-gradient(circle at 80% 20%, rgba(22, 163, 74, 0.14), transparent 24rem),
    linear-gradient(135deg, #064e5f 0%, #071b33 100%);
  color: #ffffff;
}

.stayproof-hero::before,
.stayproof-hero::after {
  content: "";
  position: absolute;
  display: block;
  width: 360px;
  height: 54px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  transform: rotate(-35deg);
}

.stayproof-hero::before {
  left: -80px;
  top: 110px;
}

.stayproof-hero::after {
  right: -100px;
  bottom: 130px;
}

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

.hero-eyebrow {
  color: #c9f2dd;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 13px;
  margin-bottom: 18px;
}

.hero-copy h1 {
  color: #ffffff;
  font-weight: 800;
  font-size: 58px;
  line-height: 1.05;
  letter-spacing: -0.04em;
  margin-bottom: 24px;
}

.hero-copy p {
  color: rgba(255, 255, 255, 0.82);
  font-size: 18px;
  line-height: 1.7;
  max-width: 590px;
}

.hero-actions {
  margin-top: 32px;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.hero-note {
  margin-top: 18px;
  color: #c9f2dd !important;
  font-size: 14px !important;
  font-weight: 700;
}

.hero-screens {
  position: relative;
  z-index: 2;
  min-height: 520px;
}

.hero-screen-main {
  position: absolute;
  right: 165px;
  top: 40px;
  width: 270px;
  max-width: 48%;
  filter: drop-shadow(0 30px 55px rgba(0, 0, 0, 0.32));
}

.hero-screen-report {
  position: absolute;
  right: 0;
  top: 78px;
  width: 220px;
  max-width: 38%;
  filter: drop-shadow(0 22px 38px rgba(0, 0, 0, 0.24));
}

.hero-benefits {
  position: relative;
  z-index: 4;
  margin-top: -84px;
}

.hero-benefits .benefits-card {
  background: #ffffff;
  border-radius: 10px;
  box-shadow: 0 24px 70px rgba(7, 27, 51, 0.16);
  padding: 38px 28px;
}

.benefit-item {
  text-align: center;
  padding: 12px 24px;
}

.benefit-icon {
  width: 52px;
  height: 52px;
  margin: 0 auto 18px;
  border-radius: 16px;
  background: var(--sp-teal-light);
  color: var(--sp-teal);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
}

.benefit-item h3 {
  color: var(--sp-navy);
  font-size: 20px;
  font-weight: 800;
  margin-bottom: 10px;
}

.benefit-item p {
  color: var(--sp-muted);
  margin-bottom: 0;
  line-height: 1.65;
}

.sp-section {
  padding: 110px 0;
  background: #ffffff;
}

.sp-section.alt {
  background: var(--sp-bg);
}

.sp-section h2 {
  color: var(--sp-navy);
  font-size: 42px;
  line-height: 1.16;
  font-weight: 800;
  letter-spacing: -0.03em;
  margin-bottom: 18px;
}

.sp-section p {
  color: var(--sp-muted);
  font-size: 17px;
  line-height: 1.75;
}

.sp-kicker {
  color: var(--sp-teal);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 13px;
  margin-bottom: 14px;
}

.sp-screen {
  max-width: 360px;
  margin: 0 auto;
  filter: drop-shadow(0 26px 48px rgba(7, 27, 51, 0.18));
}

.sp-feature-list {
  margin-top: 28px;
  padding: 0;
  list-style: none;
}

.sp-feature-list li {
  margin-bottom: 13px;
  color: var(--sp-navy);
  font-weight: 700;
}

.sp-feature-list li::before {
  content: "✓";
  color: var(--sp-green);
  font-weight: 900;
  margin-right: 10px;
}

.cta-download {
  background: linear-gradient(135deg, #064e5f 0%, #071b33 100%);
  padding: 92px 0;
  text-align: center;
}

.cta-download h2 {
  color: #ffffff;
  font-size: 42px;
  font-weight: 800;
  margin-bottom: 14px;
}

.cta-download p {
  color: rgba(255, 255, 255, 0.78);
  font-size: 18px;
  margin-bottom: 28px;
}

.footer-main {
  background: #17191f;
  padding: 80px 0 55px;
  color: rgba(255, 255, 255, 0.7);
}

.footer-main img {
  height: 46px;
  width: auto;
  margin-bottom: 20px;
}

.footer-main h4 {
  color: #ffffff;
  font-size: 15px;
  font-weight: 900;
  margin-bottom: 18px;
  text-transform: uppercase;
}

.footer-main a {
  display: block;
  color: rgba(255, 255, 255, 0.62);
  margin-bottom: 10px;
}

.footer-main a:hover {
  color: #ffffff;
}

.footer-bottom {
  background: #30343b;
  color: rgba(255, 255, 255, 0.45);
  text-align: center;
  padding: 18px 0;
  font-size: 14px;
}

@media (max-width: 991px) {
  .stayproof-hero {
    padding: 90px 0 140px;
  }

  .hero-copy h1 {
    font-size: 46px;
  }

  .hero-screens {
    margin-top: 50px;
    min-height: 450px;
  }

  .hero-screen-main {
    right: 45%;
    transform: translateX(50%);
  }

  .hero-screen-report {
    right: 18%;
  }
}

@media (max-width: 767px) {
  .stayproof-hero {
    padding: 70px 0 120px;
  }

  .hero-copy h1 {
    font-size: 40px;
  }

  .hero-actions {
    flex-direction: column;
    align-items: flex-start;
  }

  .hero-screens {
    min-height: 360px;
  }

  .hero-screen-main {
    width: 220px;
    right: 50%;
    top: 30px;
  }

  .hero-screen-report {
    width: 160px;
    right: 10%;
    top: 74px;
  }

  .hero-benefits {
    margin-top: -60px;
  }

  .sp-section {
    padding: 78px 0;
  }

  .sp-section h2,
  .cta-download h2 {
    font-size: 34px;
  }
}

/* --- Compact content sections patch --- */

.sp-section {
  padding: 82px 0;
}

.sp-section h2 {
  font-size: 38px;
}

.sp-screen {
  max-width: 300px;
}

.sp-screen-small {
  max-width: 285px;
}

.sp-screen-pair {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
}

.sp-screen-main-small {
  max-width: 245px;
}

.sp-screen-secondary-small {
  max-width: 225px;
  transform: translateY(34px);
}

.compact-proof-section {
  overflow: hidden;
}

@media (max-width: 991px) {
  .sp-screen-pair {
    gap: 16px;
  }

  .sp-screen-main-small {
    max-width: 230px;
  }

  .sp-screen-secondary-small {
    max-width: 205px;
  }
}

@media (max-width: 767px) {
  .sp-section {
    padding: 66px 0;
  }

  .sp-section h2 {
    font-size: 31px;
  }

  .sp-screen-small,
  .sp-screen-main-small,
  .sp-screen-secondary-small {
    max-width: 240px;
  }

  .sp-screen-pair {
    flex-direction: column;
  }

  .sp-screen-secondary-small {
    transform: none;
  }
}

/* --- Polish patch v2: tighter layout and footer logo fix --- */

.stayproof-hero {
  padding: 110px 0 145px;
}

.hero-screens {
  min-height: 470px;
}

.hero-screen-main {
  width: 250px;
  right: 175px;
  top: 36px;
}

.hero-screen-report {
  width: 190px;
  right: 32px;
  top: 80px;
}

.hero-benefits {
  margin-top: -72px;
}

.hero-benefits .benefits-card {
  padding: 32px 24px;
}

.sp-section {
  padding: 72px 0;
}

.sp-screen-small {
  max-width: 260px;
}

.sp-screen-main-small {
  max-width: 225px;
}

.sp-screen-secondary-small {
  max-width: 205px;
}

.sp-section h2 {
  font-size: 36px;
}

.sp-section p {
  font-size: 16px;
}

.sp-feature-list li {
  margin-bottom: 10px;
}

#use-cases.sp-section {
  padding-bottom: 68px;
}

.cta-download {
  padding: 76px 0;
}

.footer-main {
  padding: 64px 0 46px;
}

.footer-main img {
  background: #ffffff;
  padding: 8px 12px;
  border-radius: 12px;
  height: 52px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.22);
}

@media (max-width: 991px) {
  .hero-screen-main {
    width: 230px;
  }

  .hero-screen-report {
    width: 170px;
  }

  .sp-screen-small {
    max-width: 245px;
  }
}

@media (max-width: 767px) {
  .stayproof-hero {
    padding: 72px 0 115px;
  }

  .hero-screens {
    min-height: 340px;
  }

  .hero-screen-main {
    width: 215px;
  }

  .hero-screen-report {
    width: 150px;
  }

  .sp-section {
    padding: 58px 0;
  }
}

/* --- Hero visual hierarchy patch: PDF primary, checklist secondary --- */

.hero-screens {
  min-height: 500px;
}

/* Main visual: generated PDF report, larger, right/back */
.hero-screen-report {
  width: 285px;
  right: 18px;
  top: 34px;
  z-index: 1;
  filter: drop-shadow(0 30px 55px rgba(0, 0, 0, 0.30));
}

/* Supporting visual: active checklist, smaller, left/front */
.hero-screen-main {
  width: 215px;
  right: 235px;
  top: 86px;
  z-index: 2;
  filter: drop-shadow(0 24px 44px rgba(0, 0, 0, 0.26));
}

/* Make benefit card narrower so it does not cover the screenshots as much */
.hero-benefits .container {
  max-width: 940px;
}

.hero-benefits .benefits-card {
  padding: 30px 22px;
}

/* Give hero a little more room so screens breathe above the card */
.stayproof-hero {
  padding-bottom: 165px;
}

@media (max-width: 991px) {
  .hero-screens {
    min-height: 440px;
  }

  .hero-screen-report {
    width: 245px;
    right: 80px;
    top: 24px;
  }

  .hero-screen-main {
    width: 190px;
    right: 275px;
    top: 90px;
  }

  .hero-benefits .container {
    max-width: 760px;
  }
}

@media (max-width: 767px) {
  .hero-screens {
    min-height: 360px;
  }

  .hero-screen-report {
    width: 210px;
    right: 20px;
    top: 28px;
  }

  .hero-screen-main {
    width: 160px;
    right: 165px;
    top: 90px;
  }

  .hero-benefits .container {
    max-width: 92%;
  }
}

/* --- Hero patch v3: restore screenshot overlap + make benefits shorter vertically --- */

/* Keep the benefits card wide enough, but reduce its vertical height */
.hero-benefits .container {
  max-width: 1040px;
}

.hero-benefits {
  margin-top: -58px;
}

.hero-benefits .benefits-card {
  padding: 22px 24px;
}

.benefit-item {
  padding: 6px 22px;
}

.benefit-icon {
  width: 44px;
  height: 44px;
  margin-bottom: 12px;
  border-radius: 14px;
  font-size: 20px;
}

.benefit-item h3 {
  font-size: 18px;
  margin-bottom: 7px;
}

.benefit-item p {
  font-size: 15px;
  line-height: 1.55;
}

/* Hero screenshots: active checklist left/front, PDF right/back, overlapping */
.hero-screens {
  min-height: 510px;
}

/* Active checklist: left/front */
.hero-screen-main {
  width: 235px;
  right: 210px;
  top: 70px;
  z-index: 2;
  filter: drop-shadow(0 26px 50px rgba(0, 0, 0, 0.28));
}

/* PDF report: right/back, larger, overlapping behind */
.hero-screen-report {
  width: 285px;
  right: 45px;
  top: 40px;
  z-index: 1;
  filter: drop-shadow(0 30px 55px rgba(0, 0, 0, 0.26));
}

/* Give the visual stack enough vertical room above the benefits card */
.stayproof-hero {
  padding-bottom: 150px;
}

@media (max-width: 991px) {
  .hero-benefits .container {
    max-width: 88%;
  }

  .hero-screen-main {
    width: 215px;
    right: 240px;
    top: 80px;
  }

  .hero-screen-report {
    width: 250px;
    right: 70px;
    top: 48px;
  }
}

@media (max-width: 767px) {
  .hero-benefits {
    margin-top: -42px;
  }

  .hero-benefits .benefits-card {
    padding: 20px 18px;
  }

  .hero-screen-main {
    width: 165px;
    right: 155px;
    top: 86px;
  }

  .hero-screen-report {
    width: 205px;
    right: 22px;
    top: 46px;
  }
}

/* --- Hero patch v4: make rear PDF report larger --- */

.hero-screens {
  min-height: 540px;
}

/* Front active checklist stays smaller */
.hero-screen-main {
  width: 225px;
  right: 245px;
  top: 82px;
  z-index: 2;
}

/* Rear PDF becomes the dominant large background screen */
.hero-screen-report {
  width: 345px;
  right: 5px;
  top: 18px;
  z-index: 1;
}

.stayproof-hero {
  padding-bottom: 165px;
}

@media (max-width: 991px) {
  .hero-screen-main {
    width: 205px;
    right: 260px;
    top: 92px;
  }

  .hero-screen-report {
    width: 300px;
    right: 35px;
    top: 35px;
  }
}

@media (max-width: 767px) {
  .hero-screen-main {
    width: 160px;
    right: 165px;
    top: 100px;
  }

  .hero-screen-report {
    width: 245px;
    right: 8px;
    top: 48px;
  }
}

/* --- Hero patch v5: correct overlapped stack like reference image --- */

.hero-screens {
  position: relative;
  min-height: 540px;
}

/* Front screen: active checklist, smaller, left/front */
.hero-screen-main {
  width: 240px;
  right: 255px;
  top: 92px;
  z-index: 3;
  filter: drop-shadow(0 28px 54px rgba(0, 0, 0, 0.30));
}

/* Back screen: PDF report, larger, shifted right/back */
.hero-screen-report {
  width: 365px;
  right: 55px;
  top: 22px;
  z-index: 2;
  filter: drop-shadow(0 30px 58px rgba(0, 0, 0, 0.26));
}

/* Keep hero spacing controlled */
.stayproof-hero {
  padding-bottom: 155px;
}

/* Keep benefit card shorter vertically */
.hero-benefits {
  margin-top: -58px;
}

.hero-benefits .container {
  max-width: 1040px;
}

.hero-benefits .benefits-card {
  padding: 22px 24px;
}

@media (max-width: 991px) {
  .hero-screens {
    min-height: 455px;
  }

  .hero-screen-main {
    width: 205px;
    right: 245px;
    top: 100px;
  }

  .hero-screen-report {
    width: 315px;
    right: 42px;
    top: 36px;
  }
}

@media (max-width: 767px) {
  .hero-screens {
    min-height: 365px;
  }

  .hero-screen-main {
    width: 165px;
    right: 155px;
    top: 100px;
  }

  .hero-screen-report {
    width: 250px;
    right: 15px;
    top: 44px;
  }
}

/* --- Hero patch v6: PDF report 10 percent larger --- */

.hero-screen-report {
  width: 402px;
}

@media (max-width: 991px) {
  .hero-screen-report {
    width: 347px;
  }
}

@media (max-width: 767px) {
  .hero-screen-report {
    width: 275px;
  }
}

/* --- Hero patch v7: stable screenshot stage across browser widths --- */

/* Desktop: fixed visual stage inside the right hero column */
.hero-screens {
  position: relative;
  height: 520px;
  min-height: 520px;
}

/* Front screen: active checklist */
.hero-screen-main {
  position: absolute;
  left: 0;
  right: auto;
  top: 92px;
  width: 240px;
  z-index: 3;
  filter: drop-shadow(0 28px 54px rgba(0, 0, 0, 0.30));
}

/* Back screen: PDF report, larger and shifted right */
.hero-screen-report {
  position: absolute;
  left: 170px;
  right: auto;
  top: 20px;
  width: 400px;
  z-index: 2;
  filter: drop-shadow(0 30px 58px rgba(0, 0, 0, 0.26));
}

/* Give enough space so the benefits card does not cover the screens */
.stayproof-hero {
  padding-bottom: 145px;
}

.hero-benefits {
  margin-top: -50px;
}

/* Medium desktop / small laptop */
@media (max-width: 1199px) {
  .hero-screen-main {
    left: 0;
    top: 98px;
    width: 220px;
  }

  .hero-screen-report {
    left: 155px;
    top: 30px;
    width: 350px;
  }
}

/* Tablet: center the whole visual stage instead of letting it jump */
@media (max-width: 991px) {
  .hero-screens {
    width: 520px;
    max-width: 100%;
    height: 430px;
    min-height: 430px;
    margin: 44px auto 0;
  }

  .hero-screen-main {
    left: 25px;
    top: 92px;
    width: 200px;
  }

  .hero-screen-report {
    left: 170px;
    top: 25px;
    width: 315px;
  }
}

/* Mobile: keep overlap, but scale both down */
@media (max-width: 575px) {
  .hero-screens {
    width: 330px;
    height: 350px;
    min-height: 350px;
    margin-top: 36px;
  }

  .hero-screen-main {
    left: 10px;
    top: 96px;
    width: 155px;
  }

  .hero-screen-report {
    left: 95px;
    top: 42px;
    width: 230px;
  }
}

/* --- Hero patch v8: proportional screenshot stage, no jumping --- */

/*
  This overrides the earlier hero screenshot patches.
  The two screenshots now scale as one visual composition instead of
  being repositioned separately at every browser width.
*/

.hero-screens {
  position: relative;
  width: min(570px, 100%);
  height: clamp(440px, 38vw, 540px);
  min-height: 0;
  margin-left: auto;
  margin-right: auto;
}

/* Back/right screen: PDF report, larger */
.hero-screen-report {
  position: absolute;
  left: 30%;
  right: auto;
  top: 0;
  width: 68%;
  z-index: 2;
  filter: drop-shadow(0 30px 58px rgba(0, 0, 0, 0.26));
}

/* Front/left screen: active checklist, smaller */
.hero-screen-main {
  position: absolute;
  left: 4%;
  right: auto;
  top: 18%;
  width: 45%;
  z-index: 3;
  filter: drop-shadow(0 28px 54px rgba(0, 0, 0, 0.30));
}

/* Desktop hero spacing */
.stayproof-hero {
  padding-bottom: 150px;
}

/* Benefit card remains shorter vertically */
.hero-benefits {
  margin-top: -54px;
}

.hero-benefits .container {
  max-width: 1040px;
}

.hero-benefits .benefits-card {
  padding: 22px 24px;
}

/*
  Tablet/mobile: Bootstrap stacks the text and image columns.
  Keep the same visual composition, just scale the stage down.
*/
@media (max-width: 991px) {
  .hero-screens {
    width: min(520px, 100%);
    height: 430px;
    margin-top: 44px;
  }

  .hero-screen-report {
    left: 30%;
    top: 0;
    width: 68%;
  }

  .hero-screen-main {
    left: 4%;
    top: 18%;
    width: 45%;
  }
}

@media (max-width: 575px) {
  .hero-screens {
    width: min(340px, 100%);
    height: 350px;
    margin-top: 36px;
  }

  .hero-screen-report {
    left: 29%;
    top: 0;
    width: 68%;
  }

  .hero-screen-main {
    left: 3%;
    top: 20%;
    width: 45%;
  }
}

/* --- Hero patch v9: restore fixed hero screenshot composition --- */

.hero-screens {
  position: relative;
  width: 600px;
  max-width: 100%;
  height: 545px;
  min-height: 545px;
  margin-left: auto;
  margin-right: auto;
  overflow: visible;
}

/* Front/left: active checklist */
.hero-screen-main {
  position: absolute;
  left: 42px;
  right: auto;
  top: 105px;
  width: 245px;
  z-index: 3;
  filter: drop-shadow(0 28px 54px rgba(0, 0, 0, 0.30));
}

/* Back/right: PDF report, larger */
.hero-screen-report {
  position: absolute;
  left: 245px;
  right: auto;
  top: 28px;
  width: 380px;
  z-index: 2;
  filter: drop-shadow(0 30px 58px rgba(0, 0, 0, 0.26));
}

.stayproof-hero {
  padding-bottom: 155px;
}

/* Tablet: stack the hero text and use a centred scaled composition */
@media (max-width: 991px) {
  .hero-screens {
    width: 500px;
    height: 445px;
    min-height: 445px;
    margin-top: 44px;
  }

  .hero-screen-main {
    left: 30px;
    top: 92px;
    width: 205px;
  }

  .hero-screen-report {
    left: 210px;
    top: 24px;
    width: 315px;
  }
}

/* Mobile: smaller but same relationship */
@media (max-width: 575px) {
  .hero-screens {
    width: 340px;
    height: 360px;
    min-height: 360px;
    margin-top: 36px;
  }

  .hero-screen-main {
    left: 8px;
    top: 92px;
    width: 160px;
  }

  .hero-screen-report {
    left: 128px;
    top: 36px;
    width: 235px;
  }
}

/* --- Photo proof section patch: overlapped screenshot pair --- */

.compact-proof-section .sp-screen-pair {
  position: relative;
  display: block;
  width: 560px;
  max-width: 100%;
  height: 500px;
  margin: 0 auto;
}

/* Front/left: active checklist */
.compact-proof-section .sp-screen-main-small {
  position: absolute;
  left: 35px;
  top: 92px;
  width: 225px;
  max-width: none;
  z-index: 3;
  transform: none;
  filter: drop-shadow(0 28px 54px rgba(7, 27, 51, 0.22));
}

/* Back/right: photo proof, larger */
.compact-proof-section .sp-screen-secondary-small {
  position: absolute;
  left: 220px;
  top: 28px;
  width: 330px;
  max-width: none;
  z-index: 2;
  transform: none;
  filter: drop-shadow(0 30px 58px rgba(7, 27, 51, 0.18));
}

@media (max-width: 991px) {
  .compact-proof-section .sp-screen-pair {
    width: 500px;
    height: 440px;
    margin-bottom: 28px;
  }

  .compact-proof-section .sp-screen-main-small {
    left: 30px;
    top: 88px;
    width: 205px;
  }

  .compact-proof-section .sp-screen-secondary-small {
    left: 205px;
    top: 28px;
    width: 300px;
  }
}

@media (max-width: 575px) {
  .compact-proof-section .sp-screen-pair {
    width: 340px;
    height: 350px;
  }

  .compact-proof-section .sp-screen-main-small {
    left: 8px;
    top: 88px;
    width: 160px;
  }

  .compact-proof-section .sp-screen-secondary-small {
    left: 125px;
    top: 34px;
    width: 230px;
  }
}

/* --- Photo proof section patch v2: match hero-style proportions --- */

.compact-proof-section .sp-screen-pair {
  position: relative;
  display: block;
  width: 560px;
  max-width: 100%;
  height: 455px;
  margin: 0 auto;
}

/* Front/left: active checklist */
.compact-proof-section .sp-screen-main-small {
  position: absolute;
  left: 42px;
  top: 96px;
  width: 220px;
  max-width: none;
  z-index: 3;
  transform: none;
  filter: drop-shadow(0 28px 54px rgba(7, 27, 51, 0.22));
}

/* Back/right: photo proof, moderately larger */
.compact-proof-section .sp-screen-secondary-small {
  position: absolute;
  left: 225px;
  top: 38px;
  width: 275px;
  max-width: none;
  z-index: 2;
  transform: none;
  filter: drop-shadow(0 30px 58px rgba(7, 27, 51, 0.18));
}

@media (max-width: 991px) {
  .compact-proof-section .sp-screen-pair {
    width: 500px;
    height: 410px;
    margin-bottom: 28px;
  }

  .compact-proof-section .sp-screen-main-small {
    left: 35px;
    top: 92px;
    width: 200px;
  }

  .compact-proof-section .sp-screen-secondary-small {
    left: 205px;
    top: 38px;
    width: 250px;
  }
}

@media (max-width: 575px) {
  .compact-proof-section .sp-screen-pair {
    width: 340px;
    height: 335px;
  }

  .compact-proof-section .sp-screen-main-small {
    left: 10px;
    top: 86px;
    width: 155px;
  }

  .compact-proof-section .sp-screen-secondary-small {
    left: 128px;
    top: 38px;
    width: 205px;
  }
}

/* --- Photo proof section patch v3: move pair up and prevent crop --- */

.compact-proof-section {
  overflow: visible;
}

.compact-proof-section .sp-screen-pair {
  position: relative;
  display: block;
  width: 560px;
  max-width: 100%;
  height: 455px;
  margin: 0 auto;
  overflow: visible;
}

/* Front/left: active checklist, moved up */
.compact-proof-section .sp-screen-main-small {
  position: absolute;
  left: 42px;
  top: 42px;
  width: 220px;
  max-width: none;
  z-index: 3;
  transform: none;
  filter: drop-shadow(0 28px 54px rgba(7, 27, 51, 0.22));
}

/* Back/right: photo proof, moved up */
.compact-proof-section .sp-screen-secondary-small {
  position: absolute;
  left: 225px;
  top: 0;
  width: 275px;
  max-width: none;
  z-index: 2;
  transform: none;
  filter: drop-shadow(0 30px 58px rgba(7, 27, 51, 0.18));
}

@media (max-width: 991px) {
  .compact-proof-section .sp-screen-pair {
    width: 500px;
    height: 420px;
  }

  .compact-proof-section .sp-screen-main-small {
    left: 35px;
    top: 40px;
    width: 200px;
  }

  .compact-proof-section .sp-screen-secondary-small {
    left: 205px;
    top: 0;
    width: 250px;
  }
}

@media (max-width: 575px) {
  .compact-proof-section .sp-screen-pair {
    width: 340px;
    height: 335px;
  }

  .compact-proof-section .sp-screen-main-small {
    left: 10px;
    top: 44px;
    width: 155px;
  }

  .compact-proof-section .sp-screen-secondary-small {
    left: 128px;
    top: 8px;
    width: 205px;
  }
}

/* --- Photo proof section patch v4: shrink rear screen to match hero feel --- */

.compact-proof-section .sp-screen-pair {
  width: 540px;
  max-width: 100%;
  height: 430px;
  overflow: visible;
}

/* Front/left: active checklist stays dominant */
.compact-proof-section .sp-screen-main-small {
  left: 42px;
  top: 42px;
  width: 220px;
  z-index: 3;
}

/* Back/right: photo proof smaller and tucked behind */
.compact-proof-section .sp-screen-secondary-small {
  left: 225px;
  top: 18px;
  width: 245px;
  z-index: 2;
}

@media (max-width: 991px) {
  .compact-proof-section .sp-screen-pair {
    width: 480px;
    height: 400px;
  }

  .compact-proof-section .sp-screen-main-small {
    left: 35px;
    top: 42px;
    width: 200px;
  }

  .compact-proof-section .sp-screen-secondary-small {
    left: 205px;
    top: 18px;
    width: 225px;
  }
}

@media (max-width: 575px) {
  .compact-proof-section .sp-screen-pair {
    width: 330px;
    height: 320px;
  }

  .compact-proof-section .sp-screen-main-small {
    left: 10px;
    top: 44px;
    width: 155px;
  }

  .compact-proof-section .sp-screen-secondary-small {
    left: 128px;
    top: 24px;
    width: 180px;
  }
}

/* --- Photo proof section patch v5: smaller rear screen + move pair up --- */

.compact-proof-section .sp-screen-pair {
  width: 520px;
  max-width: 100%;
  height: 390px;
  margin-top: -28px;
  margin-bottom: 12px;
  overflow: visible;
}

/* Front/left: active checklist stays same size but moves up */
.compact-proof-section .sp-screen-main-small {
  left: 42px;
  top: 18px;
  width: 220px;
  z-index: 3;
}

/* Back/right: photo proof smaller and moved up */
.compact-proof-section .sp-screen-secondary-small {
  left: 220px;
  top: 0;
  width: 215px;
  z-index: 2;
}

@media (max-width: 991px) {
  .compact-proof-section .sp-screen-pair {
    width: 460px;
    height: 365px;
    margin-top: -18px;
  }

  .compact-proof-section .sp-screen-main-small {
    left: 35px;
    top: 18px;
    width: 200px;
  }

  .compact-proof-section .sp-screen-secondary-small {
    left: 200px;
    top: 0;
    width: 200px;
  }
}

@media (max-width: 575px) {
  .compact-proof-section .sp-screen-pair {
    width: 320px;
    height: 300px;
    margin-top: -8px;
  }

  .compact-proof-section .sp-screen-main-small {
    left: 10px;
    top: 20px;
    width: 155px;
  }

  .compact-proof-section .sp-screen-secondary-small {
    left: 128px;
    top: 6px;
    width: 165px;
  }
}

/* --- Photo proof section patch v6: prevent screenshots entering heading territory on narrow widths --- */

@media (max-width: 991px) {
  .compact-proof-section .row {
    display: flex;
    flex-direction: column;
  }

  /* Text block first on tablet/mobile */
  .compact-proof-section .row > .order-2 {
    order: 1;
  }

  /* Screenshot block second on tablet/mobile */
  .compact-proof-section .row > .order-1 {
    order: 2;
  }

  .compact-proof-section .sp-screen-pair {
    margin-top: 36px;
    margin-bottom: 0;
  }
}

@media (max-width: 575px) {
  .compact-proof-section .sp-screen-pair {
    margin-top: 30px;
  }
}

/* --- Responsive section order patch: text first, screenshots below on narrow screens --- */

@media (max-width: 991px) {
  /*
    Applies to normal app screenshot sections:
    - Choose template
    - Generate PDF
    Excludes:
    - Photo proof combined section, which already has custom handling
    - Use cases section
  */

  .sp-section:not(.compact-proof-section):not(#use-cases) > .container > .row {
    display: flex;
    flex-direction: column;
  }

  /* First column is usually the screenshot column, so move it below */
  .sp-section:not(.compact-proof-section):not(#use-cases) > .container > .row > div:first-child {
    order: 2;
  }

  /* Second column is usually the text column, so move it above */
  .sp-section:not(.compact-proof-section):not(#use-cases) > .container > .row > div:last-child {
    order: 1;
  }

  .sp-section:not(.compact-proof-section):not(#use-cases) .sp-screen {
    margin-top: 36px;
    margin-bottom: 0;
  }
}

@media (max-width: 575px) {
  .sp-section:not(.compact-proof-section):not(#use-cases) .sp-screen {
    margin-top: 30px;
  }
}

/* --- Navbar top-layer fix: stop page content covering navbar --- */

/* Force navbar into the highest visual layer */
nav.navbar.main-nav.fixed-top,
.navbar.main-nav.fixed-top,
.main-nav.fixed-top {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 2147483000 !important;
  background: #ffffff !important;
  transform: translateZ(0);
  isolation: isolate;
}

/* Keep navbar contents above its own background */
nav.navbar.main-nav.fixed-top .container,
nav.navbar.main-nav.fixed-top .navbar-brand,
nav.navbar.main-nav.fixed-top .navbar-collapse,
nav.navbar.main-nav.fixed-top .navbar-toggler {
  position: relative;
  z-index: 2147483001 !important;
}

/* Force all page sections below navbar layer */
.stayproof-hero,
.hero-screens,
.hero-screen-main,
.hero-screen-report,
.hero-benefits,
.sp-section,
.compact-proof-section,
.cta-download,
.footer-main,
.footer-bottom {
  position: relative;
  z-index: 1 !important;
}

/* Keep absolutely-positioned screenshots below navbar */
.hero-screen-main,
.hero-screen-report,
.compact-proof-section .sp-screen-main-small,
.compact-proof-section .sp-screen-secondary-small {
  z-index: 2 !important;
}

/* Benefit card should sit above hero background, but below navbar */
.hero-benefits {
  z-index: 3 !important;
}

/* Preserve spacing under fixed navbar */
body.body-wrapper {
  padding-top: 88px;
}

@media (max-width: 991px) {
  body.body-wrapper {
    padding-top: 78px;
  }

  .navbar-collapse {
    position: relative;
    z-index: 2147483002 !important;
  }
}

/* --- Revert navbar side effect: restore screenshot positioning/stacking --- */

/* Keep navbar above content */
nav.navbar.main-nav.fixed-top,
.navbar.main-nav.fixed-top,
.main-nav.fixed-top {
  z-index: 2147483000 !important;
}

/* Restore hero screenshot composition */
.hero-screens {
  position: relative;
  width: 600px;
  max-width: 100%;
  height: 545px;
  min-height: 545px;
  margin-left: auto;
  margin-right: auto;
  overflow: visible;
}

.hero-screen-main {
  position: absolute;
  left: 42px;
  right: auto;
  top: 105px;
  width: 245px;
  z-index: 3 !important;
}

.hero-screen-report {
  position: absolute;
  left: 245px;
  right: auto;
  top: 28px;
  width: 380px;
  z-index: 2 !important;
}

/* Restore photo-proof section screenshot composition */
.compact-proof-section .sp-screen-pair {
  width: 520px;
  max-width: 100%;
  height: 390px;
  margin-top: -28px;
  margin-bottom: 12px;
  overflow: visible;
}

.compact-proof-section .sp-screen-main-small {
  position: absolute;
  left: 42px;
  top: 18px;
  width: 220px;
  z-index: 3 !important;
}

.compact-proof-section .sp-screen-secondary-small {
  position: absolute;
  left: 220px;
  top: 0;
  width: 215px;
  z-index: 2 !important;
}

@media (max-width: 991px) {
  .hero-screens {
    width: 500px;
    height: 445px;
    min-height: 445px;
    margin-top: 44px;
  }

  .hero-screen-main {
    left: 30px;
    top: 92px;
    width: 205px;
    z-index: 3 !important;
  }

  .hero-screen-report {
    left: 210px;
    top: 24px;
    width: 315px;
    z-index: 2 !important;
  }

  .compact-proof-section .sp-screen-pair {
    width: 460px;
    height: 365px;
    margin-top: 36px;
  }

  .compact-proof-section .sp-screen-main-small {
    left: 35px;
    top: 18px;
    width: 200px;
    z-index: 3 !important;
  }

  .compact-proof-section .sp-screen-secondary-small {
    left: 200px;
    top: 0;
    width: 200px;
    z-index: 2 !important;
  }
}

@media (max-width: 575px) {
  .hero-screens {
    width: 340px;
    height: 360px;
    min-height: 360px;
    margin-top: 36px;
  }

  .hero-screen-main {
    left: 8px;
    top: 92px;
    width: 160px;
    z-index: 3 !important;
  }

  .hero-screen-report {
    left: 128px;
    top: 36px;
    width: 235px;
    z-index: 2 !important;
  }

  .compact-proof-section .sp-screen-pair {
    width: 320px;
    height: 300px;
    margin-top: 30px;
  }

  .compact-proof-section .sp-screen-main-small {
    left: 10px;
    top: 20px;
    width: 155px;
    z-index: 3 !important;
  }

  .compact-proof-section .sp-screen-secondary-small {
    left: 128px;
    top: 6px;
    width: 165px;
    z-index: 2 !important;
  }
}

/* --- Sub-header size patch: +10 percent --- */

.hero-eyebrow,
.sp-kicker {
  font-size: 14.5px;
  letter-spacing: 0.085em;
}

@media (max-width: 575px) {
  .hero-eyebrow,
  .sp-kicker {
    font-size: 14px;
  }
}

/* --- Sub-header size patch v2: additional +15 percent --- */

.hero-eyebrow,
.sp-kicker {
  font-size: 16.7px;
  letter-spacing: 0.085em;
}

@media (max-width: 575px) {
  .hero-eyebrow,
  .sp-kicker {
    font-size: 16px;
  }
}

/* --- Feature list alignment fix: wrapped lines align with text, not checkmark --- */

.sp-feature-list li {
  position: relative;
  padding-left: 28px;
  margin-bottom: 10px;
  line-height: 1.45;
}

.sp-feature-list li::before {
  position: absolute;
  left: 0;
  top: 0;
  margin-right: 0;
}

/* --- Footer brand polish --- */

.footer-main .footer-brand-lockup {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
}

.footer-main .footer-brand-lockup img {
  height: 38px;
  width: auto;
  margin: 0;
  background: none;
  padding: 0;
  border-radius: 0;
  box-shadow: none;
}

.footer-main .footer-brand-lockup span {
  color: #ffffff;
  font-size: 25px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: -0.02em;
}

.footer-main p {
  max-width: 390px;
}

/* --- Footer nav column spacing polish --- */

@media (min-width: 992px) {
  .footer-main .row {
    align-items: flex-start;
  }

  /* Brand/company text block */
  .footer-main .row > div:nth-child(1) {
    flex: 0 0 42%;
    max-width: 42%;
  }

  /* Product */
  .footer-main .row > div:nth-child(2) {
    flex: 0 0 160px;
    max-width: 160px;
  }

  /* Company */
  .footer-main .row > div:nth-child(3) {
    flex: 0 0 150px;
    max-width: 150px;
  }

  /* Legal */
  .footer-main .row > div:nth-child(4) {
    flex: 0 0 150px;
    max-width: 150px;
  }

  .footer-main .row > div:nth-child(2),
  .footer-main .row > div:nth-child(3),
  .footer-main .row > div:nth-child(4) {
    padding-left: 10px;
    padding-right: 10px;
  }
}

/* --- Simple internal pages: support / legal --- */

.sp-page {
  background: var(--sp-bg);
}

.sp-page-hero {
  padding: 96px 0 64px;
  background: linear-gradient(135deg, #064e5f 0%, #071b33 100%);
  color: #ffffff;
}

.sp-page-hero h1 {
  color: #ffffff;
  font-size: 52px;
  line-height: 1.08;
  font-weight: 900;
  letter-spacing: -0.04em;
  margin-bottom: 18px;
}

.sp-page-hero p {
  color: rgba(255, 255, 255, 0.82);
  font-size: 18px;
  line-height: 1.7;
  max-width: 720px;
  margin-bottom: 28px;
}

.sp-page-content {
  padding: 72px 0;
}

.sp-info-card {
  height: 100%;
  background: #ffffff;
  border: 1px solid var(--sp-border);
  border-radius: 16px;
  padding: 30px;
  box-shadow: 0 18px 44px rgba(7, 27, 51, 0.06);
}

.sp-info-card h2 {
  color: var(--sp-navy);
  font-size: 24px;
  font-weight: 900;
  margin-bottom: 14px;
}

.sp-info-card p {
  color: var(--sp-muted);
  font-size: 16px;
  line-height: 1.7;
}

.sp-info-card a {
  font-weight: 800;
}

@media (max-width: 767px) {
  .sp-page-hero {
    padding: 72px 0 52px;
  }

  .sp-page-hero h1 {
    font-size: 40px;
  }

  .sp-page-content {
    padding: 52px 0;
  }
}

/* --- Internal page hero kicker contrast fix --- */

.sp-page-hero .sp-kicker {
  color: #c9f2dd;
}

/* --- Support page clean content layout --- */

.support-clean-section {
  padding: 76px 0 86px;
  background: var(--sp-bg);
}

.support-clean-layout {
  max-width: 960px;
}

.support-clean-intro {
  max-width: 820px;
  padding-bottom: 34px;
  border-bottom: 1px solid rgba(7, 27, 51, 0.10);
}

.support-clean-intro h2 {
  color: var(--sp-navy);
  font-size: 36px;
  line-height: 1.18;
  font-weight: 900;
  letter-spacing: -0.035em;
  margin-bottom: 18px;
}

.support-clean-intro p,
.support-clean-item p {
  color: var(--sp-muted);
  font-size: 17px;
  line-height: 1.75;
}

.support-email-line {
  margin-top: 18px;
  font-weight: 800;
}

.support-email-line a {
  color: var(--sp-teal);
  font-weight: 900;
}

.support-clean-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 42px 72px;
  margin-top: 40px;
}

.support-clean-item h3 {
  color: var(--sp-navy);
  font-size: 23px;
  line-height: 1.25;
  font-weight: 900;
  margin-bottom: 12px;
}

.support-clean-wide {
  grid-column: 1 / -1;
  max-width: 760px;
}

@media (max-width: 767px) {
  .support-clean-section {
    padding: 58px 0 66px;
  }

  .support-clean-intro h2 {
    font-size: 30px;
  }

  .support-clean-grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .support-clean-wide {
    grid-column: auto;
  }
}

/* --- Support page layout polish v2: tighter, three-column info row --- */

.support-clean-section {
  padding: 64px 0 74px;
}

.support-clean-layout {
  max-width: 980px;
  margin: 0 auto;
}

.support-clean-intro {
  max-width: 820px;
  padding-bottom: 30px;
  margin-bottom: 0;
}

.support-clean-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 42px;
  margin-top: 38px;
}

.support-clean-wide {
  grid-column: auto;
  max-width: none;
}

.support-clean-item h3 {
  margin-bottom: 10px;
}

@media (max-width: 991px) {
  .support-clean-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }
}

/* --- Legal page list styling --- */

.legal-clean-layout ul {
  color: var(--sp-muted);
  font-size: 16.5px;
  line-height: 1.75;
  margin: 0 0 18px 22px;
  padding-left: 18px;
}

.legal-clean-layout li {
  margin-bottom: 7px;
}

.legal-clean-layout strong {
  color: var(--sp-navy);
}

/* --- Legal page typography polish v2 --- */

body.body-wrapper .legal-clean-section {
  background: #f5f8fb;
  padding: 76px 0 92px;
}

body.body-wrapper .legal-clean-layout {
  max-width: 920px;
  margin: 0 auto;
  background: #ffffff;
  border-radius: 18px;
  padding: 54px 62px;
  box-shadow: 0 24px 70px rgba(7, 27, 51, 0.08);
  border: 1px solid rgba(7, 27, 51, 0.08);
}

/* Last updated line */
body.body-wrapper .legal-clean-layout .legal-updated {
  color: var(--sp-muted);
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 20px;
}

/* Intro paragraph */
body.body-wrapper .legal-clean-layout > p {
  color: var(--sp-muted);
  font-size: 16.5px;
  line-height: 1.75;
  max-width: 820px;
}

/* Section headings */
body.body-wrapper .legal-clean-layout h2 {
  color: var(--sp-navy) !important;
  font-size: 24px !important;
  line-height: 1.28 !important;
  font-weight: 900 !important;
  letter-spacing: -0.02em !important;
  margin-top: 38px !important;
  margin-bottom: 12px !important;
  padding-top: 4px;
}

/* Paragraphs */
body.body-wrapper .legal-clean-layout p {
  color: var(--sp-muted) !important;
  font-size: 16.5px !important;
  line-height: 1.76 !important;
  margin-bottom: 14px !important;
}

/* Links */
body.body-wrapper .legal-clean-layout a {
  color: var(--sp-teal) !important;
  font-weight: 900 !important;
  text-decoration: none;
}

body.body-wrapper .legal-clean-layout a:hover {
  text-decoration: underline;
}

/* Lists */
body.body-wrapper .legal-clean-layout ul {
  list-style: none;
  margin: 14px 0 22px 0 !important;
  padding: 0 !important;
  color: var(--sp-muted);
  font-size: 16.5px;
  line-height: 1.72;
}

body.body-wrapper .legal-clean-layout li {
  position: relative;
  padding-left: 28px;
  margin-bottom: 9px;
  color: var(--sp-muted);
}

body.body-wrapper .legal-clean-layout li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: #16a34a;
  font-weight: 900;
}

body.body-wrapper .legal-clean-layout strong {
  color: var(--sp-navy) !important;
  font-weight: 900;
}

/* Add subtle separators between major sections */
body.body-wrapper .legal-clean-layout h2:not(:first-of-type) {
  border-top: 1px solid rgba(7, 27, 51, 0.08);
  padding-top: 28px;
}

/* Mobile */
@media (max-width: 767px) {
  body.body-wrapper .legal-clean-section {
    padding: 54px 0 68px;
  }

  body.body-wrapper .legal-clean-layout {
    padding: 34px 24px;
    border-radius: 14px;
  }

  body.body-wrapper .legal-clean-layout h2 {
    font-size: 21px !important;
  }

  body.body-wrapper .legal-clean-layout p,
  body.body-wrapper .legal-clean-layout ul {
    font-size: 15.8px !important;
  }
}

/* --- Legal page lists: replace marketing checkmarks with neutral dots --- */

body.body-wrapper .legal-clean-layout li {
  padding-left: 22px;
  margin-bottom: 9px;
}

body.body-wrapper .legal-clean-layout li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.72em;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: rgba(0, 83, 97, 0.55);
}

/* --- Anchor scrolling polish: smooth scroll + fixed navbar offset --- */

html {
  scroll-behavior: smooth;
  scroll-padding-top: 120px;
}

#how-it-works,
#features,
#use-cases {
  scroll-margin-top: 120px;
}

@media (max-width: 991px) {
  html {
    scroll-padding-top: 96px;
  }

  #how-it-works,
  #features,
  #use-cases {
    scroll-margin-top: 96px;
  }
}

/* --- How StayProof works process section --- */

.sp-process-section {
  padding: 78px 0 86px;
  background: #f6f9fb;
}

.sp-section-heading {
  max-width: 760px;
  margin: 0 auto 46px;
}

.sp-section-heading .sp-eyebrow {
  margin-bottom: 12px;
  color: #00546a;
  font-size: 15px;
  line-height: 1.2;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.sp-section-heading h2 {
  margin-bottom: 14px;
  color: #071b33;
  font-size: 38px;
  line-height: 1.12;
  font-weight: 900;
  letter-spacing: -0.035em;
}

.sp-section-heading p {
  margin: 0 auto;
  max-width: 680px;
  color: #60728a;
  font-size: 17px;
  line-height: 1.65;
}

.sp-process-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
  position: relative;
}

.sp-process-card {
  position: relative;
  min-height: 210px;
  padding: 42px 24px 28px;
  background: #ffffff;
  border: 1px solid #dfe8ef;
  border-radius: 10px;
  text-align: center;
  box-shadow: 0 18px 46px rgba(7, 27, 51, 0.06);
}

.sp-process-card:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -24px;
  width: 20px;
  border-top: 2px dotted #8ca3b5;
  transform: translateY(-50%);
}

.sp-process-number {
  position: absolute;
  top: -14px;
  left: 50%;
  display: flex;
  width: 30px;
  height: 30px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: #16a34a;
  color: #ffffff;
  font-size: 14px;
  font-weight: 900;
  transform: translateX(-50%);
  box-shadow: 0 8px 20px rgba(22, 163, 74, 0.25);
}

.sp-process-icon {
  display: flex;
  width: 58px;
  height: 58px;
  margin: 0 auto 18px;
  align-items: center;
  justify-content: center;
  border-radius: 18px;
  background: #e7f4f6;
  color: #064e5f;
  font-size: 28px;
}

.sp-process-card h3 {
  margin-bottom: 10px;
  color: #071b33;
  font-size: 18px;
  line-height: 1.25;
  font-weight: 900;
}

.sp-process-card p {
  margin: 0;
  color: #60728a;
  font-size: 14px;
  line-height: 1.55;
}

@media (max-width: 991px) {
  .sp-process-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 34px 24px;
  }

  .sp-process-card:not(:last-child)::after {
    display: none;
  }
}

@media (max-width: 767px) {
  .sp-process-section {
    padding: 64px 0 70px;
  }

  .sp-section-heading h2 {
    font-size: 31px;
  }

  .sp-section-heading p {
    font-size: 16px;
  }

  .sp-process-grid {
    grid-template-columns: 1fr;
  }

  .sp-process-card {
    min-height: auto;
  }
}

/* --- Use cases card section --- */

.sp-usecases-section {
  padding: 82px 0 92px;
  background: #f6f9fb;
}

.sp-usecases-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
}

.sp-usecase-card {
  min-height: 188px;
  padding: 30px 18px 24px;
  background: #ffffff;
  border: 1px solid #dfe8ef;
  border-radius: 10px;
  text-align: center;
  box-shadow: 0 16px 42px rgba(7, 27, 51, 0.055);
}

.sp-usecase-icon {
  display: flex;
  width: 54px;
  height: 54px;
  margin: 0 auto 18px;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  background: #e7f4f6;
  color: #064e5f;
  font-size: 27px;
}

.sp-usecase-card h3 {
  margin-bottom: 10px;
  color: #071b33;
  font-size: 17px;
  line-height: 1.2;
  font-weight: 900;
}

.sp-usecase-card p {
  margin: 0;
  color: #60728a;
  font-size: 13.5px;
  line-height: 1.48;
}

@media (max-width: 1199px) {
  .sp-usecases-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
  }
}

@media (max-width: 767px) {
  .sp-usecases-section {
    padding: 64px 0 72px;
  }

  .sp-usecases-grid {
    grid-template-columns: 1fr;
  }

  .sp-usecase-card {
    min-height: auto;
  }
}

/* --- Soften process/use-case cards --- */

.sp-process-card,
.sp-usecase-card {
  background: rgba(255, 255, 255, 0.72);
  border-color: rgba(7, 27, 51, 0.07);
  box-shadow: 0 14px 34px rgba(7, 27, 51, 0.035);
}

.sp-process-card:hover,
.sp-usecase-card:hover {
  background: rgba(255, 255, 255, 0.92);
  border-color: rgba(0, 83, 97, 0.14);
  box-shadow: 0 18px 42px rgba(7, 27, 51, 0.055);
}

.sp-process-icon,
.sp-usecase-icon {
  background: rgba(231, 244, 246, 0.78);
}

/* --- Soften process/use-case cards --- */

.sp-process-card,
.sp-usecase-card {
  background: rgba(255, 255, 255, 0.72);
  border-color: rgba(7, 27, 51, 0.07);
  box-shadow: 0 14px 34px rgba(7, 27, 51, 0.035);
}

.sp-process-card:hover,
.sp-usecase-card:hover {
  background: rgba(255, 255, 255, 0.92);
  border-color: rgba(0, 83, 97, 0.14);
  box-shadow: 0 18px 42px rgba(7, 27, 51, 0.055);
}

.sp-process-icon,
.sp-usecase-icon {
  background: rgba(231, 244, 246, 0.78);
}

/* --- Stronger flat-card treatment for process/use-case cards --- */

.sp-process-card,
.sp-usecase-card {
  background: rgba(255, 255, 255, 0.42) !important;
  border: 1px solid rgba(7, 27, 51, 0.035) !important;
  box-shadow: none !important;
}

.sp-process-card:hover,
.sp-usecase-card:hover {
  background: rgba(255, 255, 255, 0.68) !important;
  border-color: rgba(0, 83, 97, 0.10) !important;
  box-shadow: none !important;
}

.sp-process-icon,
.sp-usecase-icon {
  background: rgba(231, 244, 246, 0.72) !important;
  box-shadow: none !important;
}

.sp-process-section,
.sp-usecases-section {
  background: #f6f9fb !important;
}

/* --- Final card treatment: no border, soft shadow, no hover jump/highlight --- */

.sp-process-card,
.sp-usecase-card {
  background: rgba(255, 255, 255, 0.72) !important;
  border: none !important;
  box-shadow: 0 18px 42px rgba(7, 27, 51, 0.045) !important;
}

.sp-process-card:hover,
.sp-usecase-card:hover {
  background: rgba(255, 255, 255, 0.72) !important;
  border: none !important;
  box-shadow: 0 18px 42px rgba(7, 27, 51, 0.045) !important;
  transform: none !important;
}

.sp-process-card::before,
.sp-usecase-card::before {
  display: none !important;
}

/* --- Use cases: single shared panel, larger icons/text --- */

.sp-usecases-grid {
  max-width: 1100px;
  margin: 0 auto;
  padding: 32px 28px;
  background: rgba(255, 255, 255, 0.82);
  border-radius: 18px;
  box-shadow: 0 24px 70px rgba(7, 27, 51, 0.055);
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
}

.sp-usecase-card {
  min-height: 0 !important;
  padding: 14px 16px 10px !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.sp-usecase-card:hover {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  transform: none !important;
}

.sp-usecase-icon {
  width: 58px !important;
  height: 58px !important;
  margin-bottom: 18px !important;
  border-radius: 17px !important;
  background: rgba(231, 244, 246, 0.9) !important;
  color: #064e5f !important;
  font-size: 30px !important;
}

.sp-usecase-card h3 {
  font-size: 18px !important;
  line-height: 1.18 !important;
  margin-bottom: 11px !important;
  font-weight: 900 !important;
}

.sp-usecase-card p {
  font-size: 14.5px !important;
  line-height: 1.5 !important;
  color: #60728a !important;
}

@media (max-width: 1199px) {
  .sp-usecases-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 22px 12px;
  }
}

@media (max-width: 767px) {
  .sp-usecases-grid {
    grid-template-columns: 1fr;
    padding: 24px 18px;
    gap: 18px;
  }

  .sp-usecase-card {
    padding: 10px 8px !important;
  }
}

/* --- Use cases final polish: tighter panel, stronger readability --- */

.sp-usecases-grid {
  max-width: 1040px !important;
  padding: 30px 24px !important;
  gap: 8px !important;
}

.sp-usecase-card {
  padding: 12px 14px 8px !important;
}

.sp-usecase-icon {
  width: 60px !important;
  height: 60px !important;
  margin-bottom: 17px !important;
  font-size: 31px !important;
}

.sp-usecase-card h3 {
  font-size: 18.5px !important;
  line-height: 1.16 !important;
  margin-bottom: 12px !important;
}

.sp-usecase-card p {
  font-size: 15px !important;
  line-height: 1.46 !important;
}

@media (max-width: 1199px) {
  .sp-usecases-grid {
    max-width: 860px !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 24px 12px !important;
  }
}

@media (max-width: 767px) {
  .sp-usecases-grid {
    max-width: 100% !important;
    padding: 24px 18px !important;
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
}

/* --- Local-first privacy banner --- */

.sp-privacy-section {
  padding: 74px 0;
  background: #f6f9fb;
}

.sp-privacy-panel {
  display: grid;
  grid-template-columns: 130px 1fr 320px;
  gap: 34px;
  align-items: center;
  padding: 44px 48px;
  border-radius: 24px;
  background: linear-gradient(135deg, rgba(231, 244, 246, 0.98), rgba(255, 255, 255, 0.88));
  box-shadow: 0 24px 70px rgba(7, 27, 51, 0.06);
}

.sp-privacy-icon {
  display: flex;
  width: 104px;
  height: 104px;
  align-items: center;
  justify-content: center;
  border-radius: 30px;
  background: rgba(255, 255, 255, 0.72);
  color: #064e5f;
  font-size: 48px;
  box-shadow: 0 18px 44px rgba(7, 27, 51, 0.055);
}

.sp-privacy-copy .sp-eyebrow {
  margin-bottom: 10px;
  color: #00546a;
  font-size: 15px;
  line-height: 1.2;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.sp-privacy-copy h2 {
  margin-bottom: 14px;
  color: #071b33;
  font-size: 34px;
  line-height: 1.12;
  font-weight: 900;
  letter-spacing: -0.035em;
}

.sp-privacy-copy p {
  max-width: 720px;
  margin-bottom: 22px;
  color: #60728a;
  font-size: 16.5px;
  line-height: 1.68;
}

.sp-privacy-points {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 18px;
}

.sp-privacy-points span {
  position: relative;
  padding-left: 24px;
  color: #071b33;
  font-size: 14.5px;
  font-weight: 800;
}

.sp-privacy-points span::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: -1px;
  color: #16a34a;
  font-weight: 900;
}

.sp-privacy-share-card {
  padding: 28px 26px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 18px 46px rgba(7, 27, 51, 0.055);
}

.sp-privacy-share-icon {
  display: flex;
  width: 48px;
  height: 48px;
  margin-bottom: 16px;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  background: #e7f4f6;
  color: #064e5f;
  font-size: 24px;
}

.sp-privacy-share-card h3 {
  margin-bottom: 10px;
  color: #071b33;
  font-size: 18px;
  line-height: 1.25;
  font-weight: 900;
}

.sp-privacy-share-card p {
  margin: 0;
  color: #60728a;
  font-size: 14.5px;
  line-height: 1.55;
}

@media (max-width: 991px) {
  .sp-privacy-panel {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .sp-privacy-icon {
    width: 86px;
    height: 86px;
    font-size: 40px;
  }

  .sp-privacy-share-card {
    max-width: 420px;
  }
}

@media (max-width: 767px) {
  .sp-privacy-section {
    padding: 58px 0;
  }

  .sp-privacy-panel {
    padding: 32px 24px;
    border-radius: 18px;
  }

  .sp-privacy-copy h2 {
    font-size: 29px;
  }

  .sp-privacy-copy p {
    font-size: 15.8px;
  }

  .sp-privacy-points {
    flex-direction: column;
    gap: 10px;
  }
}

/* --- Use Cases panel polish --- */

#use-cases .sp-use-cases-panel {
  position: relative;
  padding: 42px 36px;
  border: none !important;
  border-radius: 24px;
  background: linear-gradient(135deg, rgba(231, 244, 246, 0.82), rgba(255, 255, 255, 0.96));
  box-shadow: 0 24px 70px rgba(7, 27, 51, 0.06);
  overflow: hidden;
}

#use-cases .sp-use-cases-panel::before {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: 23px;
  background: linear-gradient(180deg, rgba(255,255,255,0.42), rgba(255,255,255,0));
  pointer-events: none;
}

#use-cases .sp-use-cases-grid {
  position: relative;
  z-index: 1;
  gap: 10px;
  align-items: start;
}

#use-cases .sp-use-case-item {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 10px 14px 6px;
  transition: none !important;
}

#use-cases .sp-use-case-item:hover {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
}

#use-cases .sp-use-case-icon {
  width: 58px;
  height: 58px;
  margin: 0 auto 16px;
  border-radius: 18px;
  background: rgba(231, 244, 246, 0.9);
  box-shadow: 0 10px 24px rgba(7, 27, 51, 0.04);
}

#use-cases .sp-use-case-icon i {
  font-size: 24px;
}

#use-cases .sp-use-case-item h3 {
  margin-bottom: 12px;
  font-size: 18px;
  line-height: 1.18;
  font-weight: 900;
  letter-spacing: -0.02em;
}

#use-cases .sp-use-case-item p {
  margin: 0 auto;
  max-width: 210px;
  font-size: 15px;
  line-height: 1.55;
  color: #60728a;
}

@media (max-width: 991px) {
  #use-cases .sp-use-cases-panel {
    padding: 34px 26px;
  }

  #use-cases .sp-use-cases-grid {
    gap: 22px;
  }

  #use-cases .sp-use-case-item p {
    max-width: 260px;
  }
}

@media (max-width: 767px) {
  #use-cases .sp-use-cases-panel {
    padding: 28px 20px;
    border-radius: 18px;
  }

  #use-cases .sp-use-case-item {
    padding: 8px 6px;
  }
}

/* --- Use Cases final gradient panel - corrected selectors --- */

#use-cases .sp-usecases-grid {
  max-width: 1040px !important;
  margin: 0 auto !important;
  padding: 42px 38px !important;
  border: none !important;
  border-radius: 24px !important;
  background: linear-gradient(135deg, rgba(231, 244, 246, 0.88), rgba(255, 255, 255, 0.96)) !important;
  box-shadow: 0 24px 70px rgba(7, 27, 51, 0.065) !important;
  overflow: hidden !important;
}

#use-cases .sp-usecase-card {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 10px 14px 6px !important;
  transform: none !important;
}

#use-cases .sp-usecase-card:hover {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  transform: none !important;
}

#use-cases .sp-usecase-icon {
  width: 62px !important;
  height: 62px !important;
  margin-bottom: 17px !important;
  border-radius: 18px !important;
  background: rgba(255, 255, 255, 0.68) !important;
  box-shadow: 0 12px 28px rgba(7, 27, 51, 0.045) !important;
  color: #064e5f !important;
  font-size: 31px !important;
}

#use-cases .sp-usecase-card h3 {
  font-size: 19px !important;
  line-height: 1.16 !important;
  margin-bottom: 12px !important;
  font-weight: 900 !important;
  letter-spacing: -0.02em !important;
}

#use-cases .sp-usecase-card p {
  max-width: 210px !important;
  margin: 0 auto !important;
  font-size: 15px !important;
  line-height: 1.5 !important;
  color: #60728a !important;
}

@media (max-width: 1199px) {
  #use-cases .sp-usecases-grid {
    max-width: 860px !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 24px 12px !important;
    padding: 36px 28px !important;
  }
}

@media (max-width: 767px) {
  #use-cases .sp-usecases-grid {
    max-width: 100% !important;
    grid-template-columns: 1fr !important;
    padding: 28px 20px !important;
    gap: 20px !important;
    border-radius: 18px !important;
  }

  #use-cases .sp-usecase-card {
    padding: 8px 6px !important;
  }

  #use-cases .sp-usecase-card p {
    max-width: 260px !important;
  }
}

/* --- How StayProof works final gradient panel --- */

#how-it-works .sp-process-grid {
  max-width: 1040px !important;
  margin: 0 auto !important;
  padding: 42px 38px !important;
  border: none !important;
  border-radius: 24px !important;
  background: linear-gradient(135deg, rgba(231, 244, 246, 0.88), rgba(255, 255, 255, 0.96)) !important;
  box-shadow: 0 24px 70px rgba(7, 27, 51, 0.065) !important;
  overflow: visible !important;
  gap: 18px !important;
}

#how-it-works .sp-process-card {
  min-height: 0 !important;
  padding: 36px 16px 8px !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  transform: none !important;
}

#how-it-works .sp-process-card:hover {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  transform: none !important;
}

#how-it-works .sp-process-icon {
  width: 62px !important;
  height: 62px !important;
  margin-bottom: 17px !important;
  border-radius: 18px !important;
  background: rgba(255, 255, 255, 0.68) !important;
  box-shadow: 0 12px 28px rgba(7, 27, 51, 0.045) !important;
  color: #064e5f !important;
  font-size: 31px !important;
}

#how-it-works .sp-process-card h3 {
  font-size: 19px !important;
  line-height: 1.16 !important;
  margin-bottom: 12px !important;
  font-weight: 900 !important;
  letter-spacing: -0.02em !important;
}

#how-it-works .sp-process-card p {
  max-width: 210px !important;
  margin: 0 auto !important;
  font-size: 15px !important;
  line-height: 1.5 !important;
  color: #60728a !important;
}

#how-it-works .sp-process-number {
  top: -12px !important;
}

#how-it-works .sp-process-card:not(:last-child)::after {
  top: 54% !important;
  right: -18px !important;
  width: 18px !important;
  border-top: 2px dotted rgba(100, 116, 139, 0.55) !important;
}

@media (max-width: 1199px) {
  #how-it-works .sp-process-grid {
    max-width: 860px !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 30px 18px !important;
    padding: 38px 28px !important;
  }

  #how-it-works .sp-process-card:not(:last-child)::after {
    display: none !important;
  }
}

@media (max-width: 767px) {
  #how-it-works .sp-process-grid {
    max-width: 100% !important;
    grid-template-columns: 1fr !important;
    padding: 28px 20px !important;
    gap: 22px !important;
    border-radius: 18px !important;
  }

  #how-it-works .sp-process-card {
    padding: 34px 8px 8px !important;
  }

  #how-it-works .sp-process-card p {
    max-width: 260px !important;
  }
}

/* --- Hero feature strip gradient polish --- */

.sp-hero-features,
.sp-feature-strip,
.sp-hero-card-panel {
  border: none !important;
  border-radius: 24px !important;
  background: linear-gradient(135deg, rgba(231, 244, 246, 0.88), rgba(255, 255, 255, 0.96)) !important;
  box-shadow: 0 24px 70px rgba(7, 27, 51, 0.065) !important;
}

.sp-hero-features .feature-item,
.sp-feature-strip .feature-item,
.sp-hero-card-panel .feature-item,
.sp-hero-features .sp-feature-item,
.sp-feature-strip .sp-feature-item,
.sp-hero-card-panel .sp-feature-item {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.sp-hero-features i,
.sp-feature-strip i,
.sp-hero-card-panel i {
  background: rgba(255, 255, 255, 0.68) !important;
  box-shadow: 0 12px 28px rgba(7, 27, 51, 0.045) !important;
}

.sp-hero-features h3,
.sp-feature-strip h3,
.sp-hero-card-panel h3 {
  font-size: 19px !important;
  line-height: 1.16 !important;
  font-weight: 900 !important;
  letter-spacing: -0.02em !important;
}

.sp-hero-features p,
.sp-feature-strip p,
.sp-hero-card-panel p {
  font-size: 15px !important;
  line-height: 1.5 !important;
  color: #60728a !important;
}

@media (max-width: 767px) {
  .sp-hero-features,
  .sp-feature-strip,
  .sp-hero-card-panel {
    border-radius: 18px !important;
  }
}

/* --- Hero benefits strip gradient polish - corrected selectors --- */

.hero-benefits .benefits-card {
  border: none !important;
  border-radius: 24px !important;
  background: linear-gradient(135deg, rgba(231, 244, 246, 0.88), rgba(255, 255, 255, 0.96)) !important;
  box-shadow: 0 24px 70px rgba(7, 27, 51, 0.065) !important;
  overflow: hidden !important;
}

.hero-benefits .benefit-item {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  transform: none !important;
}

.hero-benefits .benefit-item:hover {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  transform: none !important;
}

.hero-benefits .benefit-icon {
  width: 62px !important;
  height: 62px !important;
  margin: 0 auto 17px !important;
  border-radius: 18px !important;
  background: rgba(255, 255, 255, 0.68) !important;
  box-shadow: 0 12px 28px rgba(7, 27, 51, 0.045) !important;
  color: #064e5f !important;
  font-size: 31px !important;
}

.hero-benefits .benefit-icon i {
  font-size: 31px !important;
}

.hero-benefits .benefit-item h3 {
  font-size: 19px !important;
  line-height: 1.16 !important;
  font-weight: 900 !important;
  letter-spacing: -0.02em !important;
}

.hero-benefits .benefit-item p {
  max-width: 260px !important;
  margin: 0 auto !important;
  font-size: 15px !important;
  line-height: 1.5 !important;
  color: #60728a !important;
}

@media (max-width: 767px) {
  .hero-benefits .benefits-card {
    border-radius: 18px !important;
  }
}

/* --- Hero benefits strip fix: subtler premium panel --- */

.hero-benefits .benefits-card {
  border: none !important;
  border-radius: 24px !important;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(238, 248, 250, 0.72)) !important;
  box-shadow: 0 24px 70px rgba(7, 27, 51, 0.065) !important;
  overflow: hidden !important;
}

.hero-benefits .benefit-item {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  transform: none !important;
}

.hero-benefits .benefit-item:hover {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  transform: none !important;
}

.hero-benefits .benefit-icon {
  width: 56px !important;
  height: 56px !important;
  margin: 0 auto 16px !important;
  border-radius: 16px !important;
  background: rgba(231, 244, 246, 0.95) !important;
  box-shadow: 0 10px 24px rgba(7, 27, 51, 0.04) !important;
  color: #064e5f !important;
  font-size: 28px !important;
}

.hero-benefits .benefit-icon i {
  font-size: 28px !important;
}

.hero-benefits .benefit-item h3 {
  font-size: 18.5px !important;
  line-height: 1.18 !important;
  font-weight: 900 !important;
  letter-spacing: -0.02em !important;
}

.hero-benefits .benefit-item p {
  max-width: 260px !important;
  margin: 0 auto !important;
  font-size: 15px !important;
  line-height: 1.5 !important;
  color: #60728a !important;
}

/* --- Hero benefits strip fix: fully opaque premium panel --- */

.hero-benefits .benefits-card {
  border: none !important;
  border-radius: 24px !important;
  background: linear-gradient(135deg, #ffffff 0%, #f1fafb 100%) !important;
  box-shadow: 0 24px 70px rgba(7, 27, 51, 0.065) !important;
  overflow: hidden !important;
}

.hero-benefits .benefit-icon {
  background: #e7f4f6 !important;
  box-shadow: 0 10px 24px rgba(7, 27, 51, 0.04) !important;
}

/* --- Inspection Setup overlap screenshots --- */

.sp-inspection-setup-section {
  padding: 96px 0 !important;
  background: #ffffff !important;
}

.sp-inspection-setup-layout {
  display: grid;
  grid-template-columns: minmax(320px, 0.9fr) minmax(420px, 1.1fr);
  gap: 76px;
  align-items: center;
  max-width: 1080px;
  margin: 0 auto;
}

.sp-inspection-setup-visual {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 560px;
}

.sp-overlap-phone-stack {
  position: relative;
  width: 420px;
  height: 560px;
}

.sp-overlap-phone {
  position: absolute;
  display: block;
  width: auto;
  filter: drop-shadow(0 28px 52px rgba(7, 27, 51, 0.12));
}

.sp-overlap-phone--front {
  z-index: 2;
  left: 18px;
  top: 54px;
  height: 500px;
}

.sp-overlap-phone--back {
  z-index: 1;
  right: 4px;
  top: 0;
  height: 445px;
  opacity: 0.96;
}

.sp-inspection-setup-copy h2 {
  max-width: 680px;
}

.sp-inspection-setup-copy p {
  max-width: 720px;
}

@media (max-width: 991px) {
  .sp-inspection-setup-section {
    padding: 76px 0 !important;
  }

  .sp-inspection-setup-layout {
    grid-template-columns: 1fr;
    gap: 42px;
  }

  .sp-inspection-setup-visual {
    order: 1;
    min-height: 500px;
  }

  .sp-inspection-setup-copy {
    order: 2;
    max-width: 760px;
    margin: 0 auto;
  }

  .sp-overlap-phone-stack {
    width: 360px;
    height: 500px;
  }

  .sp-overlap-phone--front {
    left: 10px;
    top: 58px;
    height: 430px;
  }

  .sp-overlap-phone--back {
    right: 0;
    top: 0;
    height: 385px;
  }
}

@media (max-width: 575px) {
  .sp-inspection-setup-visual {
    min-height: 430px;
  }

  .sp-overlap-phone-stack {
    width: 300px;
    height: 430px;
  }

  .sp-overlap-phone--front {
    left: 0;
    top: 62px;
    height: 360px;
  }

  .sp-overlap-phone--back {
    right: 0;
    top: 0;
    height: 320px;
  }
}

/* --- Inspection Setup text/background fix --- */

.sp-inspection-setup-section {
  background: linear-gradient(180deg, #ffffff 0%, #f7fafc 100%) !important;
  border-bottom: 1px solid rgba(203, 213, 225, 0.45);
}

.sp-inspection-setup-copy .sp-kicker {
  margin-bottom: 18px;
}

.sp-inspection-setup-copy h2 {
  margin-bottom: 22px;
  color: #071b33;
  font-size: 42px;
  line-height: 1.12;
  font-weight: 900;
  letter-spacing: -0.035em;
}

.sp-inspection-setup-copy p {
  margin-bottom: 26px;
  color: #60728a;
  font-size: 17px;
  line-height: 1.68;
}

.sp-inspection-setup-copy .sp-check-list {
  display: grid;
  gap: 13px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sp-inspection-setup-copy .sp-check-list li {
  position: relative;
  margin: 0;
  padding-left: 30px;
  color: #071b33;
  font-size: 16.5px;
  line-height: 1.45;
  font-weight: 800;
}

.sp-inspection-setup-copy .sp-check-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: #16a34a;
  font-weight: 900;
}

@media (max-width: 991px) {
  .sp-inspection-setup-copy h2 {
    font-size: 38px;
  }
}

@media (max-width: 575px) {
  .sp-inspection-setup-copy h2 {
    font-size: 32px;
  }

  .sp-inspection-setup-copy p {
    font-size: 16px;
  }

  .sp-inspection-setup-copy .sp-check-list li {
    font-size: 15.8px;
  }
}

/* --- PDF Reports section final layout/text fix --- */

section#pdf-reports.sp-pdf-reports-section {
  padding: 96px 0 !important;
  background: linear-gradient(180deg, #ffffff 0%, #f7fafc 100%) !important;
  border-bottom: 1px solid rgba(203, 213, 225, 0.45) !important;
}

section#pdf-reports .sp-pdf-reports-layout {
  display: grid !important;
  grid-template-columns: minmax(320px, 0.9fr) minmax(420px, 1.1fr) !important;
  gap: 76px !important;
  align-items: center !important;
  max-width: 1080px !important;
  margin: 0 auto !important;
}

section#pdf-reports .sp-pdf-reports-visual {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  min-height: 560px !important;
}

section#pdf-reports .sp-overlap-phone-stack--pdf {
  position: relative !important;
  width: 430px !important;
  height: 560px !important;
}

section#pdf-reports .sp-overlap-phone--pdf-main {
  z-index: 2 !important;
  left: 18px !important;
  top: 50px !important;
  height: 500px !important;
}

section#pdf-reports .sp-overlap-phone--review {
  z-index: 1 !important;
  right: 0 !important;
  top: 0 !important;
  height: 445px !important;
  opacity: 0.96 !important;
}

section#pdf-reports .sp-pdf-reports-copy .sp-kicker {
  margin-bottom: 18px !important;
}

section#pdf-reports .sp-pdf-reports-copy h2 {
  max-width: 720px !important;
  margin-bottom: 22px !important;
  color: #071b33 !important;
  font-size: 42px !important;
  line-height: 1.12 !important;
  font-weight: 900 !important;
  letter-spacing: -0.035em !important;
}

section#pdf-reports .sp-pdf-reports-copy p {
  max-width: 720px !important;
  margin-bottom: 26px !important;
  color: #60728a !important;
  font-size: 17px !important;
  line-height: 1.68 !important;
}

section#pdf-reports .sp-pdf-reports-copy .sp-check-list {
  display: grid !important;
  gap: 13px !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

section#pdf-reports .sp-pdf-reports-copy .sp-check-list li {
  position: relative !important;
  margin: 0 !important;
  padding-left: 30px !important;
  color: #071b33 !important;
  font-size: 16.5px !important;
  line-height: 1.45 !important;
  font-weight: 800 !important;
}

section#pdf-reports .sp-pdf-reports-copy .sp-check-list li::before {
  content: "✓" !important;
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  color: #16a34a !important;
  font-weight: 900 !important;
}

@media (max-width: 991px) {
  section#pdf-reports.sp-pdf-reports-section {
    padding: 76px 0 !important;
  }

  section#pdf-reports .sp-pdf-reports-layout {
    grid-template-columns: 1fr !important;
    gap: 42px !important;
  }

  section#pdf-reports .sp-pdf-reports-visual {
    order: 1 !important;
    min-height: 500px !important;
  }

  section#pdf-reports .sp-pdf-reports-copy {
    order: 2 !important;
    max-width: 760px !important;
    margin: 0 auto !important;
  }

  section#pdf-reports .sp-overlap-phone-stack--pdf {
    width: 360px !important;
    height: 500px !important;
  }

  section#pdf-reports .sp-overlap-phone--pdf-main {
    left: 10px !important;
    top: 58px !important;
    height: 430px !important;
  }

  section#pdf-reports .sp-overlap-phone--review {
    right: 0 !important;
    top: 0 !important;
    height: 385px !important;
  }

  section#pdf-reports .sp-pdf-reports-copy h2 {
    font-size: 38px !important;
  }
}

@media (max-width: 575px) {
  section#pdf-reports .sp-pdf-reports-visual {
    min-height: 430px !important;
  }

  section#pdf-reports .sp-overlap-phone-stack--pdf {
    width: 300px !important;
    height: 430px !important;
  }

  section#pdf-reports .sp-overlap-phone--pdf-main {
    left: 0 !important;
    top: 62px !important;
    height: 360px !important;
  }

  section#pdf-reports .sp-overlap-phone--review {
    right: 0 !important;
    top: 0 !important;
    height: 320px !important;
  }

  section#pdf-reports .sp-pdf-reports-copy h2 {
    font-size: 32px !important;
  }

  section#pdf-reports .sp-pdf-reports-copy p {
    font-size: 16px !important;
  }

  section#pdf-reports .sp-pdf-reports-copy .sp-check-list li {
    font-size: 15.8px !important;
  }
}

/* --- Remove section divider lines after Inspection Setup and PDF Reports --- */

.sp-inspection-setup-section,
.sp-pdf-reports-section,
section#features.sp-inspection-setup-section,
section#pdf-reports.sp-pdf-reports-section {
  border-bottom: none !important;
}

/* --- Uniform screenshot shadows across homepage sections --- */

.sp-overlap-phone,
#features .sp-overlap-phone,
#photo-proof .sp-screen-pair img,
#photo-proof .sp-screen,
#photo-proof .sp-screen-main-small,
#photo-proof .sp-screen-secondary-small,
#pdf-reports .sp-overlap-phone {
  filter: drop-shadow(0 28px 54px rgba(7, 27, 51, 0.12)) !important;
}

.sp-overlap-phone--back,
#photo-proof .sp-screen-secondary-small,
#pdf-reports .sp-overlap-phone--back {
  opacity: 0.96 !important;
}

.sp-overlap-phone--front,
#photo-proof .sp-screen-main-small,
#pdf-reports .sp-overlap-phone--front {
  opacity: 1 !important;
}

/* --- Mobile order fix: text before screenshots for setup/report sections --- */

@media (max-width: 991px) {
  .sp-inspection-setup-copy,
  .sp-pdf-reports-copy {
    order: 1 !important;
  }

  .sp-inspection-setup-visual,
  .sp-pdf-reports-visual {
    order: 2 !important;
  }

  .sp-inspection-setup-layout,
  .sp-pdf-reports-layout {
    gap: 34px !important;
  }
}

@media (max-width: 575px) {
  .sp-inspection-setup-visual,
  .sp-pdf-reports-visual {
    margin-top: 6px !important;
  }
}

/* --- Footer layout polish --- */

.footer-main {
  padding: 72px 0 58px !important;
}

.footer-main .row {
  display: grid !important;
  grid-template-columns: minmax(280px, 1.5fr) minmax(120px, 0.7fr) minmax(120px, 0.7fr) minmax(120px, 0.7fr) !important;
  gap: 44px !important;
  align-items: start !important;
}

.footer-main .row > [class*="col-"] {
  width: auto !important;
  max-width: none !important;
  flex: none !important;
  padding-left: 15px !important;
  padding-right: 15px !important;
}

.footer-main .block {
  margin-bottom: 0 !important;
}

.footer-main .block img {
  margin-bottom: 22px !important;
}

.footer-main .block p {
  max-width: 380px !important;
  margin-bottom: 0 !important;
  color: rgba(255, 255, 255, 0.58) !important;
  font-size: 15.5px !important;
  line-height: 1.6 !important;
}

.footer-main h6,
.footer-main .block-2 h6 {
  margin-bottom: 18px !important;
  color: #ffffff !important;
  font-size: 14px !important;
  font-weight: 900 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
}

.footer-main ul {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.footer-main ul li {
  margin-bottom: 12px !important;
}

.footer-main ul li:last-child {
  margin-bottom: 0 !important;
}

.footer-main ul li a {
  color: rgba(255, 255, 255, 0.72) !important;
  font-size: 15.5px !important;
  line-height: 1.4 !important;
}

.footer-main ul li a:hover {
  color: #ffffff !important;
}

.footer-classic {
  padding: 18px 0 !important;
}

.footer-classic p,
.footer-classic .copyright-text {
  margin: 0 !important;
  color: rgba(255, 255, 255, 0.54) !important;
  font-size: 14px !important;
}

/* Tablet: brand full-width, three footer columns below */
@media (max-width: 991px) {
  .footer-main {
    padding: 58px 0 46px !important;
  }

  .footer-main .row {
    grid-template-columns: repeat(3, minmax(120px, 1fr)) !important;
    gap: 38px 34px !important;
  }

  .footer-main .row > [class*="col-"]:first-child {
    grid-column: 1 / -1 !important;
  }

  .footer-main .block p {
    max-width: 480px !important;
  }
}

/* Mobile: clean single-column stack */
@media (max-width: 575px) {
  .footer-main {
    padding: 46px 0 38px !important;
  }

  .footer-main .row {
    grid-template-columns: 1fr !important;
    gap: 30px !important;
  }

  .footer-main .row > [class*="col-"] {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  .footer-main .block img {
    margin-bottom: 18px !important;
  }

  .footer-main h6,
  .footer-main .block-2 h6 {
    margin-bottom: 14px !important;
  }

  .footer-main ul li {
    margin-bottom: 10px !important;
  }
}

/* --- Match How StayProof Works kicker size with other section headers --- */

#how-it-works .sp-kicker,
#how-it-works .sp-eyebrow {
  font-size: 16.7px !important;
}

/* --- Match Use Cases kicker size with other section headers --- */

#use-cases .sp-kicker,
#use-cases .sp-eyebrow {
  font-size: 16.7px !important;
}

/* --- Mobile order fix: PDF Reports text before screenshots --- */

@media (max-width: 991px) {
  section#pdf-reports .sp-pdf-reports-copy {
    order: 1 !important;
  }

  section#pdf-reports .sp-pdf-reports-visual {
    order: 2 !important;
  }
}

/* --- Mobile footer: keep Product / Company / Legal in one row --- */

@media (max-width: 575px) {
  .footer-main .row {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 28px 18px !important;
    align-items: start !important;
  }

  .footer-main .row > [class*="col-"]:first-child {
    grid-column: 1 / -1 !important;
  }

  .footer-main .row > [class*="col-"] {
    width: auto !important;
    max-width: none !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  .footer-main .block p {
    max-width: 360px !important;
    font-size: 14.5px !important;
    line-height: 1.55 !important;
  }

  .footer-main h6,
  .footer-main .block-2 h6 {
    margin-bottom: 12px !important;
    font-size: 13px !important;
    letter-spacing: 0.035em !important;
  }

  .footer-main ul li {
    margin-bottom: 9px !important;
  }

  .footer-main ul li a {
    font-size: 14.5px !important;
    line-height: 1.35 !important;
  }
}

@media (max-width: 370px) {
  .footer-main .row {
    gap: 26px 12px !important;
  }

  .footer-main h6,
  .footer-main .block-2 h6 {
    font-size: 12.5px !important;
  }

  .footer-main ul li a {
    font-size: 13.8px !important;
  }
}

/* --- Final mobile hero screenshot layout: match Inspection Setup stack --- */
/* Mobile only. Desktop/tablet hero remains unchanged. */

@media (max-width: 575px) {
  .stayproof-hero .hero-screens {
    position: relative !important;
    display: block !important;
    width: 300px !important;
    max-width: calc(100vw - 40px) !important;
    height: 430px !important;
    min-height: 430px !important;
    margin: 34px auto 0 !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  .stayproof-hero .hero-screen-main,
  .stayproof-hero .hero-screen-report {
    position: absolute !important;
    display: block !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    filter: drop-shadow(0 28px 54px rgba(7, 27, 51, 0.12)) !important;
  }

  .stayproof-hero .hero-screen-main {
    left: 0 !important;
    right: auto !important;
    top: 62px !important;
    height: 360px !important;
    z-index: 3 !important;
  }

  .stayproof-hero .hero-screen-report {
    left: auto !important;
    right: 0 !important;
    top: 0 !important;
    height: 320px !important;
    z-index: 2 !important;
    opacity: 0.96 !important;
  }
}

/* --- Final mobile hero screenshot tuning: larger and visually centred --- */

@media (max-width: 575px) {
  .stayproof-hero .hero-screens {
    width: 340px !important;
    max-width: calc(100vw - 24px) !important;
    height: 475px !important;
    min-height: 475px !important;
    margin: 38px auto 0 !important;
  }

  .stayproof-hero .hero-screen-main {
    left: -2px !important;
    top: 72px !important;
    height: 395px !important;
  }

  .stayproof-hero .hero-screen-report {
    right: -2px !important;
    top: 0 !important;
    height: 355px !important;
  }
}

@media (max-width: 390px) {
  .stayproof-hero .hero-screens {
    width: 322px !important;
    height: 455px !important;
  }

  .stayproof-hero .hero-screen-main {
    left: -4px !important;
    top: 70px !important;
    height: 378px !important;
  }

  .stayproof-hero .hero-screen-report {
    right: -4px !important;
    height: 340px !important;
  }
}

/* --- Final mobile hero screenshot tuning: larger and left-centred --- */

@media (max-width: 575px) {
  .stayproof-hero .hero-screens {
    width: 350px !important;
    max-width: calc(100vw - 18px) !important;
    height: 500px !important;
    min-height: 500px !important;
    margin: 38px auto 0 !important;
    transform: translateX(-18px) !important;
  }

  .stayproof-hero .hero-screen-main {
    left: -8px !important;
    top: 74px !important;
    height: 415px !important;
  }

  .stayproof-hero .hero-screen-report {
    right: 10px !important;
    top: 0 !important;
    height: 370px !important;
  }
}

@media (max-width: 390px) {
  .stayproof-hero .hero-screens {
    width: 334px !important;
    height: 475px !important;
    min-height: 475px !important;
    transform: translateX(-16px) !important;
  }

  .stayproof-hero .hero-screen-main {
    left: -10px !important;
    top: 72px !important;
    height: 395px !important;
  }

  .stayproof-hero .hero-screen-report {
    right: 8px !important;
    height: 352px !important;
  }
}

/* --- Final mobile hero screenshot tuning: slightly larger, further left --- */

@media (max-width: 575px) {
  .stayproof-hero .hero-screens {
    width: 370px !important;
    max-width: calc(100vw - 10px) !important;
    height: 525px !important;
    min-height: 525px !important;
    margin: 38px auto 0 !important;
    transform: translateX(-32px) !important;
  }

  .stayproof-hero .hero-screen-main {
    left: -12px !important;
    top: 78px !important;
    height: 435px !important;
  }

  .stayproof-hero .hero-screen-report {
    right: 8px !important;
    top: 0 !important;
    height: 388px !important;
  }
}

@media (max-width: 390px) {
  .stayproof-hero .hero-screens {
    width: 350px !important;
    height: 500px !important;
    min-height: 500px !important;
    transform: translateX(-28px) !important;
  }

  .stayproof-hero .hero-screen-main {
    left: -14px !important;
    top: 76px !important;
    height: 418px !important;
  }

  .stayproof-hero .hero-screen-report {
    right: 6px !important;
    height: 372px !important;
  }
}

/* --- Final mobile hero screenshot tuning: extra left shift only --- */

@media (max-width: 575px) {
  .stayproof-hero .hero-screens {
    transform: translateX(-46px) !important;
  }
}

@media (max-width: 390px) {
  .stayproof-hero .hero-screens {
    transform: translateX(-42px) !important;
  }
}

/* --- Final mobile hero screenshot tuning: 5% larger, keep left alignment --- */

@media (max-width: 575px) {
  .stayproof-hero .hero-screens {
    width: 389px !important;
    max-width: calc(100vw - 4px) !important;
    height: 552px !important;
    min-height: 552px !important;
    transform: translateX(-46px) !important;
  }

  .stayproof-hero .hero-screen-main {
    height: 457px !important;
  }

  .stayproof-hero .hero-screen-report {
    height: 407px !important;
  }
}

@media (max-width: 390px) {
  .stayproof-hero .hero-screens {
    width: 368px !important;
    height: 525px !important;
    min-height: 525px !important;
    transform: translateX(-42px) !important;
  }

  .stayproof-hero .hero-screen-main {
    height: 439px !important;
  }

  .stayproof-hero .hero-screen-report {
    height: 391px !important;
  }
}