:root{
  --brand:#111827;
  --accent:#2563eb;
  --accent2:#16a34a;

  --bg:#f7f8fb;
  --surface:#ffffff;
  --mutedText:#4b5563;

  --border: rgba(17,24,39,.10);
  --borderStrong: rgba(17,24,39,.18);

  --radius:16px;
  --shadowSm: 0 6px 16px rgba(17,24,39,.06);
  --shadow:   0 12px 28px rgba(17,24,39,.10);
}

*{ box-sizing:border-box; }
html, body{ height:100%; }

body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--brand);

  /* Extra-soft layered background (reduced banding) */
  background:
    radial-gradient(1200px 600px at 18% 8%, rgba(37,99,235,.06), transparent 62%),
    radial-gradient(900px 520px at 85% 22%, rgba(16,185,129,.045), transparent 60%),
    radial-gradient(1200px 900px at 50% 120%, rgba(17,24,39,.035), transparent 58%),
    #f7f8fb;
}

a{ color: inherit; }

.container{
  max-width: 1200px;
  margin: 0 auto;
  padding: 22px;
}
@media (max-width: 640px){
  .container{ padding: 16px; }
}

/* Header / Nav */
.siteHeader{
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255,255,255,.84);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}

.headerRow{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap: 14px;
}

.nav{
  display:flex;
  gap: 10px;
  align-items:center;
  flex-wrap:wrap;
}

.nav a{
  text-decoration:none;
  padding: 8px 10px;
  border-radius: 10px;
  font-weight: 800;
}
.nav a:hover{
  background: rgba(17,24,39,.05);
}

.logoImg{
  height: 100px;
  width: auto;
  display:block;
}
.logoText{
  font-weight: 1000;
  letter-spacing: .2px;
}

@media (max-width: 640px){
  .logoText{ display:none; }
  .logoImg{ height: 38px; }
}

/* Sections */
.hero{
  padding: 60px 0 36px;
  border-bottom: 1px solid var(--border);
}
.section{
  padding: 56px 0;
}
@media (max-width: 640px){
  .section{ padding: 42px 0; }
}

.mutedBg{
  background: rgba(249,250,251,.70);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

h1,h2,h3{ font-weight: 1000; margin: 0; }
h1{ font-size: 2.2rem; letter-spacing: -0.4px; }
h2{ font-size: 1.6rem; }
h3{ font-size: 1.1rem; }

.lead{
  font-size: 1.1rem;
  max-width: 780px;
  color: var(--mutedText);
  line-height: 1.55;
  margin-top: 10px;
}
.muted{ color: var(--mutedText); }

/* Buttons */
.btn{
  padding: 12px 18px;
  border-radius: 12px;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  font-weight: 1000;
  border: 1px solid var(--border);
  background: #fff;
  box-shadow: 0 2px 0 rgba(17,24,39,.06);
}

.btn.primary{
  background: linear-gradient(135deg, #2563eb, #3b82f6);
  color:#fff;
  border-color: rgba(37,99,235,.30);
  box-shadow: 0 10px 18px rgba(37,99,235,.18);
}

.btn.secondary{
  color: var(--accent);
  border: 2px solid rgba(37,99,235,.55);
  background: #fff;
}

.ctaRow{
  display:flex;
  gap: 12px;
  flex-wrap:wrap;
  margin-top: 14px;
}

/* Pills */
.pill{
  display:inline-block;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(17,24,39,.06);
  border: 1px solid var(--border);
  font-size: 0.78rem;
  font-weight: 1000;
}
.pillDark{
  background: #111827;
  color:#fff;
  border-color: rgba(17,24,39,.25);
}

/* Cards */
.card{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px;
  box-shadow: var(--shadowSm);
}

/* Grids */
.featureGrid, .pricingGrid{
  display:grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  margin-top: 12px;
}

.cardsGrid{
  display:grid;
  gap: 16px;
  grid-template-columns: repeat(3, minmax(260px, 1fr));
}
@media (max-width: 860px){
  .cardsGrid{ grid-template-columns: repeat(2, minmax(240px, 1fr)); }
}
@media (max-width: 560px){
  .cardsGrid{ grid-template-columns: 1fr; }
}

/* ===========================
   Modern checkmarks / dashes
   =========================== */
.chk,
.dash{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width: 18px;
  height: 18px;
  margin: 0 auto;
  border-radius: 999px;
  font-weight: 900;
  line-height: 1;
}

.chk{
  background: rgba(22,163,74,.15);
  color: #15803d;
}
.chk::before{
  content: "✓";
  font-size: 13px;
}

.dash{
  background: rgba(17,24,39,.08);
  color: #6b7280;
}
.dash::before{
  content: "–";
  font-size: 14px;
}

/* ===========================
   Comparison table
   =========================== */
.comparisonWrap{
  margin-top: 12px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: var(--shadowSm);
  padding: 10px;
}

.comparisonGrid{
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
  min-width: 0;
}

@media (max-width: 1101px){
  .comparisonGrid{ min-width: 1160px; }
}

.comparisonGrid th,
.comparisonGrid td{
  padding: 10px 12px;
  border-bottom: 1px solid rgba(17,24,39,.08);
  font-size: 14px;
  text-align:center;
}

.comparisonGrid thead th{
  position: sticky;
  top: 0;
  background: #f3f4f6;
  border-bottom: 1px solid var(--borderStrong);
  font-weight: 1000;
}

.comparisonGrid th:first-child,
.comparisonGrid td:first-child{
  text-align:left;
  font-weight: 500;
}

.comparisonGrid tbody tr:nth-child(even) td{ background:#f7f7f8; }

.comparisonGrid tbody tr.groupRow td{
  background: #eef2f7 !important;
  font-weight: 1000;
  border-top: 1px solid var(--borderStrong);
}

/* Column emphasis */
.comparisonGrid th:nth-child(3),
.comparisonGrid td:nth-child(3){
  background: rgba(37,99,235,.22) !important;
  border-left: 2px solid rgba(37,99,235,.38);
  border-right: 2px solid rgba(37,99,235,.38);
}

.comparisonGrid th:nth-child(6),
.comparisonGrid td:nth-child(6){
  background: rgba(17,24,39,.14) !important;
  border-left: 2px solid rgba(17,24,39,.22);
  border-right: 2px solid rgba(17,24,39,.22);
}

/* Pricing page spacing */
body.pricing .hero{ padding: 52px 0 30px; }
body.pricing .section{ padding: 48px 0; }

.tierPro{ box-shadow: 0 14px 30px rgba(37,99,235,.14); }
.tierAdv{ box-shadow: 0 14px 30px rgba(17,24,39,.12); }

/* ===== Comparison table mobile UX: sticky Feature column + clear scroll hint ===== */
@media (max-width: 640px){
  /* Horizontal scroll container */
  .comparisonWrap{
    position: relative;
    overflow-x: auto !important;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
    padding: 10px;
  }

  /* Make sure there is something to scroll */
  .comparisonGrid{
    position: relative;
    min-width: 820px; /* forces horizontal scroll on phones */
  }

  /* Narrow the Feature column via colgroup override */
  .comparisonGrid col.colFeature{
    width: 120px !important;
  }

  /* Sticky Feature column */
  .comparisonGrid thead th:first-child,
  .comparisonGrid tbody td:first-child{
    position: sticky;
    left: 0;
    z-index: 7;
    background: #ffffff;
  }

  /* Header sticky cell needs header background */
  .comparisonGrid thead th:first-child{
    background: #f3f4f6;
    z-index: 9;
  }

  /* Group rows keep their background in sticky cell */
  .comparisonGrid tbody tr.groupRow td:first-child{
    background: #eef2f7 !important;
  }

  /* Add a divider/shadow to show the sticky boundary */
  .comparisonGrid thead th:first-child,
  .comparisonGrid tbody td:first-child{
    box-shadow: 10px 0 14px rgba(17,24,39,.08);
  }

  /* Normalize h3 margins in table headers (your markup uses h3) */
  .comparisonGrid thead h3{
    margin: 0;
    font-size: 0.92rem;
    line-height: 1.1;
  }

  /* Keep feature text readable in narrow column */
  .comparisonGrid td:first-child{
    font-size: 13px;
    line-height: 1.15;
    white-space: normal;
    word-break: break-word;
  }

  /* Scroll hint: right-side fade overlay (does not block taps) */
  .comparisonWrap::after{
    content: "";
    pointer-events: none;
    position: absolute;
    top: 0;
    right: 0;
    width: 34px;
    height: 100%;
    background: linear-gradient(to left, rgba(247,248,251,1), rgba(247,248,251,0));
    border-radius: var(--radius);
  }
}

/* ===== Active nav highlight ===== */
.nav .navLink.isActive{
  background: rgba(37,99,235,.10);
  border: 1px solid rgba(37,99,235,.25);
}

/* ===== Cookie consent banner (prominent version) ===== */
.cookieBanner{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2000;
  padding: 18px;
  background: linear-gradient(
    to top,
    rgba(255,255,255,0.95),
    rgba(255,255,255,0.85)
  );
  box-shadow: 0 -12px 24px rgba(0,0,0,0.10);
}

.cookieInner{
  max-width: 1200px;
  margin: 0 auto;
  background: #ffffff;
  border: 1px solid var(--borderStrong);
  border-radius: 18px;
  padding: 16px 18px;
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
}

.cookieText strong::before{
  content: "🍪";
  font-size: 16px;
  line-height: 1;
}

.cookieActions{
  display: flex;
  gap: 12px;
}

@media (max-width: 720px){
  .cookieInner{
    flex-direction: column;
    align-items: stretch;
  }
  .cookieActions{
    justify-content: flex-end;
  }
}

/* ===== Cookie banner: slide-down close animation ===== */
.cookieBanner.isClosing{
  transform: translateY(18px);
  opacity: 0;
}

/* ===== Fix: footer icons visibility + hover animation ===== */
.socialIcons{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 8px;
}
.socialIco{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width: 38px;
  height: 38px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(0,0,0,.18);
  color: rgba(255,255,255,.95);
  text-decoration: none;
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease;
}
.socialIco:hover{
  transform: translateY(-2px) scale(1.04);
  background: rgba(0,0,0,.28);
  box-shadow: 0 10px 20px rgba(0,0,0,.28);
  color: #ffffff;
}
.socialIco:active{
  transform: translateY(0) scale(.98);
}

/* ===== Official-style badges container ===== */
.storeBadges{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}
.storeBadgeImg{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius: 12px;
  overflow: hidden;
  text-decoration: none;
  transform: translateZ(0);
  transition: transform .16s ease, box-shadow .16s ease;
}
.storeBadgeImg img{
  display:block;
  height: 40px;          /* standard badge height */
  width: auto;
}
.storeBadgeImg:hover{
  transform: translateY(-2px);
  box-shadow: 0 10px 18px rgba(0,0,0,.28);
}

@media (max-width: 640px){
  .storeBadgeImg img{ height: 44px; }
}