:root {
  --price-ink: #090b0e;
  --price-muted: #667085;
  --price-line: #dfe4d5;
  --price-surface: #ffffff;
  --price-soft: #f5f7ef;
  --price-neon: #d4fb0a;
}

body.pricing-page {
  margin: 0;
  overflow-x: clip;
  color: var(--price-ink);
  background: #f8faf4;
}

.pricing-shell { width: min(1180px, calc(100% - 32px)); margin-inline: auto; }

.pricing-header {
  position: sticky;
  top: 0;
  z-index: 70;
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
  background: rgba(251, 253, 243, 0.9);
  backdrop-filter: blur(18px);
}

.pricing-header-inner {
  min-height: 78px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.pricing-logo { display: inline-flex; align-items: center; }
.pricing-logo img { display: block; width: auto; height: 40px; }
.pricing-logo .light-logo { display: none; }

.pricing-nav { display: flex; align-items: center; gap: 6px; }
.pricing-nav a {
  color: #344054;
  text-decoration: none;
  font-size: 0.78rem;
  font-weight: 800;
  padding: 9px 12px;
  border-radius: 999px;
}
.pricing-nav a:hover,
.pricing-nav a[aria-current="page"] { color: #000; background: rgba(212, 251, 10, 0.7); }

.pricing-actions { display: flex; align-items: center; gap: 10px; }
.pricing-login,
.pricing-signup {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0 17px;
  border-radius: 999px;
  text-decoration: none;
  font-size: 0.76rem;
  font-weight: 900;
}
.pricing-login { color: #344054; border: 1px solid #d0d5dd; background: #fff; }
.pricing-signup { color: #fff; background: #090b0e; box-shadow: 0 10px 24px rgba(9, 11, 14, 0.16); }

.pricing-mobile-nav { display: none; position: relative; }
.pricing-mobile-nav summary {
  list-style: none;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  cursor: pointer;
  border-radius: 12px;
  color: #fff;
  background: #090b0e;
}
.pricing-mobile-nav summary::-webkit-details-marker { display: none; }
.pricing-mobile-panel {
  position: absolute;
  top: 52px;
  inset-inline-end: 0;
  width: 250px;
  padding: 12px;
  border: 1px solid #d0d5dd;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 20px 50px rgba(15, 23, 42, 0.18);
}
.pricing-mobile-panel a { display: block; padding: 11px; border-radius: 10px; color: #1d2939; text-decoration: none; font-size: .82rem; font-weight: 800; }
.pricing-mobile-panel a:hover { background: #f2f4f7; }

.pricing-hero {
  position: relative;
  overflow: hidden;
  padding: 176px 0 64px;
  color: #090b0e;
  background-color: var(--price-neon);
  background-image: none;
}
.pricing-hero::before {
  content: "";
  position: absolute;
  width: 520px;
  height: 520px;
  inset-inline-start: -210px;
  bottom: -350px;
  border-radius: 50%;
  display: none;
}
.pricing-hero-content { position: relative; text-align: center; max-width: 860px; }
.pricing-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 0 15px;
  border: 1px solid rgba(9, 11, 14, 0.8);
  border-radius: 999px;
  color: var(--price-neon);
  background: #090b0e;
  font-size: 0.76rem;
  font-weight: 900;
}
.pricing-kicker-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--price-neon); box-shadow: 0 0 0 4px rgba(212,251,10,.16); }
.pricing-hero h1 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(12px, 1.5vw, 22px);
  margin: 38px 0 30px;
  font-size: clamp(2.5rem, 6vw, 5rem);
  line-height: 1.24;
  font-weight: 950;
  letter-spacing: -0.04em;
}
.pricing-title-main { display: block; }
.pricing-title-highlight { display: block; padding: .02em .2em .1em; border-radius: .18em; color: var(--price-neon); background: #090b0e; transform: rotate(-1deg); }
.pricing-hero p { margin: 0 auto; max-width: 720px; color: #29313d; font-size: clamp(1rem, 2vw, 1.18rem); line-height: 2.15; font-weight: 700; }
.pricing-trust-row { margin-top: 38px; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.pricing-trust-row span { padding: 8px 12px; border-radius: 999px; color: #111827; background: rgba(255,255,255,.48); border: 1px solid rgba(9,11,14,.12); box-shadow: 0 8px 20px rgba(9,11,14,.05); font-size: .72rem; font-weight: 900; }

.pricing-plans {
  position: relative;
  z-index: 5;
  margin-top: 0;
  padding: 44px 0 85px;
  background: #f8faf4;
}
.pricing-control-card {
  position: relative;
  z-index: 20;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
  gap: 32px;
  padding: 0;
  margin-bottom: 22px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.country-selector-wrapper { position: relative; grid-column: 1; grid-row: 1; justify-self: start; }
#countryDropdownBtn {
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 0 16px;
  border: 1px solid #344054;
  border-radius: 999px;
  color: #fff;
  background: #171b22;
  cursor: pointer;
  font: inherit;
  font-size: .76rem;
  font-weight: 900;
}
#selectedCountryCurrency { color: var(--price-neon); font-size: .68rem; }
.dropdown-chevron { transition: transform .2s ease; }
#countryDropdownMenu {
  position: absolute;
  top: calc(100% + 10px);
  inset-inline-start: 0;
  width: min(310px, calc(100vw - 48px));
  max-height: 340px;
  overflow-y: auto;
  padding: 8px;
  border: 1px solid #344054;
  border-radius: 17px;
  color: #fff;
  background: #090b0e;
  box-shadow: 0 24px 60px rgba(0,0,0,.35);
  scrollbar-width: thin;
  scrollbar-color: var(--price-neon) #171b22;
  scrollbar-gutter: stable;
}
#countryDropdownMenu::-webkit-scrollbar { width: 10px; }
#countryDropdownMenu::-webkit-scrollbar-track { margin-block: 12px; border-radius: 999px; background: #171b22; }
#countryDropdownMenu::-webkit-scrollbar-thumb { border: 2px solid #171b22; border-radius: 999px; background: var(--price-neon); }
#countryDropdownMenu::-webkit-scrollbar-thumb:hover { background: #e3ff4d; }
.country-menu-label { padding: 9px 10px 12px; color: #98a2b3; font-size: .68rem; font-weight: 800; border-bottom: 1px solid #1f2937; }
.country-option {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 15px;
  padding: 11px 10px;
  border: 0;
  border-radius: 11px;
  color: #fff;
  background: transparent;
  cursor: pointer;
  font: inherit;
  font-size: .74rem;
}
.country-option:hover { color: var(--price-neon); background: #171b22; }
.country-option-main { display: inline-flex; align-items: center; gap: 8px; font-weight: 900; }
.country-option-currency { color: #98a2b3; font-size: .68rem; font-weight: 800; }

.billing-switch { grid-column: 2; grid-row: 1; justify-self: end; display: inline-flex; align-items: center; gap: 4px; padding: 5px; border: 1px solid #344054; border-radius: 999px; background: #171b22; box-shadow: 0 14px 32px rgba(9,11,14,.16); }
.billing-switch button { min-height: 38px; padding: 0 16px; border: 0; border-radius: 999px; cursor: pointer; font: inherit; font-size: .72rem; font-weight: 900; }
.billing-switch .pricing-btn-active { color: #000; background: var(--price-neon); }
.billing-switch .pricing-btn-inactive { color: #cbd5e1; background: transparent; }
.pricing-page .billing-switch .pricing-btn-inactive:hover { color: #fff !important; }
.pricing-page .billing-switch .pricing-btn-inactive:hover .billing-discount { color: #fff !important; }
.pricing-page .billing-switch .pricing-btn-active:hover { color: #000 !important; }
.pricing-page .billing-switch .pricing-btn-active:hover .billing-discount { color: var(--price-neon) !important; }
.billing-discount { margin-inline-start: 5px; padding: 3px 6px; color: var(--price-neon); background: #090b0e; border-radius: 999px; font-size: .58rem; }

.pricing-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; align-items: stretch; }
.plan-guide-card {
  position: relative;
  overflow: hidden;
  min-height: 590px;
  display: flex;
  flex-direction: column;
  padding: 30px 25px;
  border: 1px solid #cbd3ba;
  border-radius: 30px;
  background: linear-gradient(155deg, #f7fadf 0%, #fff 58%);
  box-shadow: 0 20px 55px rgba(15, 23, 42, .08);
}
.plan-guide-card::after { content: ""; position: absolute; width: 180px; height: 180px; inset-inline-end: -85px; bottom: -95px; border-radius: 50%; background: rgba(212,251,10,.55); filter: blur(30px); }
.plan-guide-icon { position: relative; z-index: 1; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 14px; color: var(--price-neon); background: #090b0e; box-shadow: 0 12px 25px rgba(9,11,14,.18); }
.plan-guide-eyebrow { position: relative; z-index: 1; margin-top: 24px; color: #08775c; font-size: .7rem; font-weight: 950; }
.plan-guide-card h2 { position: relative; z-index: 1; margin: 8px 0 0; font-size: 1.6rem; line-height: 1.35; font-weight: 950; }
.plan-guide-card > p { position: relative; z-index: 1; margin: 15px 0 0; color: #667085; font-size: .78rem; line-height: 1.9; font-weight: 650; }
.plan-guide-stat { position: relative; z-index: 1; margin-top: 23px; padding: 15px; border: 1px solid rgba(9,11,14,.09); border-radius: 17px; background: rgba(255,255,255,.72); }
.plan-guide-stat strong { display: block; font-size: 1.55rem; line-height: 1; font-weight: 950; }
.plan-guide-stat span { display: block; margin-top: 7px; color: #667085; font-size: .65rem; line-height: 1.6; font-weight: 750; }
.plan-guide-card ul { position: relative; z-index: 1; list-style: none; display: grid; gap: 11px; padding: 0; margin: 24px 0; }
.plan-guide-card li { display: flex; align-items: center; gap: 9px; color: #344054; font-size: .72rem; font-weight: 850; }
.plan-guide-card li span { width: 25px; height: 25px; display: grid; place-items: center; border: 1px solid #d0d5dd; border-radius: 50%; color: #667085; background: #fff; font-size: .58rem; }
.plan-guide-card > a { position: relative; z-index: 1; margin-top: auto; color: #101828; font-size: .7rem; font-weight: 950; text-underline-offset: 4px; }
.plan-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 590px;
  padding: 30px;
  border: 1px solid var(--price-line);
  border-radius: 30px;
  background: #fff;
  box-shadow: 0 20px 60px rgba(15, 23, 42, .1);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.plan-card::after { content: ""; position: absolute; top: 0; inset-inline: 30px; height: 4px; border-radius: 0 0 999px 999px; background: #090b0e; }
.plan-card:hover { transform: translateY(-7px); border-color: #b6c77b; box-shadow: 0 28px 75px rgba(15, 23, 42, .15); }
.plan-card-featured { color: #fff; border-color: #222831; background: #090b0e; box-shadow: 0 26px 75px rgba(9, 11, 14, .25); transform: translateY(-10px); }
.plan-card-featured:hover { transform: translateY(-16px); }
.plan-card-featured::after { background: var(--price-neon); }
.plan-card-featured::before { content: ""; position: absolute; width: 210px; height: 210px; top: -100px; inset-inline-end: -80px; border-radius: 50%; background: rgba(212,251,10,.22); filter: blur(55px); }
.plan-top { position: relative; display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; }
.plan-eyebrow { color: #08775c; font-size: .72rem; font-weight: 900; }
.plan-card-featured .plan-eyebrow { color: var(--price-neon); }
.plan-card h2 { margin: 7px 0 0; font-size: 1.75rem; font-weight: 950; }
.plan-badge { padding: 7px 10px; border-radius: 999px; color: #090b0e; background: var(--price-neon); box-shadow: 0 8px 20px rgba(178, 211, 0, .24); font-size: .64rem; font-weight: 900; }
.plan-card-featured .plan-badge { color: var(--price-neon); background: rgba(212,251,10,.1); border: 1px solid rgba(212,251,10,.2); }
.plan-price { position: relative; display: flex; align-items: flex-end; gap: 9px; margin-top: 30px; }
.price-val { font-size: clamp(3.4rem, 7vw, 5.2rem); line-height: .92; font-weight: 950; letter-spacing: -.05em; }
.price-period { padding-bottom: 7px; color: #667085; font-size: .82rem; font-weight: 800; }
.plan-card-featured .price-period { color: #98a2b3; }
.plan-saving { margin: 12px 0 0; color: #08775c; font-size: .72rem; font-weight: 900; }
.plan-card-featured .plan-saving { color: var(--price-neon); }
.plan-description { min-height: 55px; margin: 20px 0 0; color: #667085; font-size: .85rem; line-height: 1.9; font-weight: 600; }
.plan-card-featured .plan-description { color: #b8c0cc; }
.plan-features { list-style: none; padding: 22px 0 0; margin: 22px 0 28px; border-top: 1px solid #eaecf0; display: grid; gap: 13px; }
.plan-card-featured .plan-features { border-color: #252b34; }
.plan-features li { display: flex; gap: 10px; align-items: flex-start; color: #344054; font-size: .79rem; line-height: 1.7; font-weight: 700; }
.plan-card-featured .plan-features li { color: #d0d5dd; }
.plan-check { flex: 0 0 auto; width: 21px; height: 21px; display: grid; place-items: center; margin-top: 2px; border-radius: 50%; color: #035c46; background: #dff7ee; }
.plan-card-featured .plan-check { color: #000; background: var(--price-neon); }
.plan-cta { margin-top: auto; min-height: 50px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; color: #fff; background: #090b0e; text-decoration: none; font-size: .8rem; font-weight: 950; }
.plan-card-featured .plan-cta { color: #000; background: var(--price-neon); }
.plan-footnote { margin: 12px 0 0; text-align: center; color: #98a2b3; font-size: .65rem; font-weight: 700; }

.pricing-assurance { margin-top: 22px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.pricing-assurance article { padding: 18px; border: 1px solid var(--price-line); border-radius: 18px; background: rgba(255,255,255,.78); }
.pricing-assurance strong { display: block; font-size: .8rem; }
.pricing-assurance span { display: block; margin-top: 5px; color: var(--price-muted); font-size: .7rem; line-height: 1.6; }

.pricing-compare { padding: 100px 0; background: #fff; }
.section-heading { max-width: 720px; margin: 0 auto 36px; text-align: center; }
.section-heading span { color: #08775c; font-size: .74rem; font-weight: 950; }
.section-heading h2 { margin: 10px 0 12px; font-size: clamp(2rem, 4vw, 3.2rem); line-height: 1.2; font-weight: 950; }
.section-heading p { margin: 0; color: var(--price-muted); line-height: 1.9; font-size: .9rem; font-weight: 600; }
.comparison-mobile-plan-key { display: none; }
.comparison-wrap { overflow-x: auto; border: 1px solid var(--price-line); border-radius: 28px; background: #fff; box-shadow: 0 24px 70px rgba(15,23,42,.08); }
.comparison-table { width: 100%; min-width: 880px; border-collapse: separate; border-spacing: 0; table-layout: fixed; }
.comparison-table th,
.comparison-table td { padding: 18px 22px; border-bottom: 1px solid #eaecf0; text-align: center; vertical-align: middle; font-size: .76rem; }
.comparison-table tbody td { text-align: start; }
.comparison-table thead th { position: sticky; top: 0; z-index: 4; height: 132px; color: #101828; background: #f8faf5; box-shadow: inset 0 -1px #dde2d1; }
.comparison-table thead th:first-child { border-start-start-radius: 27px; }
.comparison-table thead th:last-child { border-start-end-radius: 27px; }
.comparison-table thead th:first-child { width: 38%; padding-inline: 28px; text-align: start; }
.comparison-table thead th:nth-child(2),
.comparison-table tbody td:nth-child(2) { width: 31%; background: #fcfdf9; }
.comparison-table thead th:nth-child(2) { background: #fbffe8; box-shadow: inset 0 6px 0 var(--price-neon), inset 0 -1px #dde2d1; }
.comparison-table thead th:nth-child(2),
.comparison-table thead th:nth-child(3) { text-align: start; }
.comparison-table thead th:nth-child(3) { width: 31%; color: #fff; background: #090b0e; }
.comparison-table tbody td:nth-child(3) { background: rgba(212,251,10,.055); }
.comparison-head-label { display: block; color: #101828 !important; font-size: 1rem !important; font-weight: 950; }
.comparison-table thead th:first-child small { display: block; margin-top: 8px; color: #667085; font-size: .67rem; font-weight: 700; }
.comparison-plan-head { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; text-align: start; }
.comparison-plan-head > span { color: inherit; font-size: 1.15rem; font-weight: 950; }
.comparison-plan-head small { color: #667085; font-size: .65rem; font-weight: 750; }
.comparison-enterprise-head small { color: #98a2b3; }
.comparison-plan-head a { margin-top: 5px; min-height: 32px; display: inline-flex; align-items: center; justify-content: center; padding: 0 14px; border-radius: 999px; color: #fff; background: #090b0e; text-decoration: none; font-size: .62rem; font-weight: 950; }
.comparison-enterprise-head a { color: #000; background: var(--price-neon); }
.comparison-table tbody th[scope="row"] { display: flex; align-items: center; gap: 12px; padding: 18px 28px; border-bottom: 1px solid #eaecf0; text-align: start; color: #101828; background: #fff; }
.comparison-table tbody th[scope="row"] > span:last-child { min-width: 0; }
.comparison-table tbody th strong { display: block; font-size: .78rem; line-height: 1.55; font-weight: 900; }
.comparison-table tbody th small { display: block; margin-top: 3px; color: #98a2b3; font-size: .61rem; line-height: 1.55; font-weight: 650; }
.comparison-feature-icon { flex: 0 0 auto; width: 36px; height: 36px; display: grid; place-items: center; border: 1px solid #e1e6d8; border-radius: 11px; color: #08775c; background: #f6f9ee; }
.comparison-feature-icon svg { width: 17px; height: 17px; }
.comparison-value { width: 100%; display: inline-flex; align-items: center; justify-content: flex-start; gap: 8px; max-width: none; color: #344054; line-height: 1.65; text-align: start; font-weight: 800; }
.comparison-value svg { flex: 0 0 auto; width: 20px; height: 20px; padding: 4px; border-radius: 50%; color: #035c46; background: #dff7ee; stroke-width: 3; }
.comparison-value.featured { color: #101828; font-weight: 900; }
.comparison-value.featured svg { color: #000; background: var(--price-neon); }
.comparison-unavailable { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; color: #98a2b3; background: #f2f4f7; font-size: 1rem; font-weight: 900; }
.comparison-table tbody tr:hover th[scope="row"] { background: #fbfdef; }
.comparison-table tbody tr:hover td:nth-child(3) { background: rgba(212,251,10,.11); }
.comparison-table tbody tr:last-child th,
.comparison-table tbody tr:last-child td { border-bottom: 0; }
.comparison-table tbody tr:last-child > :first-child { border-end-start-radius: 27px; }
.comparison-table tbody tr:last-child > :last-child { border-end-end-radius: 27px; }

@media (min-width: 960px) {
  .comparison-wrap { overflow: visible; }
  .comparison-table thead th { top: 88px; z-index: 12; }
}

.pricing-faq { padding: 85px 0; background: #f8faf4; }
.faq-grid { max-width: 860px; margin: 0 auto; display: grid; gap: 12px; }
.faq-grid details { border: 1px solid var(--price-line); border-radius: 18px; background: #fff; overflow: hidden; }
.faq-grid summary { cursor: pointer; padding: 20px 22px; font-size: .86rem; font-weight: 900; }
.faq-grid p { margin: 0; padding: 0 22px 21px; color: var(--price-muted); font-size: .78rem; line-height: 1.9; }

.pricing-final { padding: 80px 0; color: #fff; background: #f8faf4; }
.pricing-final-card { display: flex; align-items: center; justify-content: space-between; gap: 30px; padding: 40px; border: 1px solid #090b0e; border-radius: 28px; background: #090b0e; }
.pricing-final h2 { margin: 0; font-size: clamp(1.8rem, 4vw, 3rem); font-weight: 950; }
.pricing-final p { margin: 10px 0 0; color: #b8c0cc; font-size: .85rem; line-height: 1.8; }
.pricing-final-actions { flex: 0 0 auto; display: flex; gap: 10px; }
.pricing-final-actions a { width: 170px; min-height: 52px; display: inline-flex; align-items: center; justify-content: center; padding: 0 22px; border-radius: 999px; text-decoration: none; font-size: .76rem; font-weight: 950; }
.final-primary { color: #000; background: var(--price-neon); }
.final-secondary { color: #fff; border: 1px solid #344054; background: #171b22; }

.pricing-footer { padding: 28px 0; border-top: 1px solid #1f2937; color: #98a2b3; background: #090b0e; }
.pricing-footer-inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; font-size: .7rem; }
.pricing-footer-links { display: flex; flex-wrap: wrap; gap: 15px; }
.pricing-footer a { color: #cbd5e1; text-decoration: none; font-weight: 800; }

body.dark-mode.pricing-page { color: #f8fafc; background: #090b0e !important; }
body.dark-mode .pricing-header { border-color: #222831; background: rgba(9,11,14,.9); }
body.dark-mode .pricing-logo .dark-logo { display: none; }
body.dark-mode .pricing-logo .light-logo { display: block; }
body.dark-mode .pricing-nav a { color: #cbd5e1; }
body.dark-mode .pricing-login { color: #fff; border-color: #344054; background: #171b22; }
body.dark-mode .pricing-signup { color: #000; background: var(--price-neon); }
body.dark-mode .pricing-hero {
  color: #fff;
  background-color: #090b0e;
  background-image: none;
}
body.dark-mode .pricing-hero::before { display: none; }
body.dark-mode .pricing-kicker { color: var(--price-neon); border-color: rgba(212,251,10,.32); background: rgba(212,251,10,.08); }
body.dark-mode .pricing-title-highlight { color: var(--price-neon); background: rgba(212,251,10,.07); box-shadow: inset 0 0 0 1px rgba(212,251,10,.18); }
body.dark-mode .pricing-hero p { color: #b8c0cc; }
body.dark-mode .pricing-hero .annual-saving-highlight { color: var(--price-neon); }
body.dark-mode .pricing-trust-row span { color: #e5e7eb; border-color: rgba(255,255,255,.09); background: rgba(255,255,255,.06); box-shadow: none; }
body.dark-mode .pricing-plans {
  background-color: #090b0e;
  background-image: none;
}
body.dark-mode .pricing-final { background: #090b0e; }
body.dark-mode .pricing-compare,
body.dark-mode .pricing-faq { background: #090b0e; }
body.dark-mode .section-heading h2 { color: #f8fafc; }
body.dark-mode .plan-card,
body.dark-mode .pricing-assurance article,
body.dark-mode .faq-grid details { color: #f8fafc; border-color: #29303a; background: #121720; }
body.dark-mode .plan-card.plan-card-featured { border-color: rgba(212,251,10,.3); background: #090b0e; box-shadow: 0 28px 80px rgba(0,0,0,.38); }
body.dark-mode .plan-guide-card { color: #f8fafc; border-color: #29303a; background: linear-gradient(155deg, #171d24, #0f141c); }
body.dark-mode .plan-guide-card > p,
body.dark-mode .plan-guide-stat span { color: #98a2b3; }
body.dark-mode .plan-guide-stat { border-color: #29303a; background: rgba(255,255,255,.035); }
body.dark-mode .plan-guide-card li { color: #d0d5dd; }
body.dark-mode .plan-guide-card li span { color: #98a2b3; border-color: #344054; background: #171b22; }
body.dark-mode .plan-guide-card > a { color: var(--price-neon); }
body.dark-mode .plan-card:not(.plan-card-featured) .price-period,
body.dark-mode .plan-card:not(.plan-card-featured) .plan-description,
body.dark-mode .faq-grid p { color: #98a2b3; }
body.dark-mode .plan-card:not(.plan-card-featured) .plan-features { border-color: #29303a; }
body.dark-mode .plan-card:not(.plan-card-featured) .plan-features li { color: #d0d5dd; }
body.dark-mode .plan-card:not(.plan-card-featured)::after { background: var(--price-neon); }
body.dark-mode .plan-card:not(.plan-card-featured) .plan-eyebrow { color: #fff; }
body.dark-mode .plan-card:not(.plan-card-featured) .plan-saving { color: var(--price-neon); }
body.dark-mode .plan-card:not(.plan-card-featured) .plan-cta { color: #090b0e; background: #fff; }
body.dark-mode .plan-card:not(.plan-card-featured) .plan-cta:hover { color: #090b0e; background: var(--price-neon); }
body.dark-mode .comparison-wrap { border-color: #29303a; background: #121720; }
body.dark-mode .comparison-table thead th { color: #f8fafc; background: #171b22; box-shadow: inset 0 -1px #29303a; }
body.dark-mode .comparison-table thead th:nth-child(2) { background: #171b22; box-shadow: inset 0 6px 0 var(--price-neon), inset 0 -1px #29303a; }
body.dark-mode .comparison-table thead th:nth-child(3) { background: #090b0e; }
body.dark-mode .comparison-head-label { color: #f8fafc !important; }
body.dark-mode .comparison-table thead th:first-child small,
body.dark-mode .comparison-plan-head small { color: #98a2b3; }
body.dark-mode .comparison-table tbody th[scope="row"] { color: #f8fafc; border-color: #29303a; background: #121720; }
body.dark-mode .comparison-table tbody td { color: #d0d5dd; border-color: #29303a; background: #121720; }
body.dark-mode .comparison-table tbody td:nth-child(2) { background: #141a23; }
body.dark-mode .comparison-table tbody td:nth-child(3) { background: rgba(212,251,10,.045); }
body.dark-mode .comparison-feature-icon { color: var(--price-neon); border-color: #344054; background: #171b22; }
body.dark-mode .comparison-value,
body.dark-mode .comparison-value.featured { color: #e5e7eb; }
body.dark-mode .comparison-unavailable { color: #667085; background: #1d2530; }
body.dark-mode .comparison-table tbody tr:hover th[scope="row"] { background: #171d25; }
body.dark-mode .comparison-table tbody tr:hover td:nth-child(3) { background: rgba(212,251,10,.08); }

@media (max-width: 1050px) {
  .pricing-control-card { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pricing-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .plan-guide-card { grid-column: 1 / -1; min-height: auto; }
}

@media (max-width: 850px) {
  .pricing-nav,
  .pricing-actions .pricing-login { display: none; }
  .pricing-mobile-nav { display: block; }
  .pricing-hero { padding-top: 150px; }
  .pricing-control-card { grid-template-columns: 1fr; align-items: stretch; gap: 14px; }
  .country-selector-wrapper,
  .billing-switch { grid-column: auto; grid-row: auto; justify-self: stretch; }
  #countryDropdownBtn { width: 100%; justify-content: center; }
  #countryDropdownMenu { inset-inline: 0; width: 100%; }
  .billing-switch { width: 100%; }
  .billing-switch button { flex: 1; }
  .pricing-grid { grid-template-columns: 1fr; gap: 24px; }
  .plan-guide-card { grid-column: auto; }
  .pricing-assurance { grid-template-columns: 1fr; }
  .pricing-final-card { align-items: stretch; flex-direction: column; }
  .pricing-final-actions { flex-direction: column; }
  .pricing-final-actions a { width: 100%; }
}

@media (max-width: 760px) {
  .pricing-compare { padding: 72px 0; }
  .comparison-mobile-plan-key { display: flex; justify-content: center; gap: 9px; margin: -12px 0 20px; }
  .comparison-mobile-plan-key span { display: inline-flex; align-items: center; gap: 9px; padding: 9px 15px; border: 1px solid var(--price-line); border-radius: 999px; color: #344054; background: #fff; font-size: .9rem; font-weight: 950; }
  .comparison-mobile-plan-key b { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: #090b0e; font-size: .78rem; }
  .comparison-mobile-plan-key span:last-child b { color: #000; background: var(--price-neon); }
  .comparison-wrap { overflow: visible; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
  .comparison-table,
  .comparison-table tbody { display: block; width: 100%; min-width: 0; }
  .comparison-table thead { display: none; }
  .comparison-table tbody tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 12px; overflow: hidden; border: 1px solid var(--price-line); border-radius: 18px; background: #fff; box-shadow: 0 12px 30px rgba(15,23,42,.055); }
  .comparison-table tbody th[scope="row"] { grid-column: 1 / -1; padding: 15px 16px; border-bottom: 1px solid #eaecf0; background: #f8faf5; }
  .comparison-feature-icon { width: 34px; height: 34px; }
  .comparison-table td { position: relative; min-height: 92px; display: flex; align-items: center; justify-content: flex-start; padding: 38px 11px 14px; border: 0; text-align: start; background: #fff !important; }
  .comparison-table tbody td:nth-child(2),
  .comparison-table tbody td:nth-child(3) { width: auto; }
  .comparison-table td + td { border-inline-start: 1px solid #eaecf0; }
  .comparison-table td::before { content: attr(data-label); position: absolute; top: 11px; inset-inline: 11px; padding-bottom: 7px; border-bottom: 1px solid #f0f2eb; color: #667085; font-size: .8rem; font-weight: 950; text-align: start; }
  .comparison-table td:nth-child(3)::before { color: #4f5e00; }
  .comparison-value { flex-direction: row; justify-content: flex-start; gap: 6px; font-size: .66rem; text-align: start; }
  .comparison-value svg { width: 19px; height: 19px; }
  body.dark-mode .comparison-mobile-plan-key span { color: #d0d5dd; border-color: #29303a; background: #121720; }
  body.dark-mode .comparison-table tbody tr { border-color: #29303a; background: #121720; box-shadow: none; }
  body.dark-mode .comparison-table tbody th[scope="row"] { border-color: #29303a; background: #171b22; }
  body.dark-mode .comparison-table td { background: #121720 !important; }
  body.dark-mode .comparison-table td + td { border-color: #29303a; }
  body.dark-mode .comparison-table td::before { border-color: #29303a; color: #98a2b3; }
  body.dark-mode .comparison-table td:nth-child(3)::before { color: var(--price-neon); }
}

@media (max-width: 560px) {
  .pricing-shell { width: min(100% - 22px, 1180px); }
  .pricing-header-inner { min-height: 68px; }
  .pricing-logo img { width: auto; height: 34px; }
  .pricing-actions .pricing-signup { display: none; }
  .pricing-hero { padding: 144px 0 64px; }
  .pricing-hero h1 { gap: 16px; margin: 30px 0 24px; line-height: 1.3; }
  .pricing-hero p { line-height: 2; }
  .pricing-trust-row { margin-top: 30px; }
  .plan-card,
  .plan-guide-card { padding: 25px; min-height: auto; }
  .plan-card-featured,
  .plan-card-featured:hover { transform: none; }
  .pricing-plans { padding: 30px 0 60px; }
  .pricing-control-card { padding: 0; }
  .pricing-final-card { padding: 28px 22px; }
  .pricing-footer-inner { align-items: flex-start; flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* Annual saving line ------------------------------------------------------
   The plans no longer share one discount — Business is 10% off its 600 KWD
   list price, Enterprise 27% off 900 — so each card shows the price it is
   actually being measured against instead of a flat "20%" claim. The struck
   figure and the note are hidden on monthly billing, where nothing is being
   discounted; main.js toggles them with [hidden]. */
.plan-saving { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; }
.plan-saving [hidden] { display: none; }
.plan-list-price { opacity: .62; font-weight: 700; text-decoration-thickness: 1.5px; }
.plan-saving-pct {
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(8, 119, 92, .12);
  color: inherit;
}
.plan-card-featured .plan-saving-pct { background: rgba(212, 251, 10, .16); }
.plan-saving-note { opacity: .7; font-weight: 700; }
body.dark-mode .plan-card:not(.plan-card-featured) .plan-saving-pct { background: rgba(212, 251, 10, .16); }

/* Billing notice -----------------------------------------------------------
   Saudi, UAE and Egypt are priced well below the other markets, and the country
   list is open to everyone — so the page has to say plainly that picking a
   country changes the currency shown, not the price you get.

   It sits between .pricing-control-card and .pricing-grid rather than inside
   the control card: that card is a two-column grid, so a child there dropped
   into one cell of a second row and the line came out squeezed against one
   edge. As a sibling it spans the same width as the two plan cards below. */
.pricing-billing-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  margin: 0 0 22px;
  padding: 14px 18px;
  border: 1px solid var(--price-line);
  border-radius: 18px;
  background: rgba(255, 255, 255, .78);
  color: var(--price-muted);
  font-size: .74rem;
  font-weight: 700;
  line-height: 1.75;
  text-align: start;
}
.pricing-billing-note i,
.pricing-billing-note svg { flex: 0 0 auto; margin-top: 4px; opacity: .8; }
.pricing-billing-note span { flex: 1 1 auto; }
.country-menu-note {
  margin: 6px 0 0;
  padding: 9px 12px 2px;
  border-top: 1px solid rgba(148, 163, 184, .28);
  color: #64748b;
  font-size: .68rem;
  font-weight: 700;
  line-height: 1.6;
}
body.dark-mode .pricing-billing-note {
  color: #94a3b8;
  background: rgba(255, 255, 255, .04);
  border-color: rgba(148, 163, 184, .22);
}
body.dark-mode .country-menu-note { color: #94a3b8; border-top-color: rgba(148, 163, 184, .2); }

/* Feature tooltips ---------------------------------------------------------
   A feature name sells nothing on its own — "Flow+" means nothing to a clinic
   owner until you say what it does. Each row carries an (i) that explains it.

   Built on a real <button> rather than a hoverable <span>: a button is reachable
   by keyboard, is announced by screen readers, and — the reason that matters
   most here — receives focus on a tap, so the tooltip works on phones without
   any JS. The bubble is a ::after on the button, so there is no extra markup
   per row across 32 rows. */
.ft-tip {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.15rem;
  height: 1.15rem;
  margin-inline-start: 0;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--price-muted);
  cursor: help;
  vertical-align: middle;
  opacity: .65;
  transition: opacity .15s, color .15s;
}
.ft-tip i, .ft-tip svg { width: 1rem; height: 1rem; }
.ft-tip:hover, .ft-tip:focus-visible { opacity: 1; color: #0f172a; }
.ft-tip:focus-visible { outline: 2px solid var(--price-neon); outline-offset: 2px; }

.ft-tip::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 10px);
  inset-inline-start: 50%;
  /* Centred on the button. inset-inline-start is the part that flips — it means
     `right` under RTL and `left` under LTR — so the translate has to be +50% in
     RTL and -50% in LTR. translateX itself is not direction-aware. */
  transform: translateX(var(--ft-shift, 50%)) scale(.96);
  width: max-content;
  max-width: min(21rem, 78vw);
  padding: 10px 13px;
  border-radius: 12px;
  background: #0f172a;
  color: #f1f5f9;
  font-size: .72rem;
  font-weight: 600;
  line-height: 1.75;
  text-align: start;
  white-space: normal;
  box-shadow: 0 14px 40px rgba(2, 6, 23, .3);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .16s ease, transform .16s ease, visibility .16s;
  z-index: 40;
}
[dir="ltr"] .ft-tip::after { --ft-shift: -50%; }
.ft-tip:hover::after,
.ft-tip:focus::after,
.ft-tip:focus-visible::after {
  opacity: 1;
  visibility: visible;
  transform: translateX(var(--ft-shift, 50%)) scale(1);
}
/* Rows near the table edge would push the bubble off-screen; JS tags them. */
.ft-tip.ft-start::after { inset-inline-start: 0; --ft-shift: 0; }
[dir="ltr"] .ft-tip.ft-start::after { --ft-shift: 0; }

/* Group headings inside the comparison table. */
.cmp-group td {
  padding: 22px 18px 8px;
  border: 0;
  color: var(--price-muted);
  font-size: .68rem;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.comparison-table .cmp-group:first-child td { padding-top: 6px; }

body.dark-mode .ft-tip:hover, body.dark-mode .ft-tip:focus-visible { color: #f1f5f9; }
body.dark-mode .ft-tip::after { background: #1e293b; box-shadow: 0 14px 40px rgba(0, 0, 0, .55); }

@media (prefers-reduced-motion: reduce) {
  .ft-tip::after { transition: none; }
}


/* Stacked-card rows clip the tooltip (they take overflow:hidden to round their
   corners). main.js tags the row while its tooltip is open so the bubble can
   escape, and only then. */
.comparison-table tr.ft-row-open { overflow: visible; position: relative; z-index: 30; }

/* On a phone there is no good spot to hang a bubble off a small icon: anchoring
   it to the button's start edge still runs off-screen when the button sits near
   the opposite edge. Below 860px the explanation becomes a bar pinned to the
   viewport instead, which always fits and cannot be clipped by anything. */
@media (max-width: 860px) {
  .ft-tip::after,
  .ft-tip.ft-start::after {
    position: fixed;
    /* Clears the floating chat button, which otherwise sits on the last line. */
    inset: auto 16px 92px 16px;
    width: auto;
    max-width: none;
    transform: translateY(6px);
    font-size: .76rem;
    z-index: 200;
  }
  .ft-tip:hover::after,
  .ft-tip:focus::after,
  .ft-tip:focus-visible::after { transform: translateY(0); }
}

/* Competitor comparison ----------------------------------------------------
   Two panels, one per axis of growth. Each row is a bar pair, because the point
   is the gap widening — a column of numbers makes the reader do that work, and
   at the smallest size it reads as "marginally cheaper", which sells nothing.

   Bar widths are inline percentages of the largest figure in that panel, so the
   two panels are each internally to scale but not to each other (their ceilings
   differ). Figures are dated in the section lead; rivals reprice. */
.pricing-rivals { padding: 6px 0 0; }

.scenario-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.scenario {
  padding: 24px;
  border: 1px solid var(--price-line);
  border-radius: 24px;
  background: var(--price-surface);
}
.scenario header h3 { margin: 0; font-size: 1.02rem; font-weight: 950; }
.scenario header p { margin: 6px 0 0; color: var(--price-muted); font-size: .76rem; font-weight: 700; line-height: 1.75; }

.sc-key { display: flex; gap: 14px; margin: 18px 0 14px; }
.sc-k { display: inline-flex; align-items: center; gap: 7px; color: var(--price-muted); font-size: .7rem; font-weight: 900; }
.sc-k::before { content: ""; width: 11px; height: 11px; border-radius: 4px; }
.sc-k-ours::before { background: var(--price-neon); }
.sc-k-them::before { background: #cbd5e1; }

.sc-rows { display: grid; gap: 16px; }
.sc-label { display: block; margin-bottom: 8px; font-size: .78rem; font-weight: 900; }
.sc-bars { display: grid; gap: 6px; }
/* The bar gets its own track so its percentage resolves against the space left
   over, not against a box that also holds the figure — otherwise the longest
   bar pushes its own number out of the panel. */
/* Three columns: the track, the amount, and the multiple badge when there is
   one. Two columns made the badge wrap onto its own row as a full-width bar. */
.sc-bar { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 9px; }
.sc-track { display: block; min-width: 0; }
/* The bar is an <i> and the amount stays real text, so it survives zoom and is
   read out in order by a screen reader. */
.sc-track i {
  display: block;
  height: 26px;
  min-width: 4px;
  border-radius: 7px;
}
.sc-ours .sc-track i { background: var(--price-neon); }
.sc-them .sc-track i { background: #e2e8f0; }
.sc-bar b { font-size: .8rem; font-weight: 900; white-space: nowrap; }
.sc-them b { color: var(--price-muted); }
.sc-mult {
  margin-inline-start: 0;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(220, 38, 38, .1);
  color: #b91c1c;
  font-size: .68rem;
  font-weight: 900;
  white-space: nowrap;
}
.scenario footer {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--price-line);
  color: var(--price-muted);
  font-size: .72rem;
  font-weight: 700;
  line-height: 1.8;
}

.rivals-points { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 18px; }
.rivals-points article { padding: 18px; border: 1px solid var(--price-line); border-radius: 18px; background: rgba(255,255,255,.78); }
.rivals-points strong { display: block; font-size: .82rem; }
.rivals-points span { display: block; margin-top: 6px; color: var(--price-muted); font-size: .73rem; line-height: 1.8; }

body.dark-mode .scenario { background: rgba(255,255,255,.04); border-color: rgba(148,163,184,.22); }
body.dark-mode .sc-them .sc-track i { background: rgba(148,163,184,.3); }
body.dark-mode .sc-k-them::before { background: rgba(148,163,184,.5); }
body.dark-mode .sc-mult { background: rgba(248,113,113,.16); color: #fca5a5; }
body.dark-mode .rivals-points article { background: rgba(255,255,255,.04); border-color: rgba(148,163,184,.22); }
body.dark-mode .scenario footer { border-top-color: rgba(148,163,184,.22); }

@media (max-width: 900px) {
  .scenario-grid, .rivals-points { grid-template-columns: 1fr; }
}

/* Seat line and the quoted Enterprise tier ---------------------------------
   Enterprise carries no figure, so its price slot holds a label at a size that
   still anchors the card the way a number would. */
.plan-seats {
  margin: 14px 0 0;
  color: var(--price-muted);
  font-size: .78rem;
  font-weight: 700;
  line-height: 1.8;
}
.plan-seats strong { color: var(--price-ink); font-weight: 900; }
.plan-card-featured .plan-seats { color: #94a3b8; }
.plan-card-featured .plan-seats strong { color: #fff; }
.plan-price-custom { min-height: 74px; align-items: center; }
.plan-custom-label {
  font-size: clamp(1.9rem, 4vw, 2.6rem);
  font-weight: 950;
  letter-spacing: -.03em;
  line-height: 1.1;
}
.plan-card-featured .plan-custom-label { color: var(--price-neon); }
body.dark-mode .plan-seats strong { color: #f1f5f9; }

/* Three plans ----------------------------------------------------------------
   Starter | Business | Enterprise. Business sits in the middle as the featured
   card and the highlighted comparison column. At three across a card is ~330px,
   so the price shrinks and the period may drop under it rather than overflow
   (EGP 17,500 is the widest figure). Below 1050px the cards stack in one
   centred column — two-up would leave Enterprise orphaned on its own row. */
.pricing-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.pricing-grid-3 .plan-card { padding: 28px 26px; }
.pricing-grid-3 .plan-price { flex-wrap: wrap; row-gap: 4px; }
.pricing-grid-3 .price-val { font-size: clamp(2.8rem, 4.4vw, 3.9rem); }
@media (max-width: 1050px) {
  .pricing-grid-3 { grid-template-columns: 1fr; max-width: 620px; margin-inline: auto; }
  .pricing-grid-3 .plan-card-featured,
  .pricing-grid-3 .plan-card-featured:hover { transform: none; }
}

/* Comparison table, four columns --------------------------------------------
   Column 3 is Business: the dark head with the neon stripe and the tinted cells
   (respond.io tints its "most popular" column the same way). Starter and
   Enterprise share the plain light head. The head is sticky from 960px up and
   carries each plan's live price — main.js writes every .price-val — so the
   reader always knows what a column costs while scrolling. */
@media (min-width: 761px) { .comparison-table { min-width: 920px; } }
.comparison-table thead th { height: auto; padding-block: 18px; }
.comparison-table thead th:first-child { width: 31%; }
.comparison-table thead th:nth-child(2),
.comparison-table tbody td:nth-child(2) { width: 23%; background: #fff; }
.comparison-table thead th:nth-child(2) { background: #f8faf5; box-shadow: inset 0 -1px #dde2d1; }
.comparison-table thead th:nth-child(3) { width: 23%; box-shadow: inset 0 6px 0 var(--price-neon), inset 0 -1px #222831; }
.comparison-table thead th:nth-child(4) { width: 23%; text-align: start; }
.comparison-table tbody td:nth-child(3) { background: rgba(212,251,10,.08); }
.comparison-table tbody tr:hover td:nth-child(3) { background: rgba(212,251,10,.14); }
.comparison-plan-head { gap: 4px; }
.cmp-head-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 5px; margin: 0; }
.cmp-head-price b { font-size: 1.3rem; font-weight: 950; letter-spacing: -.02em; line-height: 1.2; }
.cmp-head-price small { color: #667085; font-size: .62rem; font-weight: 800; }
.comparison-business-head .cmp-head-price small { color: #98a2b3; }
.comparison-enterprise-head .cmp-head-price b { font-size: 1.05rem; }
.comparison-plan-head a { color: #fff; background: #090b0e; }
.comparison-business-head a { color: #000; background: var(--price-neon); }

/* Key features / all features. The default view shows the rows marked
   data-key; the switch sits in the sticky head so it is reachable anywhere in
   the table, and a second one under the table serves phones, where the head is
   hidden. Group rows always show — every group holds at least one key row. */
.cmp-view { display: inline-flex; gap: 2px; margin-top: 12px; padding: 3px; border: 1px solid var(--price-line); border-radius: 999px; background: #fff; }
.cmp-view-btn { padding: 6px 13px; border: 0; border-radius: 999px; color: #475467; background: transparent; font: inherit; font-size: .66rem; font-weight: 900; cursor: pointer; }
.cmp-view-btn:hover { color: #101828; }
.cmp-view-btn[aria-pressed="true"] { color: #fff; background: #090b0e; }
.comparison-wrap[data-view="key"] tbody tr:not([data-key]):not(.cmp-group) { display: none !important; }
.cmp-more { display: flex; justify-content: center; margin-top: 20px; }
.cmp-more-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 20px; border: 1px solid var(--price-line); border-radius: 999px; color: #101828; background: #fff; font: inherit; font-size: .74rem; font-weight: 900; cursor: pointer; box-shadow: 0 10px 24px rgba(15,23,42,.06); }
.cmp-more-btn:hover { border-color: #b6c77b; }
.cmp-more-btn svg { width: 16px; height: 16px; transition: transform .2s ease; }
.cmp-more-key { display: none; }
.cmp-more-btn[aria-expanded="true"] .cmp-more-all { display: none; }
.cmp-more-btn[aria-expanded="true"] .cmp-more-key { display: inline; }
.cmp-more-btn[aria-expanded="true"] svg { transform: rotate(180deg); }

body.dark-mode .comparison-table thead th:nth-child(2),
body.dark-mode .comparison-table thead th:nth-child(4) { background: #171b22; box-shadow: inset 0 -1px #29303a; }
body.dark-mode .comparison-table thead th:nth-child(3) { background: #090b0e; box-shadow: inset 0 6px 0 var(--price-neon), inset 0 -1px #29303a; }
body.dark-mode .comparison-table tbody td:nth-child(2) { background: #121720; }
body.dark-mode .cmp-head-price small { color: #98a2b3; }
body.dark-mode .comparison-plan-head a { color: #090b0e; background: #fff; }
body.dark-mode .comparison-business-head a { color: #000; background: var(--price-neon); }
body.dark-mode .cmp-view { border-color: #29303a; background: #121720; }
body.dark-mode .cmp-view-btn { color: #98a2b3; }
body.dark-mode .cmp-view-btn[aria-pressed="true"] { color: #000; background: var(--price-neon); }
body.dark-mode .cmp-more-btn { color: #f8fafc; border-color: #29303a; background: #121720; box-shadow: none; }

@media (max-width: 760px) {
  .comparison-table tbody tr { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .comparison-table td { padding: 36px 9px 13px; }
  .comparison-table td::before { inset-inline: 9px; font-size: .72rem; }
  .comparison-mobile-plan-key { flex-wrap: wrap; gap: 7px; }
  .comparison-mobile-plan-key span { padding: 7px 12px; font-size: .8rem; }
  .comparison-mobile-plan-key span b,
  .comparison-mobile-plan-key span:last-child b { color: #fff; background: #090b0e; }
  .comparison-mobile-plan-key span:nth-child(2) b { color: #000; background: var(--price-neon); }
}

/* Group headings on phones: plain labels between the row cards, not cards. */
@media (max-width: 760px) {
  .comparison-table tbody tr.cmp-group { display: block; margin: 18px 0 8px; border: 0; background: none; box-shadow: none; }
  .comparison-table tbody tr.cmp-group:first-child { margin-top: 0; }
  .comparison-table .cmp-group td { display: block; min-height: 0; padding: 0 4px; background: transparent !important; }
  .comparison-table .cmp-group td::before { content: none; }
  body.dark-mode .comparison-table tbody tr.cmp-group { background: none; }
}
@media (max-width: 760px) {
  .comparison-table tbody td:nth-child(n) { width: auto; }
  .comparison-table tbody td:nth-child(2) { background: #fff; }
}

.plan-saving:has(> [hidden]:first-child + [hidden] + [hidden]) { display: none; }

/* "Showing Saudi prices based on your location" — set by main.js. */
.geo-note { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; padding: 10px 16px;
  border: 1px dashed #b6c77b; border-radius: 14px; color: #3f4a0a; background: #fbffe8; font-size: .74rem; font-weight: 800; }
.geo-note[hidden] { display: none; }
body.dark-mode .geo-note { color: var(--price-neon); border-color: rgba(212,251,10,.35); background: rgba(212,251,10,.06); }

/* The country control is a read-only label: the market follows the visitor's
   IP and cannot be switched by hand. */
#countryDropdownBtn.country-locked { cursor: default; }
.country-locked-hint { padding: 3px 8px; border-radius: 999px; color: #98a2b3; background: rgba(255,255,255,.07); font-size: .6rem; font-weight: 800; }

/* Brand marks in the feature column (Meta on the CTWA row) keep their own
   colour instead of the green line-icon stroke. */
.comparison-feature-icon svg.cmp-brand-icon { width: 20px; height: 20px; stroke: none; }

/* Add-ons -------------------------------------------------------------------
   One-time services a customer ticks at signup, on any plan. The price follows
   the visitor's market like the plans do (main.js). */
.pricing-addons { margin-top: 40px; }
.addons-head { margin-bottom: 14px; }
.addons-head span { color: #08775c; font-size: .72rem; font-weight: 950; }
.addons-head h2 { margin: 4px 0 0; font-size: 1.35rem; font-weight: 950; }
.addon-card { display: grid; grid-template-columns: 1fr 260px; gap: 28px; padding: 26px 28px; border: 1px solid var(--price-line); border-radius: 26px; background: #fff; box-shadow: 0 18px 50px rgba(15,23,42,.07); }
.addon-main { display: flex; gap: 18px; align-items: flex-start; }
.addon-icon { flex: 0 0 auto; width: 52px; height: 52px; display: grid; place-items: center; border: 1px solid #dbe6ff; border-radius: 16px; background: #f2f7ff; }
.addon-icon svg { width: 30px; height: 30px; }
.addon-main h3 { margin: 0; font-size: 1.15rem; font-weight: 950; }
.addon-main p { margin: 6px 0 0; color: var(--price-muted); font-size: .8rem; line-height: 1.85; font-weight: 600; }
.addon-main ul { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 18px; }
.addon-main li { display: flex; align-items: center; gap: 8px; color: #344054; font-size: .76rem; font-weight: 800; }
.addon-side { display: flex; flex-direction: column; justify-content: center; gap: 6px; padding-inline-start: 26px; border-inline-start: 1px solid #eaecf0; }
.addon-price { display: flex; align-items: baseline; gap: 6px; }
.addon-amount { font-size: 2.4rem; font-weight: 950; letter-spacing: -.03em; line-height: 1; }
.addon-currency { color: var(--price-muted); font-size: .85rem; font-weight: 800; }
.addon-period { color: #08775c; font-size: .72rem; font-weight: 900; }
.addon-cta { margin-top: 8px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; color: #fff; background: #090b0e; text-decoration: none; font-size: .76rem; font-weight: 950; }
.addon-cta:hover { color: #000; background: var(--price-neon); }
.addon-note { color: #98a2b3; font-size: .64rem; font-weight: 700; line-height: 1.6; }
body.dark-mode .addon-card { border-color: #29303a; background: #121720; box-shadow: none; }
body.dark-mode .addon-icon { border-color: #29303a; background: #171b22; }
body.dark-mode .addon-main li { color: #d0d5dd; }
body.dark-mode .addon-side { border-color: #29303a; }
body.dark-mode .addons-head span, body.dark-mode .addon-period { color: var(--price-neon); }
body.dark-mode .addon-cta { color: #000; background: var(--price-neon); }
@media (max-width: 760px) {
  .addon-card { grid-template-columns: 1fr; gap: 18px; padding: 22px 20px; }
  .addon-side { padding-inline-start: 0; padding-top: 18px; border-inline-start: 0; border-top: 1px solid #eaecf0; }
  body.dark-mode .addon-side { border-color: #29303a; }
}
.addon-badge { align-self: flex-start; margin-bottom: 4px; padding: 4px 10px; border-radius: 999px; color: #090b0e; background: var(--price-neon); font-size: .62rem; font-weight: 950; }

/* Brand marks in the comparison legends. Each sits on a small white tile so
   the dark CRM+ mark and the competitors' colours read in both themes. */
.sc-key { flex-wrap: wrap; }
.sc-k { gap: 9px; font-size: .8rem; }
.sc-logo { width: 32px; height: 32px; padding: 5px; border: 1px solid #e4e7ec; border-radius: 8px; background: #fff; object-fit: contain; }
.sc-k-ours .sc-logo { border-color: transparent; background: var(--price-neon); }
body.dark-mode .sc-logo { border-color: transparent; }
/* Our mark is the favicon: it carries its own neon tile, so no frame here. */
.sc-logo.sc-logo-ours { width: 36px; height: 36px; padding: 0; border: 0; background: none; }