/*--------------------------------------------------------------
# General
--------------------------------------------------------------*/
:root {
  scroll-behavior: smooth;

  /* Type scale. Steps follow Polaris sizes; 24px and up are fluid between 500px and 1440px. */
  --fs-11: 0.6875rem;
  --fs-12: 0.75rem;
  --fs-13: 0.8125rem;
  --fs-14: 0.875rem;
  --fs-16: 1rem;
  --fs-18: 1.125rem;
  --fs-20: 1.25rem;
  --fs-24: clamp(1.25rem, 2vw, 1.5rem);
  --fs-30: clamp(1.5rem, 2.5vw, 1.875rem);
  --fs-36: clamp(1.75rem, 3vw, 2.25rem);
  --fs-48: clamp(2rem, 4vw, 3rem);
  --fs-56: clamp(2.25rem, 4.5vw, 3.5rem);
  --fs-64: clamp(2.5rem, 5vw, 4rem);
  --fs-220: clamp(7.5rem, 22vw, 13.75rem);

  --lh-none: 1;
  --lh-tight: 1.1;
  --lh-snug: 1.25;
  --lh-normal: 1.5;
  --lh-relaxed: 1.6;
  --lh-loose: 1.75;

  --ls-tight: -0.02em;
  --ls-snug: -0.01em;
  --ls-normal: 0;
  --ls-caps: 0.08em;

  --fw-regular: 400;
  --fw-semibold: 600;
  --fw-bold: 700;

  --ff-display: "Nunito", "Segoe UI", Helvetica, Arial, sans-serif;
  --ff-body: "Open Sans", "Segoe UI", Helvetica, Arial, sans-serif;
}

body {
  font-family: var(--ff-body);
  color: #444444;
  background: #f7f7f7;
  --app-theme-rgb: 0, 128, 96;
  --app-theme-solid: #008060;
  --app-theme-solid-dark: #004c3f;
  --app-theme-tint: #f5f7f4;
}

.app-theme--order-manager {
  --app-theme-rgb: 78, 168, 116;
  --app-theme-solid: #4ea874;
  --app-theme-solid-dark: #3a8859;
  --app-theme-tint: #f1faf4;
}

.app-theme--printer-templates {
  --app-theme-rgb: 255, 103, 79;
  --app-theme-solid: #ff674f;
  --app-theme-solid-dark: #e04b33;
  --app-theme-tint: #fef4f2;
}

.app-theme--promotions {
  --app-theme-rgb: 233, 79, 138;
  --app-theme-solid: #e94f8a;
  --app-theme-solid-dark: #cb195d;
  --app-theme-tint: #fdf1f5;
}

.app-theme--simple-invoice {
  --app-theme-rgb: 122, 109, 216;
  --app-theme-solid: #7a6dd8;
  --app-theme-solid-dark: #564ab0;
  --app-theme-tint: #f6f5fd;
}

.app-theme--upsell {
  --app-theme-rgb: 0, 166, 166;
  --app-theme-solid: #00a6a6;
  --app-theme-solid-dark: #007a7a;
  --app-theme-tint: #eff9f9;
}

.app-theme--recommendations {
  --app-theme-rgb: 251, 191, 36;
  --app-theme-solid: #fbbf24;
  --app-theme-solid-dark: #ca8a04;
  --app-theme-tint: #fffbeb;
}

.app-theme--reforestation {
  --app-theme-rgb: 34, 197, 94;
  --app-theme-solid: #22c55e;
  --app-theme-solid-dark: #15803d;
  --app-theme-tint: #f0fdf4;
}

.app-theme--bulk-product-edit {
  --app-theme-rgb: 59, 130, 246;
  --app-theme-solid: #3b82f6;
  --app-theme-solid-dark: #2563eb;
  --app-theme-tint: #eff6ff;
}

a {
  color: #000000;
  text-decoration: none;
}

a:hover {
  color: #000000;
  text-decoration: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--ff-display);
}

img {
  max-width: 100%;
}

/*--------------------------------------------------------------
# Sections
--------------------------------------------------------------*/

body.body-navbar-active {
  overflow: hidden;
}

section {
  padding: 60px 0;
  overflow: hidden;
}

@media (max-width: 768px) {
  section {
    padding: 40px 0;
  }
}

/*--------------------------------------------------------------
# Section header (shared eyebrow / title / lead of every content section)
--------------------------------------------------------------*/
.section-head {
  max-width: 720px;
  margin: 0 auto 56px;
  text-align: center;
}

.section-eyebrow {
  display: inline-block;
  font-family: var(--ff-display);
  font-size: var(--fs-16);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--ls-caps);
  color: #0a0a0a;
  margin-bottom: 16px;
}

.section-title {
  font-family: var(--ff-display);
  font-size: var(--fs-48);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-tight);
  line-height: var(--lh-tight);
  color: #0a0a0a;
  margin: 0 0 16px;
}

.section-lead {
  font-size: var(--fs-18);
  line-height: var(--lh-relaxed);
  color: #4a4a4a;
  margin: 0;
}

.section-lead strong {
  color: #0a0a0a;
  font-weight: var(--fw-bold);
}

.section-lead a {
  color: #008060;
  font-weight: var(--fw-bold);
  text-decoration: none;
  border-bottom: 1.5px solid rgba(0, 128, 96, 0.3);
  transition: border-color 0.2s ease;
}

.section-lead a:hover {
  border-color: #008060;
}

/*--------------------------------------------------------------
# Back to top button
--------------------------------------------------------------*/
.back-to-top {
  position: fixed;
  visibility: hidden;
  opacity: 0;
  right: 15px;
  bottom: 15px;
  z-index: 99999;
  background: #000000;
  width: 40px;
  height: 40px;
  border-radius: 4px;
  transition: all 0.4s;
}

.back-to-top i {
  font-size: var(--fs-24);
  color: #fff;
  line-height: 0;
}

.back-to-top:hover {
  background: #000000;
  color: #fff;
}

.back-to-top.active {
  visibility: visible;
  opacity: 1;
}

/*--------------------------------------------------------------
# Header (logo basics - see also Header Modern)
--------------------------------------------------------------*/
.header .logo {
  line-height: 0;
  position: relative;
  z-index: 10;
}

.header .logo img {
  max-width: 100%;
  height: 30px;
}

/*--------------------------------------------------------------
# Navigation Menu
--------------------------------------------------------------*/
/**
* Desktop Navigation 
*/
.navbar {
  padding: 0;
}

.navbar ul {
  margin: 0;
  padding: 0;
  display: flex;
  list-style: none;
  align-items: center;
}

.navbar li {
  position: relative;
}

.navbar a,
.navbar a:focus {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 20px;
  font-family: var(--ff-display);
  color: #000000;
  white-space: nowrap;
  transition: 0.3s;
}

.navbar a i,
.navbar a:focus i {
  font-size: var(--fs-12);
  line-height: 0;
  margin-left: 5px;
}

.navbar a:hover,
.navbar .active,
.navbar .active:focus,
.navbar li:hover>a {
  color: #000000;
}

.navbar .dropdown ul {
  display: block;
  position: absolute;
  left: 14px;
  top: calc(100% + 30px);
  margin: 0;
  padding: 10px 0;
  z-index: 99;
  opacity: 0;
  visibility: hidden;
  background: #fff;
  box-shadow: 0px 0px 30px rgba(127, 137, 161, 0.25);
  transition: 0.3s;
  border-radius: 4px;
}

.navbar .dropdown ul li {
  min-width: 200px;
}

.navbar .dropdown ul a {
  padding: 10px 20px;
  text-transform: none;
}

.navbar .dropdown ul a i {
  font-size: var(--fs-12);
}

.navbar .dropdown ul a:hover,
.navbar .dropdown ul .active:hover,
.navbar .dropdown ul li:hover>a {
  color: #000000;
}

.navbar .dropdown:hover>ul {
  opacity: 1;
  top: 100%;
  visibility: visible;
}

/**
* Mobile Navigation
*/
.mobile-nav-toggle {
  color: #000000;
  font-size: var(--fs-36);
  cursor: pointer;
  display: none;
  line-height: 0;
  transition: 0.5s;
}

/* The open menu sits on a light ground, so the close icon stays dark */
.mobile-nav-toggle.bi-x {
  color: #0a0a0a;
}

@media (max-width: 991px) {
  .mobile-nav-toggle {
    display: block;
  }

  .navbar ul {
    display: none;
  }
}

.navbar-mobile {
  position: fixed;
  overflow: hidden;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  background: #dbe5dc;
  transition: 0.3s;
}

.navbar-mobile::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 90% 10%, rgba(0, 128, 96, 0.32), transparent 50%),
    radial-gradient(circle at 10% 90%, rgba(0, 128, 96, 0.18), transparent 45%);
  pointer-events: none;
}

.navbar-mobile .mobile-nav-toggle {
  position: absolute;
  top: 15px;
  right: 15px;
  z-index: 1;
}

.navbar-mobile ul {
  display: block;
  position: absolute;
  top: 90px;
  right: 15px;
  left: 15px;
  padding: 10px 0;
  border-radius: 10px;
  background-color: #fff;
  border: 1px solid rgba(0, 128, 96, 0.18);
  box-shadow: 0 18px 40px -24px rgba(0, 60, 45, 0.25);
  overflow-y: auto;
  transition: 0.3s;
}

.navbar-mobile a,
.navbar-mobile a:focus {
  padding: 10px 20px;
  color: #000000;
}

.navbar-mobile a:hover,
.navbar-mobile .active,
.navbar-mobile li:hover>a {
  color: #000000;
}

.navbar-mobile .dropdown ul {
  position: static;
  display: none;
  margin: 10px 20px;
  padding: 10px 0;
  z-index: 99;
  opacity: 1;
  visibility: visible;
  background: #fff;
  box-shadow: 0px 0px 30px rgba(127, 137, 161, 0.25);
}

.navbar-mobile .dropdown ul li {
  min-width: 200px;
}

.navbar-mobile .dropdown ul a {
  padding: 10px 20px;
}

.navbar-mobile .dropdown ul a i {
  font-size: var(--fs-12);
}

.navbar-mobile .dropdown ul a:hover,
.navbar-mobile .dropdown ul .active:hover,
.navbar-mobile .dropdown ul li:hover>a {
  color: #000000;
}

.navbar-mobile .dropdown>.dropdown-active {
  display: block;
}

/*--------------------------------------------------------------
# Form status (php-email-form library)
--------------------------------------------------------------*/
.php-email-form .error-message {
  display: none;
  color: #fff;
  background: #ed3c0d;
  text-align: left;
  padding: 15px;
  margin-bottom: 24px;
  font-weight: var(--fw-semibold);
}

.php-email-form .sent-message {
  display: none;
  color: #444444;
  background: #edf1e5;
  text-align: center;
  padding: 15px;
  font-weight: var(--fw-semibold);
}

.php-email-form .loading {
  display: none;
  background: #fff;
  text-align: center;
  padding: 15px;
  margin-bottom: 24px;
}

.php-email-form .loading:before {
  content: "";
  display: inline-block;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  margin: 0 10px -6px 0;
  border: 3px solid #18d26e;
  border-top-color: #eee;
  -webkit-animation: animate-loading 1s linear infinite;
  animation: animate-loading 1s linear infinite;
}

@-webkit-keyframes animate-loading {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

@keyframes animate-loading {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

/*--------------------------------------------------------------
# Hero Modern (Default index)
--------------------------------------------------------------*/
.hero-modern {
  position: relative;
  width: 100%;
  padding: 140px 0 60px;
  background: #f7f7f7;
  overflow: hidden;
}

@property --hero-color-back {
  syntax: '<color>';
  inherits: false;
  initial-value: rgba(132, 220, 165, 0.30);
}

@property --hero-color-front {
  syntax: '<color>';
  inherits: false;
  initial-value: rgba(165, 155, 240, 0.22);
}

.hero-modern-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 15% 20%, var(--hero-color-back), transparent 50%),
    radial-gradient(circle at 85% 75%, var(--hero-color-front), transparent 50%);
  pointer-events: none;
  z-index: 0;
  transition: --hero-color-back 1.2s ease, --hero-color-front 1.2s ease;
}

.hero-modern .container {
  position: relative;
  z-index: 1;
}

.hero-modern-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: rgba(0, 128, 96, 0.12);
  color: #0a0a0a;
  font-family: var(--ff-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-13);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  border-radius: 999px;
  margin-bottom: 24px;
}

.hero-modern-eyebrow i {
  font-size: var(--fs-16);
}

.hero-modern-title {
  font-family: var(--ff-display);
  font-size: var(--fs-64);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: #0a0a0a;
  margin: 0 0 24px;
}

.hero-modern-accent {
  background: linear-gradient(135deg, #008060 0%, #004c3f 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.hero-modern-pitch {
  font-size: var(--fs-18);
  line-height: var(--lh-relaxed);
  color: #4a4a4a;
  margin: 0 0 36px;
  max-width: 540px;
}

.hero-modern-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 48px;
}

.btn-modern {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 28px;
  border-radius: 999px;
  font-family: var(--ff-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-16);
  letter-spacing: var(--ls-normal);
  text-decoration: none;
  transition: all 0.25s ease;
  border: 1.5px solid transparent;
  cursor: pointer;
}

.btn-modern i {
  font-size: var(--fs-16);
  transition: transform 0.25s ease;
}

.btn-modern-primary {
  background: #0a0a0a;
  color: #fff;
}

.btn-modern-primary .bi::before,
.btn-modern-primary [class*=" bi-"]::before,
.btn-modern-primary [class^="bi-"]::before {
  color: #fff;
}

.btn-modern-primary:hover {
  background: #1f1f1f;
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.btn-modern-primary:hover i {
  transform: translateX(4px);
}

.btn-modern-ghost {
  background: transparent;
  color: #0a0a0a;
  border-color: rgba(10, 10, 10, 0.15);
}

.btn-modern-ghost:hover {
  background: #0a0a0a;
  color: #fff;
  border-color: #0a0a0a;
}

.btn-modern-ghost:hover .bi::before,
.btn-modern-ghost:hover [class*=" bi-"]::before,
.btn-modern-ghost:hover [class^="bi-"]::before {
  color: #fff;
}

.hero-modern-stats {
  display: flex;
  gap: 40px;
  padding-top: 32px;
  border-top: 1px solid rgba(10, 10, 10, 0.08);
}

.hero-modern-stat strong {
  display: block;
  font-family: var(--ff-display);
  font-size: var(--fs-30);
  font-weight: var(--fw-bold);
  color: #0a0a0a;
  letter-spacing: var(--ls-snug);
  line-height: var(--lh-none);
  margin-bottom: 6px;
}

.hero-modern-stat span {
  font-size: var(--fs-14);
  color: #6b6b6b;
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: var(--ls-caps);
}

.hero-modern-visual {
  position: relative;
  height: 520px;
  perspective: 1500px;
}

.hero-modern-card {
  position: absolute;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(10, 10, 10, 0.08);
  box-shadow:
    0 20px 50px -12px rgba(0, 0, 0, 0.18),
    0 8px 16px -8px rgba(0, 128, 96, 0.25);
  transition: transform 0.4s ease;
  aspect-ratio: 16 / 9;
  background: #f5f7fa;
}

.hero-modern-card img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.8s ease;
}

.hero-modern-card img[alt="Simple Invoice"] {
  width: calc(100% + 8px);
  height: calc(100% + 4px);
  margin: -2px -4px;
  transform: scale(1.02);
}

.hero-modern-card img.is-active {
  opacity: 1;
}

.hero-modern-card-back {
  top: 0;
  right: 0;
  width: 70%;
  transform: rotate(3deg);
  z-index: 1;
}

.hero-modern-card-front {
  bottom: 0;
  left: 0;
  width: 70%;
  transform: rotate(-4deg);
  z-index: 2;
}

.hero-modern-visual:hover .hero-modern-card-back {
  transform: rotate(5deg) translateY(-8px);
}

.hero-modern-visual:hover .hero-modern-card-front {
  transform: rotate(-6deg) translateY(-8px);
}

.hero-modern-trust {
  margin-top: 80px;
  padding-top: 40px;
  border-top: 1px solid rgba(10, 10, 10, 0.06);
  text-align: center;
}

.hero-modern-trust-label {
  font-size: var(--fs-13);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--ls-caps);
  margin: 0 0 28px;
}

@media (max-width: 991px) {
  .hero-modern {
    padding: 120px 0 60px;
    min-height: auto;
  }

  .hero-modern-visual {
    height: 380px;
    margin-top: 40px;
  }

  .hero-modern-stats {
    gap: 28px;
  }
}

@media (max-width: 768px) {

  .hero-modern-cta {
    flex-direction: column;
    align-items: stretch;
  }

  .btn-modern {
    justify-content: center;
  }

  .hero-modern-stats {
    flex-wrap: wrap;
    gap: 20px 32px;
  }

  .hero-modern-visual {
    height: 280px;
  }
}

/*--------------------------------------------------------------
# Built for Shopify badge (home hero and app heroes)
--------------------------------------------------------------*/
.bfs-badge {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 12px 20px 12px 14px;
  background: #ffffff;
  border: 1.5px solid rgba(20, 149, 204, 0.22);
  border-radius: 999px;
  box-shadow:
    0 22px 48px -16px rgba(3, 95, 134, 0.38),
    0 8px 18px -10px rgba(20, 149, 204, 0.30);
  z-index: 4;
  white-space: nowrap;
  animation: bfsBadgeFloat 6s ease-in-out infinite;
}

.bfs-badge-icon {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(20, 149, 204, 0.14), rgba(88, 183, 223, 0.14));
  border-radius: 12px;
}

.bfs-badge-icon svg {
  width: 22px;
  height: auto;
}

.bfs-badge-text strong {
  display: block;
  font-family: var(--ff-display);
  font-size: var(--fs-14);
  font-weight: var(--fw-bold);
  color: #035f86;
  letter-spacing: var(--ls-snug);
  line-height: var(--lh-snug);
  margin-bottom: 2px;
}

.bfs-badge-text span {
  display: block;
  font-size: var(--fs-11);
  color: #5a7a8a;
  font-weight: var(--fw-semibold);
}

/* Home hero: follows the rotating screenshot, shown only while a BfS app is in front */
.hero-modern-visual .bfs-badge {
  top: 32px;
  left: -10px;
  opacity: 0;
  transform: translateY(-6px) scale(0.96);
  transition: opacity 0.5s ease, transform 0.5s ease;
  pointer-events: none;
  animation: none;
}

.hero-modern-visual .bfs-badge.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  animation: bfsBadgeFloat 6s ease-in-out infinite;
}

/* App hero: pinned over the screenshot corner */
.app-hero-modern-visual .bfs-badge {
  top: -22px;
  left: -22px;
  z-index: 3;
}

@keyframes bfsBadgeFloat {

  0%,
  100% {
    transform: translateY(0) scale(1);
  }

  50% {
    transform: translateY(-6px) scale(1);
  }
}

@media (max-width: 1199px) {
  .app-hero-modern-visual .bfs-badge {
    top: -16px;
    left: -10px;
  }
}

@media (max-width: 600px) {
  .bfs-badge {
    padding: 9px 14px 9px 11px;
    gap: 9px;
  }

  .bfs-badge-icon {
    width: 30px;
    height: 30px;
    border-radius: 9px;
  }

  .bfs-badge-icon svg {
    width: 18px;
  }

  .app-hero-modern-visual .bfs-badge {
    position: static;
    margin-top: 16px;
    animation: none;
  }
}

/*--------------------------------------------------------------
# Apps Modern Grid (Default index)
--------------------------------------------------------------*/
.apps-modern {
  padding: 60px 0;
  background: #fff;
}

.apps-modern-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

.app-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid rgba(10, 10, 10, 0.08);
  border-radius: 20px;
  overflow: hidden;
  transition: all 0.3s ease;
  position: relative;
}

.app-card:hover {
  transform: translateY(-6px);
  border-color: var(--app-theme-solid);
  box-shadow:
    0 20px 50px -12px rgba(0, 0, 0, 0.12),
    0 8px 16px -8px rgba(var(--app-theme-rgb), 0.2);
}

.app-card-stretched {
  color: inherit;
  text-decoration: none;
}

.app-card-stretched::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

.app-card-stretched:hover {
  color: inherit;
}

.app-card-visual {
  position: relative;
  background: linear-gradient(135deg, #f5f7fa 0%, #eef2f7 100%);
  overflow: hidden;
  aspect-ratio: 16 / 9;
}

.app-card-visual img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.app-card.has-clip .app-card-visual img {
  width: calc(100% + 8px);
  height: auto;
  object-fit: initial;
  margin: -4px;
  transform: scale(1.02);
}

.app-card:hover .app-card-visual img {
  transform: scale(1.04);
}

.app-card.has-clip:hover .app-card-visual img {
  transform: scale(1.06);
}

.app-card-body {
  padding: 24px 24px 24px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.app-card-rating {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--ff-display);
  font-size: var(--fs-13);
  margin-bottom: 12px;
}

.app-card-rating i {
  color: #f5b800;
  font-size: var(--fs-14);
}

.app-card-rating span {
  font-weight: var(--fw-bold);
  color: #0a0a0a;
}

.app-card-rating em {
  color: #6e6e6e;
  font-style: normal;
  font-weight: var(--fw-semibold);
  font-size: var(--fs-12);
  margin-left: 2px;
}

.app-card-bfs-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-left: auto;
  background: #f3f8ff;
  border: 1px solid #dbe7f5;
  border-radius: 999px;
  padding: 3px 9px;
  font-family: var(--ff-display);
  font-size: var(--fs-11);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-normal);
  color: #035F86;
  position: relative;
  z-index: 2;
  white-space: nowrap;
}

.app-card-bfs-badge svg {
  width: 11px;
  height: 10px;
  display: block;
  flex-shrink: 0;
}

.app-card-name {
  font-family: var(--ff-display);
  font-size: var(--fs-20);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-snug);
  color: #0a0a0a;
  margin: 0 0 10px;
}

.app-card-pitch {
  font-size: var(--fs-14);
  line-height: var(--lh-normal);
  color: #4a4a4a;
  margin: 0 0 24px;
  flex: 1;
}
/* Link lists inside cards (help center): plain text at rest, app colour on hover */
.app-card-pitch a {
  color: inherit;
  transition: color 0.2s ease;
}
.app-card-pitch a:hover {
  color: var(--app-theme-solid);
}

.app-card-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 20px;
  border-top: 1px solid rgba(10, 10, 10, 0.06);
}

.app-card-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--ff-display);
  font-size: var(--fs-16);
  font-weight: var(--fw-bold);
  color: #0a0a0a;
  transition: gap 0.25s ease;
}

.app-card-link i {
  font-size: var(--fs-14);
  transition: transform 0.25s ease;
}

.app-card:hover .app-card-link i {
  transform: translateX(4px);
}

.app-card-install {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: rgba(0, 128, 96, 0.12);
  color: #004c3f;
  font-family: var(--ff-display);
  font-size: var(--fs-14);
  font-weight: var(--fw-bold);
  border-radius: 999px;
  text-decoration: none;
  transition: all 0.25s ease;
  position: relative;
  z-index: 2;
}

.app-card-install i {
  font-size: var(--fs-13);
}

.app-card-install:hover {
  background: #004c3f;
  color: #fff;
}

@media (max-width: 991px) {
  .apps-modern-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }

  .apps-modern {
    padding: 50px 0;
  }
}

@media (max-width: 640px) {
  .apps-modern-grid {
    grid-template-columns: 1fr;
  }
}

/*--------------------------------------------------------------
# Clients Modern (marquee)
--------------------------------------------------------------*/
.clients-modern {
  padding: 64px 0 48px;
  background: #f7f7f7;
  border-top: 1px solid rgba(10, 10, 10, 0.06);
  border-bottom: 1px solid rgba(10, 10, 10, 0.06);
}

.clients-modern-label {
  text-align: center;
  font-family: var(--ff-display);
  font-size: var(--fs-13);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--ls-caps);
  margin: 0 0 36px;
}

.clients-modern-marquee {
  position: relative;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 80px, #000 calc(100% - 80px), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 80px, #000 calc(100% - 80px), transparent 100%);
}

@media (min-width: 992px) {
  .clients-modern-marquee {
    max-width: calc(80% - 6px);
    margin: 0 auto;
  }
}

.clients-modern-track {
  display: flex;
  align-items: center;
  gap: 64px;
  width: max-content;
  animation: clients-marquee 50s linear infinite;
}

.clients-modern-track img {
  height: 36px;
  width: auto;
  filter: grayscale(100%);
  opacity: 0.7;
  transition: all 0.25s ease;
  flex-shrink: 0;
}

.clients-modern-track img:hover {
  filter: grayscale(0);
  opacity: 1;
}

@keyframes clients-marquee {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .clients-modern-track {
    animation: none;
  }
}

/*--------------------------------------------------------------
# Testimonials Modern (masonry grid)
--------------------------------------------------------------*/
.testimonials-modern {
  padding: 60px 0;
  background: #f7f7f7;
}

.testimonials-modern-grid {
  column-count: 3;
  column-gap: 24px;
}

/* Fewer than three cards: centred row instead of a half-empty column flow */
.testimonials-modern-grid:has(> :nth-child(-n+2):last-child) {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 24px;
}

.testimonials-modern-grid:has(> :nth-child(-n+2):last-child) .testimonial-card {
  flex: 0 1 calc((100% - 48px) / 3);
  margin: 0;
}

.testimonial-card {
  display: block;
  break-inside: avoid;
  background: #fff;
  /* Neutral hairline like the other home page cards; the app colour only marks hover */
  border: 1px solid rgba(10, 10, 10, 0.08);
  border-radius: 16px;
  padding: 28px;
  margin: 0 0 24px;
  transition: all 0.25s ease;
}

.testimonial-card-app {
  display: inline-block;
  padding: 4px 10px;
  background: rgba(0, 128, 96, 0.1);
  color: #004c3f;
  font-family: var(--ff-display);
  font-size: var(--fs-11);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--ls-caps);
  border-radius: 999px;
  margin-bottom: 14px;
}

.testimonial-card:hover {
  border-color: rgba(var(--app-theme-rgb), 0.4);
  transform: translateY(-3px);
  box-shadow: 0 12px 30px -10px rgba(var(--app-theme-rgb), 0.18);
}

.testimonial-card-stars {
  display: flex;
  gap: 3px;
  margin-bottom: 16px;
}

.testimonial-card-stars i {
  color: #f5b800;
  font-size: var(--fs-16);
}

.testimonial-card blockquote {
  margin: 0 0 20px;
  font-size: var(--fs-14);
  line-height: var(--lh-relaxed);
  color: #2b2b2b;
  font-weight: var(--fw-regular);
}

.testimonial-card figcaption {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-top: 18px;
  border-top: 1px solid rgba(10, 10, 10, 0.06);
}

.testimonial-card figcaption::before {
  content: "-";
  color: #b8b8b8;
  font-weight: var(--fw-semibold);
}

.testimonial-card figcaption span {
  font-family: var(--ff-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-14);
  color: #0a0a0a;
  letter-spacing: var(--ls-normal);
}

.testimonial-card figcaption small {
  font-family: var(--ff-body);
  font-weight: var(--fw-regular);
  font-size: var(--fs-12);
  color: #6b6b6b;
  letter-spacing: var(--ls-normal);
  margin-left: 6px;
}

.testimonial-card figcaption small::before {
  content: "·";
  margin-right: 6px;
  color: #b8b8b8;
}

@media (max-width: 991px) {
  .testimonials-modern-grid {
    column-count: 2;
  }

  .testimonials-modern-grid:has(> :nth-child(-n+2):last-child) .testimonial-card {
    flex-basis: calc((100% - 24px) / 2);
  }
}

@media (max-width: 640px) {
  .testimonials-modern-grid {
    column-count: 1;
  }

  .testimonials-modern-grid:has(> :nth-child(-n+2):last-child) {
    flex-direction: column;
    align-items: stretch;
  }

  .testimonials-modern {
    padding: 50px 0;
  }
}

/*--------------------------------------------------------------
# Blog Card
--------------------------------------------------------------*/
.blog-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid rgba(10, 10, 10, 0.08);
  border-radius: 20px;
  overflow: hidden;
  transition: all 0.3s ease;
  position: relative;
}

.blog-card:hover {
  transform: translateY(-6px);
  border-color: rgba(0, 128, 96, 0.4);
  box-shadow:
    0 20px 50px -12px rgba(0, 0, 0, 0.12),
    0 8px 16px -8px rgba(0, 128, 96, 0.2);
}

.blog-card-visual {
  position: relative;
  background: #f5f7fa;
  overflow: hidden;
  aspect-ratio: 16 / 10;
}

.blog-card-visual img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.blog-card:hover .blog-card-visual img {
  transform: scale(1.04);
}

.blog-card-body {
  padding: 24px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.blog-card-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
  font-family: var(--ff-display);
  font-size: var(--fs-12);
}

.blog-card-tag {
  padding: 4px 10px;
  background: rgba(0, 128, 96, 0.12);
  color: #004c3f;
  border-radius: 999px;
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
}

.blog-card-time {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #6e6e6e;
  font-weight: var(--fw-semibold);
}

.blog-card-time i {
  font-size: var(--fs-13);
}

.blog-card-title {
  font-family: var(--ff-display);
  font-size: var(--fs-20);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-snug);
  line-height: var(--lh-snug);
  color: #0a0a0a;
  margin: 0 0 12px;
}

.blog-card-stretched {
  color: inherit;
  text-decoration: none;
}

.blog-card-stretched::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

.blog-card-stretched:hover {
  color: inherit;
}

.blog-card-excerpt {
  font-size: var(--fs-14);
  line-height: var(--lh-normal);
  color: #4a4a4a;
  margin: 0 0 20px;
  flex: 1;
}

.blog-card-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--ff-display);
  font-size: var(--fs-16);
  font-weight: var(--fw-bold);
  color: #0a0a0a;
  margin-top: auto;
}

.blog-card-link i {
  font-size: var(--fs-14);
  transition: transform 0.25s ease;
}

.blog-card:hover .blog-card-link i {
  transform: translateX(4px);
}

/*--------------------------------------------------------------
# Blog List Modern (full archive page)
--------------------------------------------------------------*/
.blog-list-section {
  padding: 60px 0 0;
  background: #fff;
}

.blog-list-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

.blog-category-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 32px;
}

.blog-category-link {
  padding: 8px 16px;
  border: 1px solid rgba(10, 10, 10, 0.12);
  border-radius: 999px;
  font-family: var(--ff-display);
  font-size: var(--fs-14);
  font-weight: var(--fw-semibold);
  color: #0a0a0a;
  text-decoration: none;
  transition: all 0.2s ease;
}

.blog-category-link:hover {
  border-color: rgba(0, 128, 96, 0.4);
  color: #004c3f;
}

.blog-category-link.is-active {
  background: rgba(0, 128, 96, 0.12);
  border-color: transparent;
  color: #004c3f;
}

.blog-list-empty {
  font-size: var(--fs-16);
  color: #4a4a4a;
  text-align: center;
  padding: 40px 0;
  margin: 0;
}

/* Bootstrap's pagination split into separate round buttons, same as the help center pager. */
.blog-pagination {
  margin-top: 40px;
}

.blog-pagination .pagination {
  gap: 6px;
}

.blog-pagination .page-item .page-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 40px;
  height: 40px;
  padding: 0 12px;
  margin-left: 0;
  border-radius: 999px;
  border: 1px solid rgba(10, 10, 10, 0.12);
  background: #fff;
  font-size: var(--fs-14);
  font-weight: var(--fw-semibold);
  color: #0a0a0a;
  font-variant-numeric: tabular-nums;
  transition: border-color 0.2s, background 0.2s;
}

.blog-pagination .page-item a.page-link:hover {
  text-decoration: none;
  color: #0a0a0a;
  border-color: rgba(var(--app-theme-rgb), 0.55);
  background: rgba(var(--app-theme-rgb), 0.07);
}

.blog-pagination .page-item .page-link:focus {
  color: #0a0a0a;
  background: #fff;
  box-shadow: none;
}

.blog-pagination .page-item a.page-link:focus-visible {
  outline: 2px solid var(--app-theme-solid);
  outline-offset: 2px;
}

.blog-pagination .page-item.active .page-link {
  background: var(--app-theme-solid);
  border-color: var(--app-theme-solid);
  color: #fff;
}

.blog-pagination .page-item.disabled .page-link {
  color: #9a9a9a;
  background: transparent;
  border-color: rgba(10, 10, 10, 0.08);
}

/* Up to nine buttons (arrows, seven pages): smaller below sm so they stay on one line from 360px up. */
@media (max-width: 575.98px) {
  .blog-pagination .pagination {
    gap: 4px;
  }

  .blog-pagination .page-item .page-link {
    min-width: 32px;
    height: 32px;
    padding: 0 6px;
  }
}

@media (max-width: 991px) {
  .blog-list-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 22px;
  }
}

@media (max-width: 640px) {
  .blog-list-grid {
    grid-template-columns: 1fr;
  }

  .blog-list-section {
    padding: 32px 0 0;
  }
}

/*--------------------------------------------------------------
# Blog Detail Modern (single post page)
--------------------------------------------------------------*/
.page-hero-modern .blog-detail-meta {
  margin-top: 24px;
}

.blog-detail-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 18px;
  font-family: var(--ff-display);
  font-size: var(--fs-14);
  color: #6b6b6b;
}

.blog-detail-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.blog-detail-meta-item i {
  font-size: var(--fs-14);
  color: var(--app-theme-solid-dark);
}

.blog-detail-cover {
  padding: 60px 0 40px;
  background: #fff;
}

.blog-detail-cover-inner {
  border-radius: 24px;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: #f5f7fa;
}

.blog-detail-cover-inner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.blog-detail-body {
  padding: 24px 0 0;
  background: #fff;
  margin-bottom: 0;
}

.blog-detail-article {
  font-family: var(--ff-display);
}

.blog-detail-article p {
  font-size: var(--fs-18);
  line-height: var(--lh-loose);
  color: #2a2a2a;
  margin: 0 0 22px;
}

.blog-detail-article h2,
.blog-detail-article h3 {
  font-family: var(--ff-display);
  font-weight: var(--fw-bold);
  color: #0a0a0a;
  letter-spacing: var(--ls-snug);
  line-height: var(--lh-snug);
  margin: 48px 0 18px;
}

.blog-detail-article h2 {
  font-size: var(--fs-30);
}

.blog-detail-article h3 {
  font-size: var(--fs-24);
}

.blog-detail-article strong {
  color: #0a0a0a;
  font-weight: var(--fw-bold);
}

.blog-detail-article a {
  color: inherit;
  text-decoration: none;
}

.blog-detail-article a:hover {
  color: inherit;
  text-decoration: none;
}

.blog-detail-article ul,
.blog-detail-article ol {
  font-size: var(--fs-18);
  line-height: var(--lh-loose);
  color: #2a2a2a;
  margin: 0 0 22px;
  padding-left: 24px;
}

.blog-detail-article li {
  margin-bottom: 8px;
}

.blog-detail-article blockquote {
  border-left: 3px solid var(--app-theme-solid-dark);
  padding: 8px 0 8px 22px;
  margin: 28px 0;
  font-size: var(--fs-18);
  font-style: italic;
  color: #1a1a1a;
}

/* Media from the CMS editor never exceeds the column; embedded videos keep 16:9. */
.blog-detail-article img,
.blog-detail-article video {
  display: block;
  max-width: 100%;
  height: auto;
  border: 1px solid rgba(10, 10, 10, 0.08);
  border-radius: 12px;
  margin: 28px 0;
}

.blog-detail-article iframe {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  border: 0;
  border-radius: 12px;
  margin: 28px 0;
}

.blog-detail-article figure {
  margin: 28px 0;
}

.blog-detail-article figure img,
.blog-detail-article figure video {
  margin: 0;
}

.blog-detail-article figcaption {
  margin-top: 10px;
  font-size: var(--fs-14);
  color: #6b6b6b;
  text-align: center;
}

.blog-related {
  margin-top: 64px;
  padding-top: 48px;
  border-top: 1px solid rgba(10, 10, 10, 0.08);
}

/* Breadcrumb links fade an underline in on hover, same as the help center trail. */
.page-hero-modern .breadcrumb-item a {
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 3px;
  transition: color 0.2s, text-decoration-color 0.2s;
}

.page-hero-modern .breadcrumb-item a:hover,
.page-hero-modern .breadcrumb-item a:focus-visible {
  color: var(--app-theme-solid-dark);
  text-decoration-color: currentColor;
}

.blog-detail-cta {
  margin: 64px auto 0;
  padding-top: 60px;
  border-top: 1px solid rgba(10, 10, 10, 0.08);
  text-align: center;
}

.blog-detail-back {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 28px;
  border-radius: 999px;
  background: #0a0a0a;
  color: #fff;
  font-family: var(--ff-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-16);
  text-decoration: none;
  letter-spacing: var(--ls-normal);
  transition: all 0.25s ease;
  border: 1.5px solid #0a0a0a;
}

.blog-detail-back:hover {
  background: transparent;
  color: #0a0a0a;
}

.blog-detail-back i {
  font-size: var(--fs-14);
  transition: transform 0.25s ease;
}

.blog-detail-back .bi::before,
.blog-detail-back [class*=" bi-"]::before,
.blog-detail-back [class^="bi-"]::before {
  color: #fff;
}

.blog-detail-back:hover .bi::before,
.blog-detail-back:hover [class*=" bi-"]::before,
.blog-detail-back:hover [class^="bi-"]::before {
  color: #0a0a0a;
}

.blog-detail-back:hover i {
  transform: translateX(-4px);
}

@media (max-width: 991px) {
  .blog-detail-cover-inner {
    border-radius: 18px;
  }

  .blog-detail-body {
    padding: 24px 0 72px;
  }
}

@media (max-width: 640px) {

  .blog-detail-article h2 {
    margin: 36px 0 14px;
  }

  .blog-detail-article h3 {
    margin: 36px 0 14px;
  }

  .blog-detail-cover-inner {
    border-radius: 14px;
  }

  .blog-detail-meta {
    gap: 12px;
  }
}

/*--------------------------------------------------------------
# Contact Modern
--------------------------------------------------------------*/
.contact-modern {
  padding: 60px 0;
  background: #fff;
  scroll-margin-top: 64px;
}

.contact-modern .section-head {
  margin-bottom: 32px;
}

.contact-modern-list {
  list-style: none;
  padding: 0;
  margin: 0 0 48px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px 56px;
}

.contact-modern-list li {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.contact-modern-list li>div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.contact-modern-list strong {
  font-family: var(--ff-display);
  font-size: var(--fs-12);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--ls-caps);
  color: #6e6e6e;
  margin-bottom: 2px;
}

.contact-modern-list a,
.contact-modern-list span {
  color: #0a0a0a;
  font-size: var(--fs-16);
  line-height: var(--lh-normal);
  font-weight: var(--fw-semibold);
  text-decoration: none;
  transition: color 0.2s ease;
}

.contact-modern-list a:hover {
  color: #004c3f;
}

.contact-modern-icon {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 128, 96, 0.12);
  color: #004c3f;
  border-radius: 12px;
  font-size: var(--fs-18);
  flex-shrink: 0;
}

.contact-modern-card {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  margin-top: 48px;
  background: #fff;
  border: 1px solid rgba(10, 10, 10, 0.08);
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 24px 60px -24px rgba(0, 60, 45, 0.18);
}

.contact-modern-panel {
  display: flex;
  flex-direction: column;
  padding: 40px;
  color: #4a4a4a;
  border-right: 1px solid rgba(10, 10, 10, 0.08);
}

.contact-modern-panel-art {
  display: block;
  width: 100%;
  max-width: 280px;
  margin: auto auto 0;
  padding-top: 24px;
}

.contact-modern-form-title {
  font-family: var(--ff-display);
  font-size: var(--fs-24);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-snug);
  color: #0a0a0a;
  margin: 0 0 12px;
}

.contact-modern-panel-lead {
  font-size: var(--fs-16);
  line-height: var(--lh-relaxed);
  margin: 0;
}

.contact-modern-panel .contact-modern-list {
  flex-direction: column;
  justify-content: flex-start;
  gap: 20px;
  margin: 32px 0 0;
}

.contact-modern-emails {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

@media (min-width: 1400px) {
  .contact-modern-emails {
    flex-direction: row;
    gap: 8px;
  }

  .contact-modern-emails a+a::before {
    content: "\2013";
    margin-right: 8px;
    color: rgba(10, 10, 10, 0.3);
  }
}

.contact-modern-form-wrap {
  padding: 40px;
  display: flex;
  flex-direction: column;
}

.contact-modern-card .contact-modern-field input,
.contact-modern-card .contact-modern-field textarea {
  background: #f7f7f7;
}

.contact-modern-card .contact-modern-field input:focus,
.contact-modern-card .contact-modern-field textarea:focus {
  background: #fff;
}

.contact-modern-form {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}

.contact-modern-form .contact-modern-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.contact-modern-field {
  margin-bottom: 18px;
  display: flex;
  flex-direction: column;
}

.contact-modern-row .contact-modern-field {
  margin-bottom: 0;
}

/* Flex column: margins do not collapse, so the 24px above the button comes from .contact-modern-actions alone */
.contact-modern-field--grow {
  flex: 1 1 auto;
  margin-bottom: 0;
}

.contact-modern-field--grow textarea {
  flex: 1 1 auto;
}

.contact-modern-form .contact-modern-row {
  margin-bottom: 18px;
}

.contact-modern-field label {
  font-family: var(--ff-display);
  font-size: var(--fs-12);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--ls-caps);
  color: #6b6b6b;
  margin-bottom: 8px;
}

.contact-modern-field input,
.contact-modern-field textarea {
  width: 100%;
  padding: 14px 18px;
  border: 1px solid rgba(10, 10, 10, 0.12);
  border-radius: 12px;
  font-family: var(--ff-body);
  font-size: var(--fs-16);
  color: #0a0a0a;
  background: #fff;
  transition: all 0.2s ease;
  resize: vertical;
}

.contact-modern-field input::placeholder,
.contact-modern-field textarea::placeholder {
  color: #b8b8b8;
}

.contact-modern-field input:focus,
.contact-modern-field textarea:focus {
  outline: none;
  border-color: #008060;
  box-shadow: 0 0 0 3px rgba(0, 128, 96, 0.18);
}

.contact-modern-actions {
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

.contact-modern-actions button {
  border: none;
  cursor: pointer;
}

.contact-modern-form .loading,
.contact-modern-form .error-message,
.contact-modern-form .sent-message {
  width: 100%;
}

@media (max-width: 991px) {
  .contact-modern-card {
    grid-template-columns: 1fr;
  }

  .contact-modern-panel {
    border-right: 0;
    border-bottom: 1px solid rgba(10, 10, 10, 0.08);
  }

  .contact-modern-panel-art {
    display: none;
  }

  .contact-modern-panel,
  .contact-modern-form-wrap {
    padding: 28px;
  }

  .contact-modern {
    padding: 50px 0;
  }
}

@media (max-width: 640px) {
  .contact-modern-form .contact-modern-row {
    grid-template-columns: 1fr;
  }
}

/*--------------------------------------------------------------
# Company glance card and office cards (shared with softify.co)
--------------------------------------------------------------*/
.svg-sprite {
      position: absolute;
      width: 0;
      height: 0;
      overflow: hidden;
    }

.hero-glance {
      position: relative;
    }

.hero-glance::before {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: 24px;
      background: linear-gradient(135deg, rgba(0, 128, 96, 0.2) 0%, rgba(165, 155, 240, 0.22) 100%);
      transform: rotate(4deg);
      transition: transform 0.4s ease;
    }

.hero-glance:hover::before {
      transform: rotate(6deg) translateY(-4px);
    }

.hero-glance-card {
      position: relative;
      background: #fff;
      border: 1px solid rgba(10, 10, 10, 0.08);
      border-radius: 24px;
      padding: 32px;
      box-shadow:
        0 20px 50px -12px rgba(0, 0, 0, 0.18),
        0 8px 16px -8px rgba(0, 128, 96, 0.25);
      transition: transform 0.4s ease, border-color 0.4s ease;
      animation: hero-glance-in 0.7s ease backwards;
    }

.hero-glance:hover .hero-glance-card {
      transform: translateY(-8px);
      border-color: rgba(0, 128, 96, 0.4);
    }

@keyframes hero-glance-in {
      from {
        opacity: 0;
        transform: translateY(16px);
      }
    }

.hero-glance-label {
      font-family: var(--ff-display);
      font-size: var(--fs-12);
      font-weight: var(--fw-bold);
      text-transform: uppercase;
      letter-spacing: var(--ls-caps);
      color: #6e6e6e;
      margin: 0 0 16px;
    }

.hero-glance-main {
      display: flex;
      align-items: baseline;
      gap: 12px;
      margin-bottom: 16px;
    }

.hero-glance-main strong {
      font-family: var(--ff-display);
      font-size: var(--fs-64);
      font-weight: var(--fw-bold);
      line-height: var(--lh-none);
      background: linear-gradient(135deg, #008060 0%, #004c3f 100%);
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
      color: transparent;
    }

.hero-glance-main span {
      font-family: var(--ff-display);
      font-size: var(--fs-20);
      font-weight: var(--fw-bold);
      color: #0a0a0a;
    }

.hero-glance-offices {
      list-style: none;
      padding: 0;
      margin: 0 0 28px;
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }

.hero-glance-offices li {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 6px 12px 6px 6px;
      border-radius: 999px;
      background: #f5f7f4;
      border: 1px solid rgba(0, 128, 96, 0.14);
      font-size: var(--fs-14);
      font-weight: var(--fw-semibold);
      color: #0a0a0a;
    }

.hero-glance-offices .office-flag {
      width: 24px;
      height: 16px;
    }

.hero-glance-stats {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      border-top: 1px solid rgba(10, 10, 10, 0.08);
    }

.hero-glance-stats>div {
      padding: 20px 0 20px 24px;
      border-left: 1px solid rgba(10, 10, 10, 0.08);
    }

.hero-glance-stats>div:nth-child(odd) {
      padding-left: 0;
      border-left: 0;
    }

.hero-glance-stats>div:nth-child(n+3) {
      border-top: 1px solid rgba(10, 10, 10, 0.08);
      padding-bottom: 0;
    }

.hero-glance-stats strong {
      display: block;
      font-family: var(--ff-display);
      font-size: var(--fs-30);
      font-weight: var(--fw-bold);
      letter-spacing: var(--ls-snug);
      line-height: var(--lh-none);
      color: #0a0a0a;
      margin-bottom: 8px;
      transition: color 0.3s ease;
    }

.hero-glance-stats>div:hover strong {
      color: #008060;
    }

.hero-glance-stats span {
      display: block;
      font-size: var(--fs-13);
      line-height: var(--lh-snug);
      color: #6b6b6b;
    }

.office-list {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 24px;
    }

.office-card {
      display: flex;
      flex-direction: column;
      background: #f7f7f7;
      border: 1px solid rgba(10, 10, 10, 0.06);
      border-radius: 20px;
      padding: 28px;
    }

.office-card-head {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 12px;
    }

.office-flag {
      display: inline-flex;
      width: 30px;
      height: 20px;
      border-radius: 4px;
      overflow: hidden;
      box-shadow: 0 0 0 1px rgba(10, 10, 10, 0.08);
      flex-shrink: 0;
    }

.office-flag svg {
      display: block;
      width: 100%;
      height: 100%;
    }

.office-region {
      font-family: var(--ff-display);
      font-size: var(--fs-12);
      font-weight: var(--fw-bold);
      text-transform: uppercase;
      letter-spacing: var(--ls-caps);
      color: #6e6e6e;
    }

.office-company {
      font-size: var(--fs-20);
      font-weight: var(--fw-bold);
      letter-spacing: var(--ls-snug);
      line-height: var(--lh-snug);
      color: #0a0a0a;
      margin: 0 0 8px;
    }

.office-address {
      font-size: var(--fs-16);
      line-height: var(--lh-relaxed);
      color: #4a4a4a;
      margin: 0;
    }

.office-details {
      flex-grow: 1;
      margin-bottom: 20px;
    }

.office-phone {
      font-size: var(--fs-16);
      line-height: var(--lh-relaxed);
      margin: 8px 0 0;
    }

.office-phone a {
      color: #0a0a0a;
      font-weight: var(--fw-semibold);
      transition: color 0.2s ease;
    }

.office-phone a:hover {
      color: #004c3f;
    }

.office-tax {
      font-size: var(--fs-14);
      margin: 0;
      padding-top: 16px;
      border-top: 1px solid rgba(10, 10, 10, 0.08);
    }

@media (max-width: 991px) {
  .office-list {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

@media (max-width: 768px) {
  .office-card {
    padding: 20px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-glance-card {
    animation: none;
  }

  .hero-glance::before,
  .hero-glance-card {
    transition: none;
  }
}

/*--------------------------------------------------------------
# Newsletter Modern
--------------------------------------------------------------*/
.newsletter-modern {
  padding: 60px 0;
  background: #fff;
}

.newsletter-modern-card {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
  padding: 48px 56px;
  background: #fff;
  border: 1px solid rgba(var(--app-theme-rgb), 0.14);
  border-radius: 28px;
  overflow: hidden;
  color: #0a0a0a;
}

.newsletter-modern-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(var(--app-theme-rgb), 0.16) 0%, rgba(var(--app-theme-rgb), 0.10) 50%, rgba(var(--app-theme-rgb), 0.08) 100%);
  pointer-events: none;
}

.newsletter-modern-info {
  position: relative;
}

.newsletter-modern-title {
  font-family: var(--ff-display);
  font-size: var(--fs-30);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-snug);
  line-height: var(--lh-tight);
  color: #0a0a0a;
  margin: 0 0 10px;
}

.newsletter-modern-pitch {
  font-size: var(--fs-16);
  line-height: var(--lh-normal);
  color: #4a4a4a;
  margin: 0;
}

.newsletter-modern-form {
  position: relative;
}

.newsletter-modern-input {
  display: flex;
  background: #fff;
  border: 1px solid rgba(10, 10, 10, 0.1);
  border-radius: 999px;
  padding: 6px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.newsletter-modern-input:focus-within {
  border-color: #008060;
  box-shadow: 0 0 0 3px rgba(0, 128, 96, 0.15);
}

.newsletter-modern-input input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  padding: 12px 20px;
  color: #0a0a0a;
  font-family: var(--ff-body);
  font-size: var(--fs-16);
}

.newsletter-modern-input input::placeholder {
  color: #a8a8a8;
}

.newsletter-modern-input button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 12px 22px;
  background: #0a0a0a;
  color: #fff;
  font-family: var(--ff-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-16);
  border: none;
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.newsletter-modern-input button .bi::before,
.newsletter-modern-input button [class*=" bi-"]::before,
.newsletter-modern-input button [class^="bi-"]::before {
  color: #fff;
}

.newsletter-modern-input button:hover {
  background: #1f1f1f;
  transform: translateX(2px);
}

.newsletter-modern-form .newsletter-message {
  margin-top: 12px;
  font-size: var(--fs-14);
  color: #4a4a4a;
}

@media (max-width: 768px) {
  .newsletter-modern {
    padding: 50px 0;
  }

  .newsletter-modern-card {
    grid-template-columns: 1fr;
    padding: 32px 24px;
    gap: 24px;
  }

  .newsletter-modern-input {
    flex-direction: column;
    border-radius: 16px;
    padding: 8px;
    gap: 8px;
  }

  .newsletter-modern-input button {
    width: 100%;
    justify-content: center;
  }
}

/*--------------------------------------------------------------
# Footer Modern
--------------------------------------------------------------*/
.footer-modern {
  background: #0a0a0a;
  color: rgba(255, 255, 255, 0.7);
  padding: 80px 0 32px;
}

.footer-modern-top {
  display: grid;
  grid-template-columns: 1.4fr 2fr;
  gap: 64px;
  padding-bottom: 56px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.footer-modern-brand {
  max-width: 360px;
}

.footer-modern-logo {
  display: inline-block;
  margin-bottom: 20px;
}

.footer-modern-logo img {
  height: 32px;
  width: auto;
  filter: brightness(0) invert(1);
}

.footer-modern-tagline {
  font-size: var(--fs-16);
  line-height: var(--lh-relaxed);
  color: rgba(255, 255, 255, 0.6);
  margin: 0 0 24px;
}

.footer-modern-badge img {
  height: 60px;
  width: auto;
}

.footer-modern-links {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}

.footer-modern-links h3 {
  font-family: var(--ff-display);
  font-size: var(--fs-12);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--ls-caps);
  color: rgba(255, 255, 255, 0.5);
  margin: 0 0 18px;
}

.footer-modern-links ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer-modern-links a {
  color: rgba(255, 255, 255, 0.75);
  text-decoration: none;
  font-size: var(--fs-14);
  transition: color 0.2s ease;
}

.footer-modern-links a:hover {
  color: #008060;
}

.footer-modern-bottom {
  padding-top: 32px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}

.footer-modern-copy {
  margin: 0;
  font-size: var(--fs-13);
  color: rgba(255, 255, 255, 0.5);
}

.footer-modern-copy strong {
  color: rgba(255, 255, 255, 0.85);
  font-weight: var(--fw-bold);
}

@media (max-width: 991px) {
  .footer-modern-top {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .footer-modern-brand {
    max-width: 100%;
  }
}

@media (max-width: 640px) {
  .footer-modern-links {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .footer-modern {
    padding: 60px 0 24px;
  }
}

/*--------------------------------------------------------------
# Header Modern (overrides on top of .header)
--------------------------------------------------------------*/
.header {
  z-index: 997;
  background: transparent;
  border-bottom: 1px solid transparent;
  padding: 16px 0;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.header.header-scrolled {
  background: #ffffff;
  border-bottom-color: rgba(10, 10, 10, 0.06);
  box-shadow: none;
  padding: 16px 0;
}

.header .navbar a,
.header .navbar a:focus {
  font-size: var(--fs-16);
  letter-spacing: var(--ls-normal);
  padding: 10px 16px;
  color: #2b2b2b;
  position: relative;
  font-weight: var(--fw-semibold);
}

.header .navbar a:hover,
.header .navbar .active,
.header .navbar li.active>a,
.header .navbar li:hover>a {
  color: #0a0a0a;
}

.header .navbar>ul>li:not(.nav-cta-item)>a::after {
  content: "";
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 4px;
  height: 2px;
  border-radius: 2px;
  background: #008060;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s ease;
}

.header .navbar>ul>li:not(.nav-cta-item):hover>a::after,
.header .navbar>ul>li.active:not(.nav-cta-item)>a::after {
  transform: scaleX(1);
}

.nav-cta-item {
  margin-left: 12px;
}

.header .navbar .nav-cta,
.header .navbar .nav-cta:focus {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 20px;
  background: #0a0a0a;
  color: #fff;
  border-radius: 999px;
  font-size: var(--fs-14);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-normal);
  transition: all 0.25s ease;
  white-space: nowrap;
}

.header .navbar .nav-cta i {
  margin-left: 0;
  font-size: var(--fs-13);
  transition: transform 0.25s ease;
}

.header .navbar .nav-cta .bi::before,
.header .navbar .nav-cta [class*=" bi-"]::before,
.header .navbar .nav-cta [class^="bi-"]::before {
  color: #fff;
}

.header .navbar .nav-cta:hover {
  background: #1f1f1f;
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.header .navbar .nav-cta:hover i {
  transform: translateX(3px);
}

.header .navbar .nav-cta::after {
  display: none !important;
}

.header .navbar .dropdown ul {
  margin-top: 8px;
  padding: 8px;
  border-radius: 14px;
  border: 1px solid rgba(10, 10, 10, 0.06);
  box-shadow: 0 12px 30px -12px rgba(0, 0, 0, 0.12);
}

.header .navbar .dropdown ul a {
  font-size: var(--fs-16);
  font-weight: var(--fw-semibold);
  padding: 10px 14px;
  border-radius: 8px;
  transition: background 0.15s ease, color 0.15s ease;
}

.header .navbar .dropdown ul a:hover,
.header .navbar .dropdown ul li.active>a {
  background: rgba(0, 128, 96, 0.1);
  color: #004c3f;
}

.header .navbar .dropdown ul a::after {
  display: none !important;
}

/* Open mobile menu: one step larger for touch targets */
.header .navbar-mobile a,
.header .navbar-mobile a:focus {
  font-size: var(--fs-16);
}

@media (max-width: 1100px) {
  .nav-cta-item {
    display: none;
  }
}

/*--------------------------------------------------------------
# Bootstrap icon override (font glyph fallback)
--------------------------------------------------------------*/
.bi-arrow-right::before {
  content: "";
  display: inline-block;
  width: 1em;
  height: 1em;
  background-color: currentColor;
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='black'><path fill-rule='evenodd' d='M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8z'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='black'><path fill-rule='evenodd' d='M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8z'/></svg>");
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  vertical-align: -0.125em;
  font-family: inherit;
}

.bi-arrow-left::before {
  content: "";
  display: inline-block;
  width: 1em;
  height: 1em;
  background-color: currentColor;
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='black'><path fill-rule='evenodd' d='M15 8a.5.5 0 0 0-.5-.5H2.707l3.147-3.146a.5.5 0 1 0-.708-.708l-4 4a.5.5 0 0 0 0 .708l4 4a.5.5 0 0 0 .708-.708L2.707 8.5H14.5A.5.5 0 0 0 15 8z'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='black'><path fill-rule='evenodd' d='M15 8a.5.5 0 0 0-.5-.5H2.707l3.147-3.146a.5.5 0 1 0-.708-.708l-4 4a.5.5 0 0 0 0 .708l4 4a.5.5 0 0 0 .708-.708L2.707 8.5H14.5A.5.5 0 0 0 15 8z'/></svg>");
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  vertical-align: -0.125em;
  font-family: inherit;
}

/*--------------------------------------------------------------
# FAQ Modern (accordion)
--------------------------------------------------------------*/
.faq-modern {
  padding: 60px 0 0;
  background: #fff;
}

.faq-modern-list {
  max-width: 820px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.faq-item {
  background: #fff;
  /* Same neutral hairline as the blog list rows; the app colour only marks the open item */
  border: 1px solid rgba(10, 10, 10, 0.08);
  border-radius: 16px;
  overflow: hidden;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.faq-item[open] {
  border-color: rgba(var(--app-theme-rgb), 0.4);
  box-shadow: 0 6px 20px -10px rgba(var(--app-theme-rgb), 0.22);
}

body.app-theme--recommendations .faq-item[open] {
  border-color: rgba(202, 138, 4, 0.6);
  box-shadow: 0 6px 20px -10px rgba(202, 138, 4, 0.35);
}

.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px;
  cursor: pointer;
  font-family: var(--ff-display);
  font-size: var(--fs-18);
  font-weight: var(--fw-regular);
  letter-spacing: var(--ls-snug);
  color: #0a0a0a;
  list-style: none;
  user-select: none;
  transition: color 0.15s ease;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

/* Hover shifts colour only; a weight change reflows the summary row */
.faq-item summary:hover {
  color: var(--app-theme-solid-dark);
}

.faq-item-icon {
  flex-shrink: 0;
  position: relative;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: rgba(var(--app-theme-rgb), 0.12);
  transition: background 0.2s ease, transform 0.3s ease;
}

.faq-item-icon::before,
.faq-item-icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background: var(--app-theme-solid);
  border-radius: 2px;
  transform: translate(-50%, -50%);
  transition: transform 0.25s ease;
}

.faq-item-icon::before {
  width: 12px;
  height: 2px;
}

.faq-item-icon::after {
  width: 2px;
  height: 12px;
}

.faq-item[open] .faq-item-icon {
  background: var(--app-theme-solid);
  transform: rotate(180deg);
}

.faq-item[open] .faq-item-icon::before,
.faq-item[open] .faq-item-icon::after {
  background: #fff;
}

.faq-item[open] .faq-item-icon::after {
  transform: translate(-50%, -50%) scaleY(0);
}

.faq-item-body {
  padding: 0 16px 16px;
  font-size: var(--fs-16);
  line-height: var(--lh-relaxed);
  color: #4a4a4a;
}

.faq-item-body p {
  margin: 0;
}

.faq-item-body a {
  color: #008060;
  font-weight: var(--fw-bold);
  text-decoration: none;
  border-bottom: 1.5px solid rgba(0, 128, 96, 0.3);
  transition: border-color 0.2s ease;
}

.faq-item-body a:hover {
  border-color: #008060;
}

@media (max-width: 640px) {
  .faq-modern {
    padding: 50px 0 0;
  }
}

/*--------------------------------------------------------------
# Learn Modern (Combined FAQ + Blog)
--------------------------------------------------------------*/
.learn-modern {
  padding: 60px 0 0;
  background: #fff;
}

.learn-modern-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 56px;
}

/* The FAQ column fills the row and spreads its cards, so both columns end on the same line */
.learn-modern-faq {
  display: flex;
  flex-direction: column;
}

.learn-modern-faq .faq-modern-list {
  flex: 1;
  justify-content: space-between;
  /* The shared list centres itself with auto margins; as a flex item that would shrink it to its content */
  max-width: none;
  margin: 0;
}

.learn-modern-section-title {
  font-family: var(--ff-display);
  font-size: var(--fs-13);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--ls-caps);
  color: #0a0a0a;
  margin: 0 0 20px;
}

.learn-modern-blog-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

.learn-modern-blog-header .learn-modern-section-title {
  margin: 0;
}

/* Same header height as the FAQ column title, so the first row and the first FAQ card start level */
.learn-modern-blog-header .learn-modern-viewall {
  line-height: var(--lh-none);
}

.learn-modern-viewall {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--ff-display);
  font-size: var(--fs-16);
  font-weight: var(--fw-bold);
  color: #0a0a0a;
  text-decoration: none;
  transition: gap 0.2s ease;
}

.learn-modern-viewall i {
  font-size: var(--fs-14);
  transition: transform 0.2s ease;
}

.learn-modern-viewall:hover {
  color: #004c3f;
}

.learn-modern-viewall:hover i {
  transform: translateX(3px);
}

.learn-modern-blog {
  display: flex;
  flex-direction: column;
}

.learn-blog-item {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 18px 0;
  border-top: 1px solid rgba(10, 10, 10, 0.08);
  text-decoration: none;
  color: inherit;
  transition: transform 0.2s ease;
}

.learn-blog-item:last-child {
  border-bottom: 1px solid rgba(10, 10, 10, 0.08);
}

.learn-blog-item:hover {
  transform: translateX(4px);
  color: inherit;
}

.learn-blog-thumb {
  flex-shrink: 0;
  width: 96px;
  height: 96px;
  border-radius: 12px;
  overflow: hidden;
  background: #eee;
}

.learn-blog-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.learn-blog-item:hover .learn-blog-thumb img {
  transform: scale(1.06);
}

.learn-blog-content {
  flex: 1;
  min-width: 0;
}

.learn-blog-meta {
  display: inline-block;
  font-family: var(--ff-display);
  font-size: var(--fs-12);
  font-weight: var(--fw-semibold);
  color: #6e6e6e;
  margin-bottom: 8px;
}

.learn-blog-tag {
  display: inline-block;
  padding: 3px 9px;
  background: rgba(var(--app-theme-rgb), 0.1);
  color: var(--app-theme-solid-dark);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--ls-caps);
  font-size: var(--fs-11);
  border-radius: 999px;
  margin-right: 4px;
}

.learn-blog-item h4 {
  font-family: var(--ff-display);
  font-size: var(--fs-18);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-snug);
  line-height: var(--lh-snug);
  color: #0a0a0a;
  margin: 0 0 8px;
  transition: color 0.2s ease;
}

.learn-blog-item:hover h4 {
  color: var(--app-theme-solid-dark);
}

.learn-blog-item p {
  font-size: var(--fs-14);
  line-height: var(--lh-normal);
  color: #6b6b6b;
  margin: 0;
}

@media (max-width: 991px) {
  .learn-modern-grid {
    grid-template-columns: 1fr;
    gap: 56px;
  }

  .learn-modern {
    padding: 50px 0 0;
  }
}

/*--------------------------------------------------------------
# How Modern (3-step process)
--------------------------------------------------------------*/
.how-modern {
  padding: 60px 0;
  background: #fff;
}

.how-modern-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  list-style: none;
  padding: 0;
  margin: 0;
  position: relative;
  counter-reset: step;
}

.how-modern-steps::before {
  content: "";
  position: absolute;
  top: 36px;
  left: calc(16.67% + 36px);
  right: calc(16.67% + 36px);
  height: 2px;
  background: repeating-linear-gradient(90deg, rgba(var(--app-theme-rgb), 0.35), rgba(var(--app-theme-rgb), 0.35) 6px, transparent 6px, transparent 12px);
  z-index: 0;
}

.how-step {
  position: relative;
  z-index: 1;
  text-align: center;
}

.how-step-num {
  width: 72px;
  height: 72px;
  margin: 0 auto 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 2px solid var(--app-theme-solid);
  border-radius: 999px;
  font-family: var(--ff-display);
  font-size: var(--fs-20);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-normal);
  color: var(--app-theme-solid);
  position: relative;
  transition: all 0.25s ease;
}

.how-step:hover .how-step-num {
  background: var(--app-theme-solid);
  color: #fff;
  transform: scale(1.05);
}

.how-step h3 {
  font-family: var(--ff-display);
  font-size: var(--fs-20);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-snug);
  color: #0a0a0a;
  margin: 0 0 10px;
}

.how-step p {
  font-size: var(--fs-16);
  line-height: var(--lh-relaxed);
  color: #4a4a4a;
  margin: 0 auto;
  max-width: 320px;
}

@media (max-width: 768px) {
  .how-modern-steps {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .how-modern-steps::before {
    display: none;
  }

  .how-modern {
    padding: 50px 0;
  }
}

/*--------------------------------------------------------------
# Page Hero Modern (inner page header)
--------------------------------------------------------------*/
.page-hero-modern {
  --hero-rgb: 0 128 96;
  position: relative;
  padding: 140px 0 80px;
  background: #f7f7f7;
  overflow: hidden;
}

.page-hero-modern-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 15% 20%, rgb(var(--hero-rgb) / 0.18), transparent 45%),
    radial-gradient(circle at 85% 75%, rgb(var(--hero-rgb) / 0.10), transparent 45%);
  pointer-events: none;
  z-index: 0;
}

/* Hero tinted with the surrounding app theme (help center category, article and search pages) */
.page-hero-modern--theme .page-hero-modern-bg {
  background:
    radial-gradient(circle at 15% 20%, rgba(var(--app-theme-rgb), 0.18), transparent 45%),
    radial-gradient(circle at 85% 75%, rgba(var(--app-theme-rgb), 0.10), transparent 45%);
}
.page-hero-modern .container {
  position: relative;
  z-index: 1;
}

.page-hero-modern-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: rgba(0, 128, 96, 0.12);
  color: #0a0a0a;
  font-family: var(--ff-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-13);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  border-radius: 999px;
  margin-bottom: 24px;
}

.page-hero-modern-eyebrow i {
  font-size: var(--fs-16);
}

.page-hero-modern-title {
  font-family: var(--ff-display);
  font-size: var(--fs-56);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: #0a0a0a;
  margin: 0 0 20px;
  max-width: 780px;
}

/* Single-article heroes (blog post, help article): a longer title, one step smaller */
.page-hero-modern:has(.blog-detail-meta) .page-hero-modern-title,
.page-hero-modern--article .page-hero-modern-title,
.page-hero-modern--search .page-hero-modern-title {
  font-size: var(--fs-36);
  letter-spacing: var(--ls-tight);
}

.page-hero-modern-pitch {
  font-size: var(--fs-18);
  line-height: var(--lh-relaxed);
  color: #4a4a4a;
  margin: 0;
  max-width: 640px;
}

@media (max-width: 768px) {
  .page-hero-modern {
    padding: 120px 0 60px;
  }

  /* The article-size title renders at 28px here, the snug band of the scale; tight leading cramps its lines */
  .page-hero-modern:has(.blog-detail-meta) .page-hero-modern-title,
  .page-hero-modern--article .page-hero-modern-title,
  .page-hero-modern--search .page-hero-modern-title {
    line-height: var(--lh-snug);
  }
}

/*--------------------------------------------------------------
# Legal pages (visual styling only - no content changes)
--------------------------------------------------------------*/
.page-hero-modern-legal {
  padding: 130px 0 60px;
}

.page-hero-modern-legal .page-hero-modern-title {
  margin-bottom: 12px;
  max-width: 100%;
}

.page-hero-modern-legal .page-hero-modern-pitch {
  margin: 0 0 28px;
}

.legal-modern-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 4px;
}

.legal-modern-nav a {
  display: inline-flex;
  align-items: center;
  padding: 8px 16px;
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(10, 10, 10, 0.08);
  border-radius: 999px;
  font-family: var(--ff-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-14);
  color: #4a4a4a;
  text-decoration: none;
  transition: all 0.2s ease;
}

.legal-modern-nav a:hover {
  border-color: rgba(0, 128, 96, 0.3);
  color: #004c3f;
  background: #fff;
}

.legal-modern-nav a.is-active {
  background: #0a0a0a;
  border-color: #0a0a0a;
  color: #fff;
}

/* Legal content body - typography only, content untouched */
.terms,
.privacy {
  padding: 50px 0 50px;
  background: #fff;
}

.terms .container .col,
.privacy .container .col {
  max-width: 100%;
}

.terms .extra-text,
.privacy .extra-text {
  font-family: var(--ff-body);
  font-size: var(--fs-16);
  line-height: var(--lh-loose);
  color: #2b2b2b;
}

.terms .extra-text h3,
.privacy .extra-text h3,
.terms .rules-page-title,
.privacy .rules-page-title {
  font-family: var(--ff-display);
  font-size: var(--fs-13);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--ls-caps);
  color: #0a0a0a;
  margin: 0 0 24px;
}

.terms .extra-text h4,
.privacy .extra-text h4 {
  font-family: var(--ff-display);
  font-size: var(--fs-20);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-snug);
  color: #0a0a0a;
  margin: 32px 0 14px;
  display: block;
}

.terms .extra-text p,
.privacy .extra-text p {
  margin: 0 0 16px;
}

.terms .text-section-subtitle,
.privacy .text-section-subtitle {
  display: inline-block;
  padding: 6px 12px;
  background: rgba(0, 128, 96, 0.08);
  color: #004c3f;
  font-family: var(--ff-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-12);
  letter-spacing: var(--ls-normal);
  border-radius: 999px;
  margin-bottom: 24px !important;
}

.terms .extra-text ul,
.privacy .extra-text ul {
  padding-left: 22px;
  margin: 0 0 18px;
}

.terms .extra-text ul li,
.privacy .extra-text ul li {
  margin-bottom: 8px;
}

.terms .extra-text a,
.privacy .extra-text a {
  color: #008060;
  font-weight: var(--fw-semibold);
  text-decoration: none;
  border-bottom: 1px solid rgba(0, 128, 96, 0.3);
  transition: border-color 0.2s ease;
}

.terms .extra-text a:hover,
.privacy .extra-text a:hover {
  border-bottom-color: #008060;
}

@media (max-width: 768px) {
  .legal-modern-nav {
    gap: 6px;
  }

  .legal-modern-nav a {
    padding: 7px 12px;
  }
}

/*--------------------------------------------------------------
# App Detail Modern (shared across all app landing pages)
--------------------------------------------------------------*/
.app-hero-modern {
  position: relative;
  padding: 130px 0 80px;
  background: #f7f7f7;
  overflow: hidden;
}

@property --app-hero-color-back {
  syntax: '<color>';
  inherits: true;
  initial-value: rgba(0, 128, 96, 0.20);
}

@property --app-hero-color-front {
  syntax: '<color>';
  inherits: true;
  initial-value: rgba(0, 128, 96, 0.10);
}

.app-hero-modern-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 12% 15%, var(--app-hero-color-back), transparent 38%),
    radial-gradient(circle at 88% 80%, var(--app-hero-color-front), transparent 38%);
  pointer-events: none;
  z-index: 0;
  transition: --app-hero-color-back 1.2s ease, --app-hero-color-front 1.2s ease;
}

.app-hero-modern--order-manager {
  --app-hero-color-back: rgba(132, 220, 165, 0.18);
  --app-hero-color-front: rgba(132, 220, 165, 0.12);
}

.app-hero-modern--printer-templates {
  --app-hero-color-back: rgba(255, 133, 116, 0.18);
  --app-hero-color-front: rgba(255, 133, 116, 0.12);
}

.app-hero-modern--promotions {
  --app-hero-color-back: rgba(233, 79, 138, 0.16);
  --app-hero-color-front: rgba(233, 79, 138, 0.10);
}

.app-hero-modern--simple-invoice {
  --app-hero-color-back: rgba(165, 155, 240, 0.18);
  --app-hero-color-front: rgba(165, 155, 240, 0.12);
}

.app-hero-modern--upsell {
  --app-hero-color-back: rgba(0, 166, 166, 0.16);
  --app-hero-color-front: rgba(0, 166, 166, 0.10);
}

.app-hero-modern--recommendations {
  --app-hero-color-back: rgba(252, 211, 77, 0.20);
  --app-hero-color-front: rgba(252, 211, 77, 0.12);
}

.app-hero-modern--reforestation {
  --app-hero-color-back: rgba(34, 197, 94, 0.20);
  --app-hero-color-front: rgba(34, 197, 94, 0.12);
}

.app-hero-modern--reforestation .app-hero-modern-visual img {
  width: 80%;
  margin-inline: auto;
}

/* Screenshot is 80% wide and centered, so the badge shifts to its corner */
.app-hero-modern--reforestation .app-hero-modern-visual .bfs-badge {
  left: calc(10% - 22px);
}

@media (max-width: 1199px) {
  .app-hero-modern--reforestation .app-hero-modern-visual .bfs-badge {
    left: calc(10% - 10px);
  }
}

.app-hero-modern--bulk-product-edit {
  --app-hero-color-back: rgba(59, 130, 246, 0.20);
  --app-hero-color-front: rgba(59, 130, 246, 0.12);
}

.app-hero-modern .container {
  position: relative;
  z-index: 1;
}

.app-hero-modern-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}

.app-hero-modern-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: rgba(0, 128, 96, 0.12);
  color: #0a0a0a;
  font-family: var(--ff-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-13);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  border-radius: 999px;
  margin-bottom: 18px;
}

.app-hero-modern-eyebrow i {
  font-size: var(--fs-14);
}

.app-hero-modern-stats {
  display: flex;
  flex-wrap: nowrap;
  gap: 5px;
  margin-top: 36px;
  padding-top: 26px;
  border-top: 1px solid rgba(10, 10, 10, 0.08);
}

.app-hero-modern-stat {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1 1 0;
  min-width: 0;
}

.app-hero-modern-stat-icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 128, 96, 0.10);
  border-radius: 10px;
  color: #008060;
  font-size: var(--fs-16);
}

.app-hero-modern-stat-icon-rating {
  background: rgba(245, 184, 0, 0.16);
  color: #d99100;
}

.app-hero-modern-stat-text {
  min-width: 0;
}

.app-hero-modern-stat-text strong {
  display: block;
  font-family: var(--ff-display);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-snug);
  color: #0a0a0a;
  line-height: var(--lh-snug);
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.app-hero-modern-stat-text span {
  display: block;
  font-size: var(--fs-12);
  font-weight: var(--fw-regular);
  color: #0a0a0a;
  letter-spacing: var(--ls-normal);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 640px) {
  .app-hero-modern-stats {
    flex-wrap: wrap;
    gap: 18px 24px;
  }

  .app-hero-modern-stat {
    flex: 0 1 auto;
  }
}

.app-hero-modern-title {
  font-family: var(--ff-display);
  font-size: var(--fs-56);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: #0a0a0a;
  margin: 0 0 22px;
}

.app-hero-modern-pitch {
  font-size: var(--fs-18);
  line-height: var(--lh-relaxed);
  color: #4a4a4a;
  margin: 0 0 32px;
  max-width: 560px;
}

.app-hero-modern-pitch-link {
  color: rgba(var(--app-theme-rgb), 1);
  font-weight: var(--fw-semibold);
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
}

.app-hero-modern-pitch-link:hover {
  color: rgba(var(--app-theme-rgb), 0.8);
}

.app-hero-modern-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 18px;
}

.app-hero-modern-cta small {
  font-size: var(--fs-12);
  color: #6b6b6b;
  font-weight: var(--fw-semibold);
}

.app-hero-modern-visual {
  position: relative;
}

.app-hero-modern-visual img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 18px;
  border: 1px solid rgba(10, 10, 10, 0.08);
  box-shadow:
    0 30px 60px -20px rgba(0, 0, 0, 0.18),
    0 12px 24px -12px rgba(0, 128, 96, 0.22);
}

/* Prominent Built for Shopify badge over the hero screenshot */
@media (max-width: 600px) {
  .app-hero-modern-visual {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
}

@media (max-width: 991px) {
  .app-hero-modern {
    padding: 110px 0 60px;
  }

  .app-hero-modern-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .app-hero-modern-pitch {
    max-width: 100%;
  }
}

@media (max-width: 640px) {
  .app-hero-modern-cta {
    flex-direction: column;
    align-items: stretch;
  }

  .app-hero-modern-cta .btn-modern {
    justify-content: center;
  }

  .app-hero-modern-cta small {
    text-align: center;
  }
}

/* How Modern - 4 step variant */
.how-modern-steps-4 {
  grid-template-columns: repeat(4, 1fr);
}

.how-modern-steps-4::before {
  left: calc(12.5% + 36px);
  right: calc(12.5% + 36px);
}

@media (max-width: 991px) {
  .how-modern-steps-4 {
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
  }

  .how-modern-steps-4::before {
    display: none;
  }
}

/* App Gallery Modern */
.app-gallery-modern {
  padding: 60px 0;
  background: #fafafa;
}

.app-gallery-modern-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

.app-gallery-modern-item {
  --gallery-accent-border: rgba(0, 128, 96, 0.45);
  --gallery-accent-shadow: rgba(0, 128, 96, 0.40);
  position: relative;
  display: block;
  border-radius: 14px;
  overflow: hidden;
  background: #f5f7fa;
  border: 1px solid rgba(10, 10, 10, 0.08);
  cursor: zoom-in;
  transition: all 0.3s ease;
}

.app-gallery-modern-item:hover {
  border-color: var(--gallery-accent-border);
  box-shadow: 0 18px 40px -16px var(--gallery-accent-shadow);
}

.app-gallery-modern--order-manager .app-gallery-modern-item {
  --gallery-accent-border: rgba(132, 220, 165, 0.65);
  --gallery-accent-shadow: rgba(132, 220, 165, 0.55);
}

.app-gallery-modern--printer-templates .app-gallery-modern-item {
  --gallery-accent-border: rgba(255, 133, 116, 0.55);
  --gallery-accent-shadow: rgba(255, 133, 116, 0.45);
}

.app-gallery-modern--promotions .app-gallery-modern-item {
  --gallery-accent-border: rgba(233, 79, 138, 0.50);
  --gallery-accent-shadow: rgba(233, 79, 138, 0.42);
}

.app-gallery-modern--simple-invoice .app-gallery-modern-item {
  --gallery-accent-border: rgba(165, 155, 240, 0.65);
  --gallery-accent-shadow: rgba(165, 155, 240, 0.55);
}

.app-gallery-modern--upsell .app-gallery-modern-item {
  --gallery-accent-border: rgba(0, 166, 166, 0.50);
  --gallery-accent-shadow: rgba(0, 166, 166, 0.45);
}

.app-gallery-modern--recommendations .app-gallery-modern-item {
  --gallery-accent-border: rgba(252, 211, 77, 0.65);
  --gallery-accent-shadow: rgba(252, 211, 77, 0.55);
}

.app-gallery-modern--reforestation .app-gallery-modern-item {
  --gallery-accent-border: rgba(34, 197, 94, 0.55);
  --gallery-accent-shadow: rgba(34, 197, 94, 0.45);
}

.app-gallery-modern--bulk-product-edit .app-gallery-modern-item {
  --gallery-accent-border: rgba(59, 130, 246, 0.55);
  --gallery-accent-shadow: rgba(59, 130, 246, 0.45);
}

.app-gallery-modern-item img {
  display: block;
  width: 100%;
  height: 100%;
}

.app-gallery-modern-zoom {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.95);
  color: #004c3f;
  border-radius: 999px;
  font-size: var(--fs-14);
  opacity: 0;
  transform: translateY(-4px);
  transition: all 0.25s ease;
}

.app-gallery-modern-item:hover .app-gallery-modern-zoom {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 991px) {
  .app-gallery-modern-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .app-gallery-modern-grid {
    grid-template-columns: 1fr;
  }

  .app-gallery-modern {
    padding: 50px 0;
  }
}

/* App Pricing Modern */
.app-pricing-modern {
  padding: 60px 0 0;
  background: #fff;
  --pricing-accent-solid: #008060;
  --pricing-accent-solid-dark: #004c3f;
  --pricing-accent-border: rgba(0, 128, 96, 0.35);
  --pricing-accent-bg: rgba(0, 128, 96, 0.04);
  --pricing-accent-shadow: rgba(0, 128, 96, 0.20);
  --pricing-accent-shadow-strong: rgba(0, 128, 96, 0.22);
  --pricing-accent-badge-shadow: rgba(0, 128, 96, 0.4);
}

.app-pricing-modern-grid {
  display: grid;
  gap: 22px;
  align-items: stretch;
}

.app-pricing-modern-grid-1 {
  grid-template-columns: minmax(0, 420px);
  justify-content: center;
}

.app-pricing-modern-grid-2 {
  grid-template-columns: repeat(2, minmax(0, 380px));
  justify-content: center;
}

.app-pricing-modern-grid-3 {
  grid-template-columns: repeat(3, 1fr);
  max-width: 1100px;
  margin: 0 auto;
}

.app-pricing-modern-grid-4 {
  grid-template-columns: repeat(4, 1fr);
}

.app-pricing-modern--order-manager {
  --pricing-accent-solid: #84dca5;
  --pricing-accent-solid-dark: #4ea874;
  --pricing-accent-border: rgba(132, 220, 165, 0.65);
  --pricing-accent-bg: rgba(132, 220, 165, 0.08);
  --pricing-accent-shadow: rgba(132, 220, 165, 0.45);
  --pricing-accent-shadow-strong: rgba(132, 220, 165, 0.50);
  --pricing-accent-badge-shadow: rgba(132, 220, 165, 0.55);
}

.app-pricing-modern--printer-templates {
  --pricing-accent-solid: #ff8574;
  --pricing-accent-solid-dark: #ff674f;
  --pricing-accent-border: rgba(255, 133, 116, 0.50);
  --pricing-accent-bg: rgba(255, 133, 116, 0.06);
  --pricing-accent-shadow: rgba(255, 133, 116, 0.35);
  --pricing-accent-shadow-strong: rgba(255, 133, 116, 0.40);
  --pricing-accent-badge-shadow: rgba(255, 133, 116, 0.45);
}

.app-pricing-modern--promotions {
  --pricing-accent-solid: #e94f8a;
  --pricing-accent-solid-dark: #cb195d;
  --pricing-accent-border: rgba(233, 79, 138, 0.50);
  --pricing-accent-bg: rgba(233, 79, 138, 0.06);
  --pricing-accent-shadow: rgba(233, 79, 138, 0.32);
  --pricing-accent-shadow-strong: rgba(233, 79, 138, 0.38);
  --pricing-accent-badge-shadow: rgba(233, 79, 138, 0.42);
}

.app-pricing-modern--simple-invoice {
  --pricing-accent-solid: #a59bf0;
  --pricing-accent-solid-dark: #6f64c8;
  --pricing-accent-border: rgba(165, 155, 240, 0.65);
  --pricing-accent-bg: rgba(165, 155, 240, 0.08);
  --pricing-accent-shadow: rgba(165, 155, 240, 0.45);
  --pricing-accent-shadow-strong: rgba(165, 155, 240, 0.50);
  --pricing-accent-badge-shadow: rgba(165, 155, 240, 0.55);
}

.app-pricing-modern--upsell {
  --pricing-accent-solid: #00a6a6;
  --pricing-accent-solid-dark: #007a7a;
  --pricing-accent-border: rgba(0, 166, 166, 0.50);
  --pricing-accent-bg: rgba(0, 166, 166, 0.06);
  --pricing-accent-shadow: rgba(0, 166, 166, 0.35);
  --pricing-accent-shadow-strong: rgba(0, 166, 166, 0.40);
  --pricing-accent-badge-shadow: rgba(0, 166, 166, 0.45);
}

.app-pricing-modern--recommendations {
  --pricing-accent-solid: #fcd34d;
  --pricing-accent-solid-dark: #ca8a04;
  --pricing-accent-border: rgba(252, 211, 77, 0.65);
  --pricing-accent-bg: rgba(252, 211, 77, 0.08);
  --pricing-accent-shadow: rgba(252, 211, 77, 0.45);
  --pricing-accent-shadow-strong: rgba(252, 211, 77, 0.50);
  --pricing-accent-badge-shadow: rgba(252, 211, 77, 0.55);
}

.app-pricing-modern--reforestation {
  --pricing-accent-solid: #22c55e;
  --pricing-accent-solid-dark: #15803d;
  --pricing-accent-border: rgba(34, 197, 94, 0.55);
  --pricing-accent-bg: rgba(34, 197, 94, 0.06);
  --pricing-accent-shadow: rgba(34, 197, 94, 0.35);
  --pricing-accent-shadow-strong: rgba(34, 197, 94, 0.40);
  --pricing-accent-badge-shadow: rgba(34, 197, 94, 0.45);
}

.app-pricing-modern--bulk-product-edit {
  --pricing-accent-solid: #3b82f6;
  --pricing-accent-solid-dark: #2563eb;
  --pricing-accent-border: rgba(59, 130, 246, 0.55);
  --pricing-accent-bg: rgba(59, 130, 246, 0.06);
  --pricing-accent-shadow: rgba(59, 130, 246, 0.35);
  --pricing-accent-shadow-strong: rgba(59, 130, 246, 0.40);
  --pricing-accent-badge-shadow: rgba(59, 130, 246, 0.45);
}

.app-pricing-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 30px 26px;
  background: #fff;
  border: 1px solid rgba(10, 10, 10, 0.08);
  border-radius: 18px;
  transition: all 0.3s ease;
}

.app-pricing-card:hover {
  transform: translateY(-4px);
  border-color: var(--pricing-accent-border);
  box-shadow: 0 10px 24px -14px var(--pricing-accent-shadow);
}

.app-pricing-card.is-featured {
  border-color: var(--pricing-accent-solid);
  background: #fff;
  box-shadow: 0 8px 20px -10px var(--pricing-accent-shadow-strong);
}

.app-pricing-card-badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  padding: 6px 14px;
  background: linear-gradient(135deg, var(--pricing-accent-solid) 0%, var(--pricing-accent-solid-dark) 100%);
  color: #fff;
  font-family: var(--ff-display);
  font-size: var(--fs-11);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  border-radius: 999px;
  box-shadow: 0 6px 14px -4px var(--pricing-accent-badge-shadow);
}

.app-pricing-card-name {
  font-family: var(--ff-display);
  font-size: var(--fs-14);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  margin: 0 0 6px;
}

.app-pricing-card-tag {
  font-size: var(--fs-14);
  line-height: var(--lh-normal);
  color: #6b6b6b;
  margin: 0 0 18px;
  min-height: 44px;
}

.app-pricing-card-price {
  font-family: var(--ff-display);
  font-size: var(--fs-36);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-tight);
  color: #0a0a0a;
  line-height: var(--lh-none);
  margin-bottom: 4px;
  display: flex;
  align-items: baseline;
  gap: 2px;
}

.app-pricing-card-price sup {
  font-size: var(--fs-20);
  font-weight: var(--fw-bold);
  top: -0.6em;
  color: #4a4a4a;
}

.app-pricing-card-price small {
  font-size: var(--fs-14);
  font-weight: var(--fw-bold);
  color: #6b6b6b;
  letter-spacing: var(--ls-normal);
}

.app-pricing-card-billing {
  font-size: var(--fs-12);
  color: #6b6b6b;
  margin: 0 0 22px;
  min-height: 18px;
}

.app-pricing-card-features {
  list-style: none;
  padding: 0;
  margin: 0 0 28px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}

.app-pricing-card-features li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--fs-14);
  line-height: var(--lh-normal);
  color: #2b2b2b;
}

.app-pricing-card-features li i,
.app-pricing-card-features li .app-pricing-check {
  flex-shrink: 0;
  color: #8a8a8a;
  font-size: var(--fs-14);
}

.app-pricing-card-features li .app-pricing-check {
  width: 18px;
  height: 18px;
}

.app-pricing-card-features li.is-heading {
  font-weight: var(--fw-bold);
  color: #0a0a0a;
  font-family: var(--ff-display);
}

.app-pricing-card .btn-modern {
  width: 100%;
  justify-content: center;
}

@media (max-width: 1100px) {
  .app-pricing-modern-grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {

  .app-pricing-modern-grid-1,
  .app-pricing-modern-grid-2,
  .app-pricing-modern-grid-3,
  .app-pricing-modern-grid-4 {
    grid-template-columns: 1fr;
  }

  .app-pricing-modern {
    padding: 50px 0 0;
  }
}

/* App CTA Modern */
.app-cta-modern {
  padding: 60px 0;
  background: #fff;
}

.app-cta-modern-card {
  position: relative;
  padding: 60px 48px;
  background: #fff;
  border: 1px solid rgba(var(--app-theme-rgb), 0.14);
  border-radius: 28px;
  overflow: hidden;
  text-align: center;
}

.app-cta-modern-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(var(--app-theme-rgb), 0.16) 0%, rgba(var(--app-theme-rgb), 0.10) 50%, rgba(var(--app-theme-rgb), 0.08) 100%);
  pointer-events: none;
}

.app-cta-modern-card>* {
  position: relative;
}

.app-cta-modern-title {
  font-family: var(--ff-display);
  font-size: var(--fs-36);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-tight);
  line-height: var(--lh-tight);
  color: #0a0a0a;
  margin: 0 auto 14px;
  max-width: 880px;
}

.app-cta-modern-pitch {
  font-size: var(--fs-16);
  line-height: var(--lh-relaxed);
  color: #4a4a4a;
  margin: 0 auto 28px;
  max-width: 760px;
}

@media (max-width: 640px) {
  .app-cta-modern {
    padding: 50px 0;
  }

  .app-cta-modern-card {
    padding: 44px 24px;
    border-radius: 18px;
  }
}

/* Partnership section — explains the relationship between the nonprofit and the agency */
.partnership-modern {
  padding: 80px 0 70px;
  background: #fff;
}

.partnership-modern-logos {
  display: inline-flex;
  align-items: center;
  gap: 28px;
  padding: 22px 36px;
  margin: 0 auto 28px;
  background: #fff;
  border: 1px solid rgba(10, 10, 10, 0.10);
  border-radius: 999px;
  box-shadow: 0 18px 40px -20px rgba(0, 0, 0, 0.18), 0 4px 12px -6px rgba(0, 0, 0, 0.08);
}

.partnership-modern-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.partnership-modern-logo--sharpeon img {
  height: 34px;
  width: auto;
  display: block;
}

.partnership-modern-logo--otp img {
  height: 42px;
  width: auto;
  display: block;
}

.partnership-modern-logos-divider {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(var(--app-theme-rgb), 0.14);
  color: rgba(var(--app-theme-rgb), 1);
}

.partnership-modern-logos-divider svg {
  width: 28px;
  height: 28px;
  display: block;
}

.partnership-modern .section-eyebrow {
  color: rgba(var(--app-theme-rgb), 0.95);
}

.partnership-modern-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.partnership-modern-single {
  margin: 0 auto;
}

.partnership-card {
  position: relative;
  padding: 36px 32px;
  background: #fff;
  border: 1px solid rgba(10, 10, 10, 0.08);
  border-radius: 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-shadow: 0 18px 40px -28px rgba(0, 0, 0, 0.18);
}

.partnership-card-eyebrow {
  display: inline-block;
  font-size: var(--fs-14);
  font-weight: var(--fw-bold);
  color: rgba(var(--app-theme-rgb), 1);
}

.partnership-card-heading {
  font-family: var(--ff-display);
  font-size: var(--fs-24);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-snug);
  line-height: var(--lh-snug);
  color: #0a0a0a;
  margin: 0;
}

.partnership-card-lede {
  font-size: var(--fs-16);
  font-weight: var(--fw-semibold);
  color: #2a2a2a;
  margin: 0;
}

.partnership-card-desc--secondary {
  font-size: var(--fs-16);
  color: #5a5a5a;
}


.partnership-card-desc {
  font-size: var(--fs-16);
  line-height: var(--lh-relaxed);
  color: #4a4a4a;
  margin: 0;
}

.partnership-card-facts {
  list-style: none;
  padding: 0;
  margin: 6px 0 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.partnership-card-facts li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 18px 12px;
  background: rgba(var(--app-theme-rgb), 0.06);
  border-radius: 14px;
  text-align: center;
}

.partnership-card-facts li img {
  width: 56px;
  height: 56px;
  display: block;
  border-radius: 8px;
  margin-bottom: 4px;
}

.partnership-card-facts strong {
  font-family: var(--ff-display);
  font-size: var(--fs-20);
  font-weight: var(--fw-bold);
  color: #0a0a0a;
  line-height: var(--lh-tight);
}

.partnership-card-facts span {
  font-size: var(--fs-12);
  font-weight: var(--fw-semibold);
  color: #4a4a4a;
  letter-spacing: var(--ls-normal);
}

.partnership-card-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding-top: 6px;
  font-size: var(--fs-16);
  font-weight: var(--fw-bold);
  color: rgba(var(--app-theme-rgb), 1);
  text-decoration: none;
  align-self: flex-start;
}

.partnership-card-link:hover {
  color: rgba(var(--app-theme-rgb), 0.85);
  text-decoration: none;
}

.partnership-modern-footnote {
  text-align: center;
  margin: 32px auto 0;
  font-size: var(--fs-14);
  line-height: var(--lh-relaxed);
  color: #6a6a6a;
}

@media (max-width: 768px) {
  .partnership-modern {
    padding: 60px 0 50px;
  }

  .partnership-modern-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .partnership-card {
    padding: 28px 22px;
  }

  .partnership-card-facts {
    gap: 8px;
  }

  .partnership-card-facts li {
    padding: 12px 8px;
  }
}

/* App FAQ - 2-column variant of faq-modern */
.app-faq-modern-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin: 0 auto;
}

.app-faq-modern-grid .faq-modern-list {
  max-width: 100%;
  width: 100%;
  margin: 0;
  gap: 12px;
}

@media (max-width: 991px) {
  .app-faq-modern-grid {
    grid-template-columns: 1fr;
  }
}

/*--------------------------------------------------------------
# Error pages (404 / 500 / generic)
--------------------------------------------------------------*/
.error-modern {
  position: relative;
  padding: 160px 0 100px;
  background: #f7f7f7;
  overflow: hidden;
  min-height: 100vh;
  display: flex;
  align-items: center;
}

.error-modern-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 25%, rgba(0, 128, 96, 0.18), transparent 45%),
    radial-gradient(circle at 80% 70%, rgba(0, 128, 96, 0.10), transparent 45%);
  pointer-events: none;
  z-index: 0;
}

.error-modern .container {
  position: relative;
  z-index: 1;
}

.error-modern-card {
  text-align: center;
  max-width: 720px;
  margin: 0 auto;
}

.error-modern-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: rgba(0, 128, 96, 0.12);
  color: #0a0a0a;
  font-family: var(--ff-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-13);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  border-radius: 999px;
  margin-bottom: 28px;
}

.error-modern-eyebrow i {
  font-size: var(--fs-16);
}

.error-modern-code {
  font-family: var(--ff-display);
  font-size: var(--fs-220);
  font-weight: var(--fw-bold);
  line-height: var(--lh-none);
  letter-spacing: var(--ls-tight);
  margin: 0 0 16px;
  background: linear-gradient(135deg, #008060 0%, #00b386 50%, #004c3f 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  user-select: none;
}

.error-modern-title {
  font-family: var(--ff-display);
  font-size: var(--fs-36);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: #0a0a0a;
  margin: 0 0 16px;
}

.error-modern-pitch {
  font-size: var(--fs-18);
  line-height: var(--lh-relaxed);
  color: #4a4a4a;
  margin: 0 auto 36px;
  max-width: 540px;
}

.error-modern-cta {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}

.error-modern-form {
  margin-top: 36px;
  text-align: left;
  max-width: 460px;
  margin-left: auto;
  margin-right: auto;
}

.error-modern-form .contact-modern-actions {
  justify-content: center;
}

.error-modern-form .contact-modern-actions button {
  width: 100%;
  justify-content: center;
}

.php-email-form .loading,
.php-email-form .loading.d-block {
  display: none !important;
}

.btn-modern-spinner {
  display: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid currentColor;
  border-right-color: transparent;
  opacity: 0.85;
  animation: btn-modern-spin 0.7s linear infinite;
}

.is-loading {
  pointer-events: none;
  opacity: 0.92;
}

.is-loading .btn-modern-label {
  display: none;
}

.is-loading .btn-modern-spinner {
  display: inline-block;
}

@keyframes btn-modern-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (max-width: 768px) {
  .error-modern {
    padding: 130px 0 70px;
  }

  .error-modern-cta {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }

  .error-modern-cta .btn-modern {
    justify-content: center;
  }
}

/*--------------------------------------------------------------
# reCAPTCHA badge - hidden (attribution lives in Terms/Privacy)
--------------------------------------------------------------*/
.grecaptcha-badge {
  display: none !important;
}

/*--------------------------------------------------------------
# Migration guide (Invoice Wizard to Simple Invoice)
--------------------------------------------------------------*/
.page-hero-modern--migration .page-hero-modern-title {
  font-size: var(--fs-36);
  letter-spacing: var(--ls-tight);
}

.migration-modern {
  --migration-rgb: 0 128 96;
  --migration-solid: #008060;
  --migration-dark: #004c3f;
  background: #fafbfc;
  padding: 60px;
}

.migration-modern p {
  font-size: var(--fs-16);
  line-height: var(--lh-loose);
  color: #4a4a4a;
  margin: 0 0 18px;
}

.migration-modern p strong {
  color: #0a0a0a;
  font-weight: var(--fw-bold);
}

.migration-section-title {
  font-family: var(--ff-display);
  font-size: var(--fs-36);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-tight);
  color: #0a0a0a;
  margin: 72px 0 28px;
  position: relative;
  padding-left: 18px;
}

.migration-section-title::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  bottom: 8px;
  width: 4px;
  border-radius: 4px;
  background: var(--migration-solid);
}

.migration-intro {
  background: #fff;
  border: 1px solid rgba(10, 10, 10, 0.06);
  border-radius: 16px;
  padding: 36px 40px;
  margin-bottom: 32px;
  box-shadow: 0 4px 24px rgba(10, 10, 10, 0.04);
}

.migration-intro p:last-child {
  margin-bottom: 0;
}

.migration-step-modern {
  background: #fff;
  border: 1px solid rgba(10, 10, 10, 0.06);
  border-radius: 16px;
  padding: 32px 36px;
  margin: 20px 0;
  box-shadow: 0 4px 24px rgba(10, 10, 10, 0.04);
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.migration-step-modern:hover {
  box-shadow: 0 12px 36px rgba(10, 10, 10, 0.08);
  transform: translateY(-2px);
}

.migration-step-head {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 18px;
}

.migration-step-badge {
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgb(var(--migration-rgb) / 0.12), rgb(var(--migration-rgb) / 0.04));
  color: var(--migration-dark);
  font-family: var(--ff-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-13);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: var(--lh-none);
  border: 1px solid rgba(var(--migration-rgb) / 0.18);
}

.migration-step-badge span:first-child {
  font-size: var(--fs-11);
  opacity: 0.75;
  letter-spacing: var(--ls-caps);
  margin-bottom: 3px;
}

.migration-step-badge span:last-child {
  font-size: var(--fs-20);
  font-weight: var(--fw-bold);
  color: var(--migration-solid);
}

.migration-step-title {
  font-family: var(--ff-display);
  font-size: var(--fs-20);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-snug);
  color: #0a0a0a;
  margin: 0;
  line-height: var(--lh-snug);
}

.migration-step-body {
  font-size: var(--fs-16);
  line-height: var(--lh-loose);
  color: #4a4a4a;
}

.migration-step-body strong {
  color: #0a0a0a;
  font-weight: var(--fw-bold);
}

.migration-media {
  margin-top: 24px;
}

.migration-card-preview,
.migration-card-highlighted {
  background: #f7f9fb;
  border: 1px solid rgba(10, 10, 10, 0.06);
  border-radius: 14px;
  padding: 24px;
  transition: all 0.25s ease;
}

.migration-card-highlighted {
  background: linear-gradient(135deg, rgb(var(--migration-rgb) / 0.06), rgb(var(--migration-rgb) / 0.02));
  border: 1px solid rgb(var(--migration-rgb) / 0.25);
  box-shadow: 0 8px 28px rgb(var(--migration-rgb) / 0.12);
}

.migration-card-preview:hover {
  box-shadow: 0 6px 20px rgba(10, 10, 10, 0.06);
}

.migration-card-highlighted:hover {
  box-shadow: 0 14px 40px rgb(var(--migration-rgb) / 0.18);
  transform: translateY(-2px);
}

.migration-card-label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--ff-display);
  font-size: var(--fs-16);
  font-weight: var(--fw-bold);
  color: #0a0a0a;
  margin-bottom: 14px;
  letter-spacing: var(--ls-normal);
}

.migration-card-highlighted .migration-card-label {
  color: var(--migration-dark);
}

.migration-card-label i {
  font-size: var(--fs-16);
  color: var(--migration-solid);
}

.migration-card-preview img,
.migration-card-highlighted img {
  width: 100%;
  height: auto;
  border-radius: 8px;
  display: block;
  box-shadow: 0 2px 8px rgba(10, 10, 10, 0.06);
}

.migration-video-frame {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  border-radius: 10px;
  background: #000;
  box-shadow: 0 4px 16px rgba(10, 10, 10, 0.12);
}

.migration-video-frame iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.migration-arrow {
  display: flex;
  justify-content: center;
  margin: 18px 0;
}

.migration-arrow-icon {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: rgb(var(--migration-rgb) / 0.1);
  color: var(--migration-solid);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  animation: migration-bounce 1.6s infinite ease-in-out;
}

.migration-arrow-icon svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

@keyframes migration-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

.migration-video-card {
  background: #fff;
  border: 1px solid rgba(10, 10, 10, 0.06);
  border-radius: 16px;
  padding: 28px;
  margin: 28px 0 8px;
}

.migration-video-card .migration-card-label {
  font-size: var(--fs-16);
  color: var(--migration-dark);
  margin-bottom: 18px;
}

.migration-important-modern {
  background: #fffaf2;
  border: 1px solid #fde2c2;
  border-left: 4px solid #f97316;
  border-radius: 14px;
  padding: 28px 32px;
  margin: 24px 0;
  box-shadow: 0 4px 18px rgba(249, 115, 22, 0.08);
}

.migration-important-modern ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.migration-important-modern li {
  position: relative;
  padding-left: 28px;
  margin-bottom: 14px;
  font-size: var(--fs-16);
  line-height: var(--lh-loose);
  color: #3a3a3a;
}

.migration-important-modern li:last-child {
  margin-bottom: 0;
}

.migration-important-modern li::before {
  content: "\F33A";
  font-family: "bootstrap-icons";
  position: absolute;
  left: 0;
  top: 1px;
  color: #f97316;
  font-size: var(--fs-16);
  line-height: var(--lh-loose);
}

.migration-important-modern li strong {
  color: #0a0a0a;
}

.migration-important-modern a {
  color: var(--migration-dark);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.migration-support-modern {
  display: flex;
  align-items: center;
  gap: 18px;
  background: #fff;
  border: 1px solid rgba(10, 10, 10, 0.06);
  border-radius: 16px;
  padding: 26px 32px;
  margin-top: 40px;
  box-shadow: 0 4px 24px rgba(10, 10, 10, 0.04);
}

.migration-support-modern i {
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: rgb(var(--migration-rgb) / 0.12);
  color: var(--migration-solid);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-20);
}

.migration-support-modern p {
  margin: 0;
  color: #4a4a4a;
  font-size: var(--fs-16);
  line-height: var(--lh-relaxed);
}

.migration-support-modern a {
  color: var(--migration-dark);
  font-weight: var(--fw-bold);
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (max-width: 768px) {
  .migration-modern {
    padding: 32px 0 64px;
  }

  .migration-intro,
  .migration-step-modern {
    padding: 24px;
  }

  .migration-step-head {
    gap: 14px;
  }

  .migration-step-badge {
    width: 48px;
    height: 48px;
  }

  .migration-card-preview,
  .migration-card-highlighted {
    padding: 18px;
  }

  .migration-video-card {
    padding: 20px;
  }

  .migration-important-modern {
    padding: 22px 24px;
  }

  .migration-support-modern {
    flex-direction: column;
    align-items: flex-start;
    padding: 22px 24px;
  }

  .migration-section-title {
    margin-top: 56px;
  }
}

/*--------------------------------------------------------------
# Affiliate Program (landing page)
--------------------------------------------------------------*/
/* Single-column pitch on this page; the site-wide 540px cap is too narrow */
.page-affiliate .hero-modern-pitch {
  max-width: 780px;
}

.aff-benefits {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 22px;
  padding: 0;
  margin: 0 0 36px;
  list-style: none;
}

.aff-benefits li {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: var(--fs-16);
  font-weight: var(--fw-semibold);
  color: #354152;
}

.aff-benefits li i {
  color: #16a34a;
  font-size: var(--fs-18);
}

.aff-section {
  padding: 84px 0;
  background: #fff;
}

/* Same band colour as testimonials; .how-modern is white by default */
.page-affiliate .how-modern {
  background: #f7f7f7;
}

/* CTA section above already carries 60/50px bottom padding; zero this side */
.page-affiliate .faq-modern {
  padding-top: 0;
}

/* Wider than the component's 720px cap */
.page-affiliate .aff-section .section-head,
.page-affiliate .how-modern .section-head {
  max-width: 880px;
}

.aff-why-copy {
  max-width: 880px;
  margin: 0 auto 40px;
  text-align: center;
  font-size: var(--fs-18);
  line-height: var(--lh-relaxed);
  color: #4a4a4a;
}

/* Hover shift is designed for arrow icons, not the member button's person icon */
[data-aff-member] .btn-modern-primary:hover i,
a[data-aff-member].btn-modern-primary:hover i {
  transform: none;
}

@media (max-width: 640px) {
  /* Mobile breakpoint re-adds vertical padding; keep both sides collapsed */
  .page-affiliate .faq-modern {
    padding: 0;
  }
}

/*--------------------------------------------------------------
# Auth pages (portal login / signup / password / verify)
--------------------------------------------------------------*/
.signup-modern {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: 140px 0 60px;
  overflow: hidden;
}

.signup-modern-card {
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 24px 64px rgba(1, 22, 39, 0.1);
  padding: 40px 36px;
  position: relative;
}

.signup-modern .hero-modern-title {
  font-size: var(--fs-30);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-snug);
}

.signup-modern .hero-modern-pitch {
  font-size: var(--fs-16);
  margin-bottom: 0;
}

/* Signup introduces the program, so its pitch keeps space above the form */
.signup-modern--intro .hero-modern-pitch {
  margin-bottom: 24px;
}

.signup-modern .btn-modern {
  justify-content: center;
}

/* Full width for submit buttons only; verify-email's inline CTA has no form */
.signup-modern form .btn-modern {
  width: 100%;
}

.signup-modern .form-label {
  font-weight: var(--fw-semibold);
  font-size: var(--fs-14);
}

/* 16px keeps iOS Safari from zooming into the field */
.signup-modern .form-control {
  font-size: var(--fs-16);
}

.signup-modern .form-control::placeholder {
  color: #b8b8b8;
}

.signup-modern .invalid-feedback {
  display: block;
  font-size: var(--fs-13);
}

.signup-modern .form-check-label {
  font-size: var(--fs-14);
}

.signup-modern .form-check .invalid-feedback {
  margin-top: 4px;
}

@media (max-width: 575px) {
  .signup-modern-card {
    padding: 28px 20px;
  }
}

/*--------------------------------------------------------------
# Client-side form validation (contact, newsletter, help center search)
--------------------------------------------------------------*/
/* Out of the flow: the message hangs below the field, so showing it never moves the field */
form[data-validate] .invalid-feedback {
  display: block;
  position: absolute;
  left: 0;
  top: 100%;
  width: 100%;
  margin: 3px 0 0;
  font-size: var(--fs-13);
  line-height: var(--lh-snug);
  text-align: left;
}

/* Anchors for the message: the field wrapper, or the pill itself */
form[data-validate] .contact-modern-field,
form[data-validate] .newsletter-modern-input {
  position: relative;
}

/* Stacked form: the 18px field gap is too short for the message, so it takes its own line */
form[data-validate] .contact-modern-field > .invalid-feedback {
  position: static;
  margin-top: 6px;
}

/* The pill wrapper carries the state; its input has no border of its own */
.newsletter-modern-input.is-invalid,
.newsletter-modern-input.is-invalid:focus-within {
  border-color: #dc3545;
}

.newsletter-modern-input.is-invalid:focus-within {
  box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.15);
}

/* Lines up with the text inside the pill (6px wrapper + 20px input padding) */
.newsletter-modern-input > .invalid-feedback {
  padding-left: 26px;
}