/* ============================================================
   PRICING PAGE REDESIGN — Raiseaticket
   File   : pricing-redesign.css
   Scope  : all selectors prefixed .pr-  (body.pr-page)
   Follows the same design system as home-redesign.css and
   product-redesign.css (Instrument Sans + Mulish, brand
   blue #0302B0 / teal #01A9E0, gradient pills, blue checks).
   FAQ    : JS toggles .pr-active on .pr-faq__item
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Instrument+Sans:wght@400;500;600;700;800&family=Mulish:wght@400;500;600;700;800&display=swap');

:root {
  --pr-blue:        #0302B0;
  --pr-blue-dk:     #02018A;
  --pr-teal:        #01A9E0;
  --pr-navy:        #0D1B3E;
  --pr-text:        #0D1B3E;
  --pr-text-strong: #212738;
  --pr-text-mid:    #4A4A68;
  --pr-text-light:  #6B7280;
  --pr-white:       #FFFFFF;
  --pr-border:      #E5E7EB;
  --pr-border-blue: #C7D2FE;

  --pr-grad-primary: linear-gradient(95deg, #0302B0 1.34%, #01A9E0 97.22%);
  --pr-grad-hero:    linear-gradient(160deg, #FFFFFF 0%, #F7FBF9 55%, #EAF7F0 100%);
  --pr-grad-card:    linear-gradient(155deg, #FFFFFF 0%, #FCFEFD 55%, #F2FBF6 100%);
  --pr-grad-price:   linear-gradient(135deg, #E9F1FE 0%, #EEF3FF 100%);
  --pr-grad-faq:     linear-gradient(155deg, #F0FAF5 0%, #EBF7F2 100%);
  --pr-grad-cta:     linear-gradient(120deg, #BFEAF5 0%, #D2EFF9 45%, #E6F5FC 100%);

  --pr-r-md:   12px;
  --pr-r-lg:   20px;
  --pr-r-xl:   28px;
  --pr-r-pill: 9999px;

  --pr-ff-head: 'Mulish', 'Segoe UI', system-ui, sans-serif;
  --pr-ff-body: 'Instrument Sans', 'Mulish', 'Segoe UI', sans-serif;

  --pr-max-w:  1200px;
  --pr-gutter: 24px;
  --pr-sec-py: 80px;
  --pr-ease:   cubic-bezier(.16,1,.3,1);
}

/* ---- section-scoped box-sizing (Bootstrap already sets it, kept for safety) ---- */
.pr-hero *, .pr-hero *::before, .pr-hero *::after,
.pr-faq  *, .pr-faq  *::before, .pr-faq  *::after,
.pr-cta-banner *, .pr-cta-banner *::before, .pr-cta-banner *::after {
  box-sizing: border-box;
}

/* ---- shared container ---- */
.pr-container {
  max-width: var(--pr-max-w);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--pr-gutter);
  padding-right: var(--pr-gutter);
}

/* ---- shared buttons ---- */
.pr-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--pr-ff-head);
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  padding: 13px 28px;
  border-radius: var(--pr-r-pill);
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  transition: opacity .22s var(--pr-ease),
              box-shadow .22s var(--pr-ease),
              transform .18s var(--pr-ease);
}
.pr-btn:hover  { transform: translateY(-1px); text-decoration: none; }
.pr-btn:active { transform: translateY(0); }

.pr-btn--primary {
  color: #fff;
  border: 1.5px solid #01A9E0;
  background: var(--pr-grad-primary);
  background-clip: padding-box;
}
.pr-btn--primary:hover {
  color: #fff;
  opacity: .92;
  box-shadow: 0 6px 24px rgba(3,2,176,.30);
}
.pr-btn--white {
  color: var(--pr-navy);
  background: #fff;
  border: 1px solid #D5DCEC;
}
.pr-btn--white:hover {
  color: var(--pr-navy);
  box-shadow: 0 6px 20px rgba(13,27,62,.12);
}
.pr-btn__arrow {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  display: inline-block;
}

/* ============================================================
   SECTION 1 — PRICING HERO + PLAN CARD
   ============================================================ */
.pr-hero {
  background: var(--pr-grad-hero);
  padding-top: var(--pr-sec-py);
  padding-bottom: var(--pr-sec-py);
}

.pr-hero__header {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 52px;
}
.pr-eyebrow {
  display: block;
  font-family: var(--pr-ff-head);
  font-size: 22px;
  font-weight: 700;
  color: var(--pr-blue);
  margin: 0 0 14px;
}
.pr-hero__title {
  font-family: var(--pr-ff-head);
  font-size: 48px;
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -.02em;
  color: var(--pr-text-strong);
  margin: 0 0 20px;
}
.pr-hero__title .pr-text-cyan { color: var(--pr-teal); }
.pr-hero__body {
  font-family: var(--pr-ff-body);
  font-size: 24px;
  font-weight: 400;
  line-height: 1.5;
  color: #232321;
  margin: 0 auto;
  max-width: 640px;
}

/* plan card */
.pr-plan-card {
  max-width: 680px;
  margin: 0 auto;
  background: var(--pr-grad-card);
  border: 1px solid var(--pr-border-blue);
  border-radius: var(--pr-r-xl);
  box-shadow: 0 12px 40px rgba(13,27,62,.06);
  padding: 32px;
}

.pr-plan-card__price {
  background: var(--pr-grad-price);
  border-radius: var(--pr-r-lg);
  padding: 26px 32px;
  margin-bottom: 30px;
}
.pr-plan-card__tier {
  display: block;
  font-family: var(--pr-ff-head);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--pr-blue);
  margin-bottom: 10px;
}
.pr-plan-card__amount {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.pr-plan-card__value {
  font-family: var(--pr-ff-head);
  font-size: 56px;
  font-weight: 800;
  line-height: 1;
  color: var(--pr-navy);
}
.pr-plan-card__period {
  font-family: var(--pr-ff-body);
  font-size: 20px;
  font-weight: 500;
  color: var(--pr-text-light);
}

/* blue-outline check list */
.pr-checklist {
  list-style: none;
  padding: 0;
  margin: 0 0 6px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.pr-checklist li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  font-family: var(--pr-ff-body);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--pr-navy);
}
.pr-checklist__check {
  display: block;
  width: 22px;
  height: 22px;
  min-width: 22px;
  margin-top: 1px;
  border-radius: 50%;
  border: 2px solid var(--pr-blue);
  background-color: transparent;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%230302B0' d='M13.78 4.22a.75.75 0 0 1 0 1.06l-7.25 7.25a.75.75 0 0 1-1.06 0L2.22 9.28a.75.75 0 1 1 1.06-1.06L6 10.94l6.72-6.72a.75.75 0 0 1 1.06 0z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 11px 11px;
  flex-shrink: 0;
}

.pr-plan-card__cta {
  text-align: center;
  margin-top: 34px;
}

/* ============================================================
   SECTION 2 — FAQ ACCORDION
   ============================================================ */
.pr-faq {
  background: var(--pr-grad-faq);
  padding-top: var(--pr-sec-py);
  padding-bottom: var(--pr-sec-py);
}
.pr-faq__header {
  text-align: center;
  margin-bottom: 56px;
}
.pr-faq__eyebrow {
  display: block;
  font-family: var(--pr-ff-head);
  font-size: 22px;
  font-weight: 700;
  color: var(--pr-blue);
  margin-bottom: 12px;
}
.pr-faq__title {
  font-family: var(--pr-ff-head);
  font-size: 48px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.02em;
  color: var(--pr-text-strong);
  margin: 0;
}
.pr-faq__list {
  max-width: 980px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}
.pr-faq__item {
  background: #FFF;
  border: 2px solid transparent;
  border-radius: 10px;
  margin: 0 0 16px;
  padding: 24px;
  transition: background .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.pr-faq__item.pr-active {
  background: #FFF;
  border: 2px solid #D3F8E2;
  border-radius: 10px;
  box-shadow: 0 6px 26px rgba(13,27,62,.07);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  padding: 24px;
}
.pr-faq__question {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: var(--pr-ff-head);
  font-size: 22px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--pr-text-strong);
  transition: color .2s ease;
}
.pr-faq__question:hover { color: var(--pr-blue); }
.pr-faq__item.pr-active .pr-faq__question { font-weight: 700; }
.pr-faq__q-text { flex: 1; }
.pr-faq__chevron {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  color: var(--pr-blue);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .25s var(--pr-ease);
}
.pr-faq__chevron svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.pr-faq__item.pr-active .pr-faq__chevron { transform: rotate(180deg); }
.pr-faq__answer {
  display: none;
  padding: 0;
  font-family: var(--pr-ff-body);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.75;
  color: var(--pr-text-mid);
}
.pr-faq__answer p { margin: 0; }
.pr-faq__answer a { color: var(--pr-blue); font-weight: 600; }
.pr-faq__item.pr-active .pr-faq__answer { display: block; }

/* ============================================================
   SECTION 3 — CTA BANNER (matches home / product CTA)
   ============================================================ */
.pr-cta-banner {
  background: var(--pr-grad-cta);
  padding-top: 96px;
  padding-bottom: 96px;
}
.pr-cta-banner__inner {
  max-width: var(--pr-max-w);
  margin: 0 auto;
  padding-left: var(--pr-gutter);
  padding-right: var(--pr-gutter);
  text-align: left;
}
.pr-cta-banner__eyebrow {
  display: block;
  font-family: var(--pr-ff-head);
  font-size: 22px;
  font-weight: 700;
  color: var(--pr-blue);
  margin-bottom: 14px;
}
.pr-cta-banner__title {
  font-family: var(--pr-ff-head);
  font-size: 48px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.025em;
  color: var(--pr-text-strong);
  max-width: 560px;
  margin: 0 0 20px;
}
.pr-cta-banner__body {
  font-family: var(--pr-ff-body);
  font-size: 24px;
  font-weight: 400;
  line-height: 1.6;
  color: #232321;
  max-width: 640px;
  margin: 0 0 36px;
}
.pr-cta-banner__buttons {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 16px;
  flex-wrap: wrap;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 768px) {
  .pr-hero__title,
  .pr-faq__title,
  .pr-cta-banner__title { font-size: 34px; }
  .pr-hero__body,
  .pr-cta-banner__body  { font-size: 19px; }
  .pr-eyebrow,
  .pr-faq__eyebrow,
  .pr-cta-banner__eyebrow { font-size: 18px; }
  .pr-faq__question { font-size: 18px; padding: 0; }
  .pr-faq__item { padding: 18px; }
  .pr-plan-card { padding: 22px; }
  .pr-plan-card__value { font-size: 46px; }
  .pr-checklist li { font-size: 16px; }
  .pr-cta-banner { padding-top: 64px; padding-bottom: 64px; }
  .pr-cta-banner__buttons { flex-direction: column; align-items: stretch; }
  .pr-cta-banner__buttons .pr-btn { width: 100%; }
}