/* Pricing page — from Desktop/pricing.html */
.pricing-page {
  --ink: #15253f;
  --ink-light: #3d4e65;
  --muted: #667891;
  --orange: #f97316;
  --orange-dark: #e35e0a;
  --orange-soft: #fff2e7;
  --paper: #ffffff;
  --canvas: #f7f9fc;
  --border: #e4eaf2;
  --shadow: 0 16px 48px rgba(19, 37, 64, .07);
  --max-width: 1160px;
  color: var(--ink);
  font-family: Heebo, Arial, sans-serif;
  line-height: 1.6;
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
}
.cms-page-pricing,
.cms-page-pricing .content-main,
.cms-page-pricing .component-router {
  max-width: none !important;
  width: 100%;
  margin: 0;
  padding: 0;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
}
.pricing-page *,
.pricing-page *::before,
.pricing-page *::after { box-sizing: border-box }
.pricing-page a { color: inherit; text-decoration: none }
.pricing-page button { font: inherit }
.pricing-page button,
.pricing-page a { -webkit-tap-highlight-color: transparent }
.pricing-page button:focus-visible,
.pricing-page a:focus-visible,
.pricing-page summary:focus-visible { outline: 3px solid var(--orange); outline-offset: 4px }
.pricing-page .container { width: min(var(--max-width), calc(100% - 40px)); margin-inline: auto }

/* Hero — full-bleed, not a card */
.pricing-page .hero {
  position: relative;
  overflow: hidden;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: linear-gradient(140deg, #fbfcff 0%, #fff 53%, #fff7f0 100%);
  border-bottom: 1px solid #f3ece4;
}
.pricing-page .hero::before {
  content: "";
  position: absolute;
  inset: auto -130px -220px auto;
  width: 480px;
  height: 480px;
  border: 90px solid rgba(249, 115, 22, .043);
  border-radius: 50%;
  pointer-events: none;
}
.pricing-page .pricing-hero-inner {
  position: relative;
  text-align: center;
  padding: 74px 16px 55px;
  width: min(var(--max-width), calc(100% - 40px));
  max-width: var(--max-width);
  margin-inline: auto;
}
.pricing-page .eyebrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: auto;
  max-width: max-content;
  margin-inline: auto;
  padding: 7px 15px;
  border-radius: 100px;
  background: #fff3e8;
  color: #bb5610;
  border: 1px solid #ffdfc3;
  font-size: 13px;
  font-weight: 800;
}
.pricing-page .eyebrow-dot { height: 7px; width: 7px; border-radius: 50%; background: var(--orange) }
.pricing-page .hero h1 {
  margin: 22px 0 10px;
  font-size: clamp(34px, 4.5vw, 54px);
  font-weight: 900;
  letter-spacing: -1.8px;
  line-height: 1.16;
  color: var(--ink);
  text-align: center;
}
.pricing-page .hero h1 strong { color: var(--orange); font-weight: inherit }
.pricing-page .hero p {
  max-width: 690px;
  margin: 0 auto;
  color: var(--ink-light);
  font-size: 17px;
  text-align: center;
}
.pricing-page .hero-highlights { display: flex; justify-content: center; gap: 22px; margin-top: 25px; flex-wrap: wrap }
.pricing-page .hero-highlight { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: #526079; font-weight: 600 }
.pricing-page .hero-highlight svg { color: #22996f; width: 16px; height: 16px; flex-shrink: 0 }

/* Plans */
.pricing-page .plans-section {
  background: var(--canvas);
  padding: 62px 0 70px;
  width: 100%;
  max-width: none;
  margin: 0;
  border-radius: 0;
  box-shadow: none;
}
.pricing-page .section-heading { text-align: center; margin: 0 auto 38px }
.pricing-page .section-heading h2 { font-size: 28px; line-height: 1.3; letter-spacing: -.5px; margin: 0 0 7px; font-weight: 900 }
.pricing-page .section-heading p { color: var(--muted); margin: 0; font-size: 15px }
.pricing-page .plans-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; align-items: stretch }
.pricing-page .plan {
  position: relative;
  border: 1px solid var(--border);
  background: #fff;
  border-radius: 22px;
  padding: 32px 30px 27px;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  min-width: 0;
  transition: transform .2s, box-shadow .2s;
}
.pricing-page .plan:hover { transform: translateY(-4px); box-shadow: 0 22px 52px rgba(23, 42, 71, .1) }
.pricing-page .plan-featured {
  border: 2px solid var(--orange);
  padding: 31px 29px 26px;
  box-shadow: 0 22px 52px rgba(249, 115, 22, .12);
}
.pricing-page .plan-ribbon {
  position: absolute;
  top: -15px;
  right: 26px;
  background: var(--orange);
  color: #fff;
  font-size: 12px;
  letter-spacing: .1px;
  font-weight: 800;
  padding: 5px 18px;
  border-radius: 9px;
  box-shadow: 0 7px 18px rgba(249, 115, 22, .22);
}
.pricing-page .plan-icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  background: #f1f5fb;
  color: #3d5d8b;
  border-radius: 14px;
}
.pricing-page .plan-icon svg { width: 23px; height: 23px }
.pricing-page .plan-featured .plan-icon { background: var(--orange-soft); color: var(--orange-dark) }
.pricing-page .plan-label { color: var(--muted); font-size: 12px; margin: 20px 0 1px; font-weight: 700 }
.pricing-page .plan h3 { font-size: 25px; margin: 0; line-height: 1.35; font-weight: 900 }
.pricing-page .plan-desc { font-size: 14px; color: var(--muted); min-height: 47px; margin: 8px 0 18px }
.pricing-page .price-line { display: flex; align-items: baseline; gap: 6px; min-height: 63px }
.pricing-page .price-value { font-size: 48px; font-weight: 900; letter-spacing: -1.4px; line-height: 1.15; color: var(--ink) }
.pricing-page .price-currency { font-size: 24px; font-weight: 800 }
.pricing-page .price-period { font-size: 14px; color: var(--muted) }
.pricing-page .quote-price { font-size: 31px; font-weight: 900; letter-spacing: -.55px; line-height: 1.9 }
.pricing-page .price-note { font-size: 13px; color: #687991; min-height: 42px; margin: 1px 0 17px }
.pricing-page .plan-featured .price-note { color: #b75a14 }
.pricing-page .plan-divider { border: 0; border-top: 1px solid var(--border); margin: 0 0 20px }
.pricing-page .plan-features-heading { font-size: 13px; font-weight: 800; margin: 0 0 13px }
.pricing-page .plan-features { padding: 0; margin: 0 0 26px; list-style: none; display: grid; gap: 13px }
.pricing-page .plan-features li { display: flex; gap: 11px; align-items: flex-start; font-size: 14px; color: var(--ink-light) }
.pricing-page .check-circle {
  color: #148d67;
  background: #e6f8ef;
  border-radius: 50%;
  height: 20px;
  width: 20px;
  flex: 0 0 20px;
  display: grid;
  place-items: center;
  margin-top: 2px;
}
.pricing-page .check-circle svg { width: 12px; height: 12px }
.pricing-page .plan-actions { margin-top: auto }
.pricing-page .btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 100%;
  min-height: 51px;
  border-radius: 11px;
  padding: 11px 16px;
  font-size: 15px;
  font-weight: 800;
  transition: background .2s, transform .2s, border-color .2s;
}
.pricing-page .btn-orange { background: var(--orange); color: #fff }
.pricing-page .btn-orange:hover { background: var(--orange-dark); transform: translateY(-2px) }
.pricing-page .btn-outline { border: 1px solid #bdc9d9; background: #fff; color: var(--ink) }
.pricing-page .btn-outline:hover { border-color: var(--orange); color: var(--orange-dark); background: #fff9f5; transform: translateY(-2px) }
.pricing-page .btn svg { width: 17px; height: 17px }
.pricing-page .plan-footer { text-align: center; font-size: 12px; color: var(--muted); margin-top: 12px }
.pricing-page .fineprint { max-width: 800px; margin: 28px auto 0; text-align: center; color: #738198; font-size: 13px }

/* Features */
.pricing-page .why-section { padding: 75px 0; background: #fff }
.pricing-page .why-heading { text-align: center; max-width: 670px; margin: 0 auto 34px }
.pricing-page .why-heading h2 { font-size: 29px; margin: 0 0 9px; line-height: 1.35; letter-spacing: -.5px }
.pricing-page .why-heading p { color: var(--muted); font-size: 15px; margin: 0 }
.pricing-page .features-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px }
.pricing-page .feature { border: 1px solid var(--border); padding: 22px 19px; border-radius: 17px; background: #fff; min-width: 0 }
.pricing-page .feature-icon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: #f1f5fa;
  color: #34547f;
  display: grid;
  place-items: center;
  margin-bottom: 17px;
}
.pricing-page .feature-icon svg { height: 21px; width: 21px }
.pricing-page .feature h3 { font-size: 16px; margin: 0 0 6px; font-weight: 800 }
.pricing-page .feature p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.75 }

/* FAQ */
.pricing-page .faq-section { background: var(--canvas); padding: 70px 0 76px; border-block: 1px solid var(--border) }
.pricing-page .faq-wrap { max-width: 820px; margin: auto }
.pricing-page .faq-section h2 { font-size: 29px; text-align: center; margin: 0 0 28px; letter-spacing: -.5px }
.pricing-page .faq-item { background: #fff; border: 1px solid var(--border); border-radius: 13px; overflow: hidden; margin-bottom: 12px }
.pricing-page .faq-item summary {
  list-style: none;
  position: relative;
  cursor: pointer;
  padding: 17px 21px 17px 50px;
  font-weight: 800;
  font-size: 15px;
}
.pricing-page .faq-item summary::-webkit-details-marker { display: none }
.pricing-page .faq-item summary::after {
  content: "+";
  position: absolute;
  left: 22px;
  top: 13px;
  font-size: 24px;
  color: var(--orange);
  font-weight: 400;
}
.pricing-page .faq-item[open] summary::after { content: "−" }
.pricing-page .faq-item p { margin: 0; padding: 0 21px 19px 45px; color: var(--ink-light); font-size: 14px }
.pricing-page .faq-item[open] summary { color: #bc5813 }
.pricing-page .faq-item a { color: #d3600e; text-decoration: underline; font-weight: 800 }

/* Closing CTA */
.pricing-page .closing { padding: 64px 0; background: #fff }
.pricing-page .closing-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  background: linear-gradient(110deg, #152744, #253e61);
  border-radius: 22px;
  padding: 32px 42px;
  color: #fff;
}
.pricing-page .closing h2 { font-size: 25px; margin: 0 0 4px; line-height: 1.3 }
.pricing-page .closing p { margin: 0; color: #c9d6e6; font-size: 14px }
.pricing-page .closing .btn { width: auto; white-space: nowrap; padding-inline: 25px }

@media (max-width: 960px) {
  .pricing-page .plans-grid { gap: 14px }
  .pricing-page .plan { padding: 26px 21px }
  .pricing-page .plan-featured { padding: 25px 20px }
  .pricing-page .features-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) }
}
@media (max-width: 750px) {
  .pricing-page .pricing-hero-inner { padding: 59px 7px 42px }
  .pricing-page .hero h1 { letter-spacing: -1.2px }
  .pricing-page .hero p { font-size: 15px }
  .pricing-page .hero-highlights { gap: 10px 17px }
  .pricing-page .plans-section { padding: 47px 0 56px }
  .pricing-page .plans-grid { grid-template-columns: 1fr; gap: 24px; max-width: 490px; margin: auto }
  .pricing-page .plan,
  .pricing-page .plan-featured { padding: 30px 28px }
  .pricing-page .plan-desc { min-height: 0 }
  .pricing-page .price-note { min-height: 0; margin-bottom: 19px }
  .pricing-page .section-heading { margin-bottom: 30px }
  .pricing-page .section-heading h2 { font-size: 25px }
  .pricing-page .why-section,
  .pricing-page .faq-section { padding: 54px 0 }
  .pricing-page .closing-inner { padding: 27px; flex-direction: column; align-items: stretch; text-align: center }
  .pricing-page .closing .btn { width: 100% }
}
@media (max-width: 460px) {
  .pricing-page .container { width: calc(100% - 30px) }
  .pricing-page .hero h1 { font-size: 34px }
  .pricing-page .hero-highlights { justify-content: center }
  .pricing-page .plan,
  .pricing-page .plan-featured { padding: 27px 22px }
  .pricing-page .price-value { font-size: 44px }
  .pricing-page .features-grid { grid-template-columns: 1fr }
  .pricing-page .why-heading h2,
  .pricing-page .faq-section h2 { font-size: 24px }
}
@media (prefers-reduced-motion: reduce) {
  .pricing-page *,
  .pricing-page *::before,
  .pricing-page *::after { transition: none !important; animation: none !important }
}