:root {
  --brand: #347ffd;
  --brand-hover: #245fc7;
  --bg-light: #fff;
  --text: #111;
  --muted: #6c757d;
}

html, body { height: 100%; }
body {
  font-family: "Reem Kufi", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--text);
  overflow-x: hidden;
}

.underline {
  text-decoration: underline !important;
}

/* Home hero: fullscreen height (mobile + desktop) */
.hero {
  /* Fallback first, then modern dynamic viewport for mobile browser UI */
  box-sizing: border-box;
  min-height: 0;
  min-height: calc(100vh - var(--hero-offset-h, 0px));
  min-height: calc(100svh - var(--hero-offset-h, 0px));
  min-height: calc(100dvh - var(--hero-offset-h, 0px));
  display: flex;
  align-items: center;
  padding-top: calc(clamp(28px, 6vh, 80px) + env(safe-area-inset-top));
  padding-bottom: calc(clamp(28px, 6vh, 80px) + env(safe-area-inset-bottom));
}
.hero > .row {
  width: 100%;
}

.hero-bullets {
  list-style: none;
  padding-left: 0;
  margin: 0;
}
.hero-bullets li {
  position: relative;
  padding-left: 1.6rem;
  margin: 0.35rem 0;
  font-size: 16px;
  line-height: 1.4;
}
.hero-bullets li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  background: var(--brand);
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M20%206L9%2017l-5-5%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%223%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M20%206L9%2017l-5-5%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%223%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22/%3E%3C/svg%3E") center / contain no-repeat;
}

.hero-bullet-canva {
  display: inline-block;
  vertical-align: middle;
  margin: 0 4px;
}

.hero-watch-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  text-decoration: none;
}
.hero-watch-link:hover,
.hero-watch-link:focus {
  color: var(--brand-hover);
}

/* Before/after slider (hero) */
.ba-card {
  position: relative;
  width: min(560px, 100%);
  border-radius: 18px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.06);
  overflow: hidden; /* pills/badges are inside and should clip with the image */
}
.ba-slider {
  position: relative;
  aspect-ratio: 1 / 1;
  --pos: 55%;
  cursor: ew-resize;
  user-select: none;
  touch-action: none;
  overflow: hidden; /* keep layers clipped to rounded corners */
  border-radius: 18px;
}
.ba-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ba-layer {
  position: absolute;
  inset: 0;
}
.ba-layer--before {
  /* Reveal the left side without resizing the image */
  clip-path: inset(0 calc(100% - var(--pos)) 0 0);
}
.ba-layer--after {
  /* Reveal the right side without resizing the image */
  clip-path: inset(0 0 0 var(--pos));
}
.ba-label {
  position: absolute;
  top: 14px;
  left: 14px;
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(0, 0, 0, 0.08);
  font-size: 14px;
  font-weight: 600;
  z-index: 5;
  pointer-events: none;
}
.ba-badge {
  position: absolute;
  top: 14px;
  right: 14px;
  padding: 12px 14px;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(52, 127, 253, 0.94), rgba(36, 95, 199, 0.82));
  color: #fff;
  text-align: center;
  border: 1px solid rgba(255, 255, 255, 0.25);
  box-shadow: 0 12px 30px rgba(52, 127, 253, 0.25);
  z-index: 5;
  pointer-events: none;
}
.ba-badge__small {
  font-size: 12px;
  line-height: 1.15;
  opacity: 0.92;
}
.ba-badge__big {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.1;
}
.ba-range {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: ew-resize;
  pointer-events: none; /* we handle drag on the slider container for consistent behavior */
}
.ba-handle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--pos);
  width: 2px;
  background: rgba(255, 255, 255, 0.95);
  transform: translateX(-50%);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08);
  z-index: 4;
}
.ba-handle::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 34px;
  height: 34px;
  transform: translate(-50%, -50%);
  border-radius: 10px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.12);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);
  z-index: 0;
}
.ba-handle__icons {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  width: 34px;
  height: 34px;
  justify-content: center;
  color: var(--brand);
  z-index: 1; /* above the knob background (::after) */
  pointer-events: none;
}
.ba-handle__chev {
  width: 14px;
  height: 14px;
  display: block;
}

.ba-range:focus-visible ~ .ba-handle::after {
  outline: 3px solid rgba(52, 127, 253, 0.35);
  outline-offset: 2px;
}

.top-notice-banner {
  position: sticky;
  top: 0;
  z-index: 2000;
  background-color: var(--brand);
  color: #ffffff;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08);
  display: flex;
  justify-content: center;
}
.top-notice-banner__inner {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: calc(10px + env(safe-area-inset-top)) 16px 10px;
  text-align: center;
  font-size: 13px;
  line-height: 18px;
  font-weight: 600;
}
.top-notice-banner__emoji {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
}
.top-notice-banner a[data-subscribe-link] {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  background: #fff;
  color: var(--brand) !important;
  border: 1px solid rgba(255, 255, 255, 0.75);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
}
.top-notice-banner a[data-subscribe-link]:hover,
.top-notice-banner a[data-subscribe-link]:focus {
  background: rgba(255, 255, 255, 0.92);
  color: var(--brand-hover) !important;
}

a:not(.btn) { text-decoration: none; color: inherit; }
a:not(.btn):hover { color: var(--brand-hover); }

.btn {
  border-radius: 999px;
}

.btn-brand {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}
.btn-brand:hover, .btn-brand:focus {
  background: var(--brand-hover);
  border-color: var(--brand-hover);
  color: #fff;
}

/* Make Bootstrap primary match the brand (used on blog CTAs) */
.btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--brand);
  --bs-btn-border-color: var(--brand);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--brand-hover);
  --bs-btn-hover-border-color: var(--brand-hover);
  --bs-btn-focus-shadow-rgb: 52, 127, 253;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--brand-hover);
  --bs-btn-active-border-color: var(--brand-hover);
}
.btn-soft {
  background: var(--bg-light);
  border-color: var(--bg-light);
  color: var(--brand);
}
.btn-soft:hover, .btn-soft:focus { opacity: .9; color: var(--brand-hover); }

/* Warning CTA buttons (Support page callout) */
.btn-warningPrimary{
  background: #dc3545;
  border-color: #dc3545;
  color: #fff;
}
.btn-warningPrimary:hover,
.btn-warningPrimary:focus{
  background: #c82333;
  border-color: #c82333;
  color: #fff;
}
.btn-warningSecondary{
  background: #fff;
  border-color: #dc3545;
  color: #dc3545;
}
.btn-warningSecondary:hover,
.btn-warningSecondary:focus{
  background: rgba(220,53,69,0.06);
  border-color: #dc3545;
  color: #dc3545;
}

/* Brand info-style alert (Support / callout) */
.alert.alert--brand {
  --bs-alert-bg: rgba(52, 127, 253, 0.12);
  --bs-alert-border-color: rgba(52, 127, 253, 0.35);
  --bs-alert-color: #163f82;
  background: var(--bs-alert-bg);
  border-color: var(--bs-alert-border-color);
  color: var(--bs-alert-color);
}

.btnArrowIcon{
  width: 18px;
  height: 18px;
  display: block;
  flex: 0 0 auto;
}

.bg-light-brown { background: var(--bg-light); }

/* Testimonials */
.testimonial-card {
  border-radius: 18px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  background: #fff;
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.06);
  height: 100%;
}
.testimonial-avatar {
  width: 52px;
  height: 52px;
  border-radius: 999px;
  object-fit: cover;
  flex: 0 0 auto;
  border: 1px solid rgba(0, 0, 0, 0.08);
}
.testimonial-stars {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.testimonial-stars img {
  width: 16px;
  height: 16px;
  display: block;
}

/* Social proof (hero) */
.social-proof {
  width: 100%;
  display: flex;
  align-items: center;
}
.social-proof__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}
.social-proof__avatars {
  display: flex;
  align-items: center;
}
.social-proof__avatarWrap {
  position: relative;
  width: 48px;
  height: 48px;
  border-radius: 999px;
  overflow: hidden;
  margin-right: -18px;
  border: 3px solid #fff;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.12);
}
.social-proof__avatarWrap:last-child {
  margin-right: 0;
}
.social-proof__avatarWrap:nth-child(1) { z-index: 3; }
.social-proof__avatarWrap:nth-child(2) { z-index: 2; }
.social-proof__avatarWrap:nth-child(3) { z-index: 1; }
.social-proof__avatar {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.social-proof__text {
  max-width: 300px;
  font-size: 14px;
  line-height: 1.35;
}
.bg-brand { background: var(--brand); }
.bg-black { background: #000; }
.color-white { color: #fff; }
.color-gray { color: #93989e; }
.color-brand { color: var(--brand); }
.font-bold { font-weight: 600; }

.h-60 { height: 60px; }
.smooth-shadow {
  box-shadow:
    0px 0px 4.8px rgba(128, 140, 168, 0.077),
    0px 0px 15.4px rgba(128, 140, 168, 0.093),
    0px 0px 40px rgba(128, 140, 168, 0.105),
    0px 0px 102.8px rgba(128, 140, 168, 0.118),
    0px 0px 307px rgba(128, 140, 168, 0.15);
}

.image-feature {
  position: relative;
  width: min(400px, 100%);
  height: auto;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 10px;
}
.image-feature img {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 10px;
}

/* Mobile: keep feature images inside the content column with a small right gutter */
@media (max-width: 575.98px) {
  .image-feature {
    width: calc(100% - 16px);
    margin-left: 0 !important;
    margin-right: calc(16px + env(safe-area-inset-right)) !important;
  }
}
.blur-text { filter: blur(4px); }

/* Simple responsive video wrapper */
.video-wrap {
  position: relative;
  width: min(640px, 100%);
  aspect-ratio: 16 / 9;
  border-radius: 1rem;
  overflow: hidden;
  border: 5px solid #fff;
  background: #000;
}
/* Nav */
.site-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 0;
  position: relative;
}
.nav-links {
  display: flex;
  align-items: center;
  gap: 18px;
}
.nav-links a { font-size: 14px; color: #000; }
.nav-links a.active { color: var(--brand); }

/* "App" nav link as a small black button */
.nav-links a.nav-app-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 12px;
  border-radius: 999px;
  background: #000;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
}
.nav-links a.nav-app-btn:hover,
.nav-links a.nav-app-btn:focus {
  background: #111;
  color: #fff;
}
.nav-links a.nav-app-btn.active {
  color: #fff;
}

.nav-toggle {
  display: none;
  background: transparent;
  border: 0;
  padding: 0;
}

@media (max-width: 991px) {
  .nav-toggle { display: inline-flex; }
  .nav-links { display: none; }
  .nav-links[data-open="true"] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    padding: 12px;
    gap: 10px;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 14px;
    box-shadow: 0 10px 35px rgba(0, 0, 0, 0.12);
    z-index: 3000;
  }
  .nav-links[data-open="true"] a {
    width: 100%;
    padding: 10px 8px;
    border-radius: 10px;
  }
  .nav-links[data-open="true"] a:hover {
    background: rgba(0, 0, 0, 0.04);
  }

  /* Keep App as a small button in the mobile dropdown */
  .nav-links[data-open="true"] a.nav-app-btn {
    width: auto;
    padding: 8px 12px;
    background: #000;
    color: #fff;
    border-radius: 999px;
  }
  .nav-links[data-open="true"] a.nav-app-btn:hover,
  .nav-links[data-open="true"] a.nav-app-btn:focus {
    background: #111;
    color: #fff;
  }
}

/* General image safety */
img { max-width: 100%; height: auto; display: block; }

/* "How to blur an image" cards */
.howto-card {
  overflow: hidden;
}
.howto-card img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  object-position: center;
  position: static !important;
}

/* Notices */
.notice {
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 14px;
  position: relative;
  padding-right: 38px; /* room for dismiss button */
}
.notice__content {
  padding-right: 2px;
}
.notice__dismiss {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  border: 1px solid rgba(0, 0, 0, 0.12);
  background: rgba(255, 255, 255, 0.6);
  color: rgba(0, 0, 0, 0.65);
  line-height: 1;
  font-size: 18px;
  cursor: pointer;
}
.notice__dismiss:hover,
.notice__dismiss:focus {
  background: rgba(255, 255, 255, 0.85);
  color: rgba(0, 0, 0, 0.8);
}
.notice--success { background: rgba(37, 211, 102, 0.15); border: 1px solid rgba(37, 211, 102, 0.4); }
.notice--error { background: rgba(255, 61, 61, 0.12); border: 1px solid rgba(255, 61, 61, 0.35); }

/* Blog typography */
.prose { max-width: 860px; }
.prose h1 { font-size: clamp(28px, 4vw, 44px); margin: 22px 0 12px; }
.prose h2 { font-size: 22px; margin: 26px 0 12px; font-weight: 300; }
.prose h3 { font-size: 18px; margin: 18px 0 10px; font-weight: 300; }
.prose p, .prose li { font-size: 16px; line-height: 1.7; }
.prose .lede { font-size: 18px; color: #333; }
.callout {
  background: var(--bg-light);
  border-radius: 14px;
  padding: 16px;
  border: 1px solid rgba(0,0,0,.06);
}

/* Blog post layout (columns + media) */
.article-hero {
  margin: 18px 0 22px;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,.06);
  background: var(--bg-light);
}
.article-hero img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
}
.article-hero figcaption,
.article-figure figcaption {
  font-size: 13px;
  color: #6b7280;
  padding: 10px 12px;
  border-top: 1px solid rgba(0,0,0,.06);
  background: rgba(255,255,255,.7);
}
.article-figure {
  margin: 18px 0;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,.06);
  background: var(--bg-light);
}
.article-figure img { width: 100%; height: auto; display: block; }

.article-aside .aside-card {
  border-radius: 16px;
  border: 1px solid rgba(0,0,0,.06);
  background: #fff;
  padding: 16px;
}
.article-aside .aside-card + .aside-card { margin-top: 14px; }
.article-aside .aside-title { font-weight: 600; margin: 0 0 10px; }
.article-aside ul { padding-left: 1.1rem; margin-bottom: 0; }
.article-aside li { margin: 6px 0; }
.article-aside a:not(.btn) { color: inherit; }
.article-aside a:not(.btn):hover { color: var(--brand-hover); }

@media (min-width: 992px) {
  .article-aside {
    position: sticky;
    top: 92px; /* below sticky notice banner + some breathing room */
  }
}

/* Blog cards (thumbnail grid) */
.blog-card {
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.06);
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}
.blog-card:hover {
  transform: translateY(-2px);
  border-color: rgba(0, 0, 0, 0.12);
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.12);
}
.blog-card__media { display: block; background: var(--bg-light); }
.blog-card__img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
}
.blog-card__body {
  padding: 18px;
}
.blog-card__title:hover { color: var(--brand-hover); }

/* Legal pages */
body.legal-page {
  background: var(--bg-light);
}
body.legal-page .prose {
  background: #fff;
  border-radius: 16px;
  border: 1px solid rgba(0, 0, 0, 0.06);
  padding: clamp(18px, 3vw, 28px);
}
body.legal-page .prose h1 { margin-top: 0; }
body.legal-page .prose h2 {
  margin-top: 28px;
  padding-top: 14px;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}
body.legal-page .prose ul { padding-left: 1.2rem; }

/* Footer */
.footer {
  padding: 36px 0;
}
.footer a { color: #fff; }
.footer a:hover { color: var(--brand-hover); }