/* ============================================================================
   pricing.css — the Pricing page only (added 1 Nov 2026). Loaded after site.css and rf.css.

   Sizes, colours and spacing are copied from design_reference/pricing-design-2026-11-01.dc.html,
   where they were inline styles. The top bar, Sakhi, the voice rings, the wash and grain, the
   footer and the WhatsApp share row are the site's own (rf.css + site.css), reused; this file only
   adds the pricing sections and the share row's look on the dark band.

   Every rule starts with ".pr" (the page's <body> class) so that it beats the rate finder page's
   general rules (".rf2 a" and so on) without "!important".

   Tokens: ink #3D2B7A, action #6A55E8, lavender #C9BFFF (decoration, and text only on ink),
   page #F0EEF7, surface #FFFFFF, tint #F1EEFD, border #E7E4F3, body #2A2440, muted #5D5672.

   MOTION: static/site/pricing.js gives each section (.pr-reveal) the class "in" while it is on
   screen and "wait" once it has left the screen completely, so everything replays on return.
   Inside a section, .pr-rise rises and .pr-fade fades up, each after its own --d delay (set on the
   element in the HTML). Without JavaScript, or with reduced motion (rf.css switches every animation
   off under .rf), the classes never arrive and everything is simply visible.
   ============================================================================ */

.pr-main { width: 100%; display: flex; flex-direction: column; align-items: center; }

/* ---------- top bar: the current page's link, and room on narrow screens ---------- */
.pr .rf-nav-link[aria-current="page"] {
  font-weight: 600; color: #3D2B7A; text-decoration: underline; text-underline-offset: 6px;
}
/* Where the logo, the two links and the button do not fit on one line (below about 640 px), the links
   move to a line of their own under the logo; wider screens keep one line. */
.pr .rf-head { flex-wrap: wrap; row-gap: 0; }

/* ---------- 1. the hero ---------- */
.pr .pr-hero { gap: 20px; padding-bottom: 36px; }
.pr .pr-h1 {
  margin: 0; font-size: clamp(36px, 5vw, 58px); line-height: 1.08; font-weight: 600;
  letter-spacing: -0.02em; color: #3D2B7A;
}
.pr .pr-lead { margin: 0; max-width: 640px; font-size: 18px; line-height: 1.55; color: #5D5672; }

/* The launch coupon: an ink "50% off" half and a white price half, joined by a dashed cut with a
   half-circle notch at each end (circles in the page colour). */
.pr .pr-coupon {
  display: flex; align-items: stretch; margin-top: 4px;
  background: #FFFFFF; border: 2px dashed #3D2B7A; border-radius: 16px;
}
.pr .pr-coupon-l {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  padding: 16px 32px; background: #3D2B7A; border-radius: 14px 0 0 14px;
}
.pr .pr-coupon-tag { font-size: 13px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: #C9BFFF; }
.pr .pr-coupon-big { font-size: 46px; font-weight: 600; line-height: 1.05; color: #FFFFFF; letter-spacing: -0.02em; }
.pr .pr-coupon-sub { font-size: 15px; font-weight: 500; color: #C9BFFF; }
.pr .pr-coupon-cut { position: relative; width: 0; border-left: 2px dashed #3D2B7A; }
.pr .pr-coupon-cut span {
  position: absolute; left: -13px; width: 24px; height: 24px; border-radius: 50%; background: #F0EEF7;
}
.pr .pr-coupon-cut span:first-child { top: -14px; }
.pr .pr-coupon-cut span:last-child { bottom: -14px; }
.pr .pr-coupon-r {
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px;
  padding: 16px 32px; text-align: left;
}
.pr .pr-coupon-from { font-size: 15px; font-weight: 500; color: #3D2B7A; }
.pr .pr-coupon-prices { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 12px; }
.pr .pr-coupon-was {
  font-size: 24px; font-weight: 500; color: #5D5672;
  text-decoration: line-through; text-decoration-thickness: 2px;
}
.pr .pr-coupon-now { font-size: 46px; font-weight: 600; color: #3D2B7A; letter-spacing: -0.02em; line-height: 1.05; }
.pr .pr-coupon-per { font-size: 15px; color: #5D5672; }
/* Under 520 px wide: the two halves stack, and the cut turns horizontal (notches left and right). */
@media (max-width: 520px) {
  .pr .pr-coupon { flex-direction: column; }
  .pr .pr-coupon-l { border-radius: 14px 14px 0 0; }
  .pr .pr-coupon-cut { width: auto; height: 0; border-left: 0; border-top: 2px dashed #3D2B7A; }
  .pr .pr-coupon-cut span { left: auto; top: -13px; }
  .pr .pr-coupon-cut span:first-child { left: -14px; top: -13px; }
  .pr .pr-coupon-cut span:last-child { right: -14px; bottom: auto; }
  .pr .pr-coupon-r { align-items: center; text-align: center; }
  .pr .pr-coupon-prices { justify-content: center; }
}
/* The offer is off: a plain box instead of the coupon. */
.pr .pr-from {
  display: flex; align-items: baseline; flex-wrap: wrap; justify-content: center; gap: 6px 14px;
  background: #FFFFFF; border: 2px solid #3D2B7A; border-radius: 16px; padding: 12px 26px;
}
.pr .pr-from-words { font-size: 19px; font-weight: 500; color: #3D2B7A; }
.pr .pr-from-price { font-size: 44px; font-weight: 600; color: #3D2B7A; letter-spacing: -0.02em; }

/* "Buy by 31 March 2027, covered till 31 March 2028." */
.pr .pr-covered {
  display: flex; align-items: center; gap: 12px; padding: 12px 18px; text-align: left;
  background: #FFFFFF; border: 1px solid #E7E4F3; border-radius: 14px;
}
.pr .pr-covered-ic {
  flex: none; width: 40px; height: 40px; border-radius: 50%; background: #F1EEFD;
  display: flex; align-items: center; justify-content: center;
}
.pr .pr-covered-text { font-size: 15px; line-height: 1.45; color: #2A2440; }
.pr .pr-covered-text strong { font-weight: 600; color: #3D2B7A; }

/* ---------- 2. the plan cards ---------- */
.pr .pr-plans { width: 100%; padding: 8px 0 56px; }
.pr .pr-cards {
  max-width: 1340px; margin: 0 auto; padding: 0 24px; box-sizing: border-box;
  display: flex; flex-wrap: wrap; align-items: stretch; gap: 18px;   /* cards in a row: equal height */
}
.pr .pr-card {
  flex: 1 1 200px; min-width: 0; box-sizing: border-box; padding: 26px 20px; text-align: left;
  display: flex; flex-direction: column; gap: 18px;
  background: #FFFFFF; border: 1px solid #E7E4F3; border-radius: 18px;
}
.pr .pr-try { flex: 0.85 1 180px; background: #F7F6FB; border: 1px dashed #C9BFFF; }   /* slightly narrower */
.pr .pr-practice {                                                                       /* slightly wider */
  flex: 1.2 1 230px; padding: 26px 22px; background: #3D2B7A; border: 2px solid #6A55E8;
  box-shadow: 0 18px 44px rgba(61, 43, 122, 0.30);
}
.pr .pr-card-head { display: flex; flex-direction: column; gap: 6px; }
.pr .pr-card-name { margin: 0; font-size: 21px; font-weight: 600; color: #3D2B7A; }
.pr .pr-card-desc { margin: 0; font-size: 14px; line-height: 1.45; color: #5D5672; }
.pr .pr-card-price { display: flex; flex-direction: column; gap: 6px; }
.pr .pr-price-row { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 10px; }
.pr .pr-was {
  font-size: 24px; font-weight: 500; color: #5D5672;
  text-decoration: line-through; text-decoration-thickness: 2px;
}
.pr .pr-price { font-size: 40px; font-weight: 600; color: #2A2440; letter-spacing: -0.02em; }
.pr .pr-card-note { font-size: 14px; color: #5D5672; }
.pr .pr-chip {
  align-self: flex-start; padding: 5px 12px; border-radius: 6px;
  background: #3D2B7A; color: #FFFFFF; font-size: 13px; font-weight: 600;
}
.pr .pr-btn {
  display: flex; align-items: center; justify-content: center; min-height: 48px; box-sizing: border-box;
  border-radius: 10px; border: 1.5px solid #6A55E8; background: #FFFFFF; color: #6A55E8;
  font-size: 15px; font-weight: 600; text-decoration: none; transition: background-color .2s;
}
.pr .pr-btn:hover { background: #F1EEFD; color: #6A55E8; }
.pr .pr-card-lead { margin: 0; font-size: 13px; font-weight: 600; color: #5D5672; }
.pr .pr-feats { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.pr .pr-feat { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 1.45; }
.pr .pr-feat svg { flex: none; margin-top: 1px; }
.pr .pr-feat strong { font-weight: 600; }
.pr .pr-upsell {
  margin-top: auto; padding: 14px 16px; border-radius: 12px; background: #F1EEFD;
  font-size: 14px; line-height: 1.5; color: #2A2440;
}
.pr .pr-upsell strong { font-weight: 600; color: #3D2B7A; }
/* Practice: the ink card */
.pr .pr-badge {
  align-self: flex-start; padding: 5px 12px; border-radius: 999px; background: #C9BFFF; color: #3D2B7A;
  font-size: 12px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase;
}
.pr .pr-practice .pr-card-name { font-size: 24px; color: #FFFFFF; }
.pr .pr-practice .pr-card-desc,
.pr .pr-practice .pr-card-note,
.pr .pr-practice .pr-card-lead { color: #C9BFFF; }
.pr .pr-practice .pr-chip { background: #FFFFFF; color: #3D2B7A; }
.pr .pr-practice .pr-was { font-size: 26px; color: #C9BFFF; }
.pr .pr-practice .pr-price { font-size: 46px; color: #FFFFFF; }
.pr .pr-practice .pr-btn { min-height: 52px; border-color: #FFFFFF; background: #FFFFFF; color: #3D2B7A; font-size: 16px; }
.pr .pr-practice .pr-btn:hover { background: #F1EEFD; color: #3D2B7A; }
.pr .pr-practice .pr-feats { color: #FFFFFF; }
.pr .pr-footnote { margin: auto 0 0; font-size: 12px; line-height: 1.5; color: #C9BFFF; }
/* Phones: one card per row */
@media (max-width: 600px) {
  .pr .pr-card, .pr .pr-try, .pr .pr-practice { flex-basis: 100%; }
}

/* ---------- section heads (3, 4, 5) ---------- */
.pr .pr-sec-head { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.pr .pr-h2 { margin: 0; font-size: 32px; font-weight: 600; color: #3D2B7A; letter-spacing: -0.01em; text-align: center; }
.pr .pr-sec-line { margin: 0; font-size: 16px; color: #5D5672; }

/* ---------- 3. in every plan ---------- */
.pr .pr-every, .pr .pr-compare, .pr .pr-faq {
  width: 100%; max-width: 1200px; box-sizing: border-box; padding: 0 24px;
  display: flex; flex-direction: column;
}
.pr .pr-every { gap: 28px; padding-bottom: 64px; }
.pr .pr-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.pr .pr-tile {
  display: flex; flex-direction: column; gap: 12px; padding: 24px; text-align: left;
  background: #FFFFFF; border: 1px solid #E7E4F3; border-radius: 16px;
}
.pr .pr-tile-ic {
  width: 44px; height: 44px; border-radius: 50%; background: #F1EEFD;
  display: flex; align-items: center; justify-content: center;
}
.pr .pr-tile-title { margin: 0; font-size: 18px; font-weight: 600; color: #3D2B7A; }
.pr .pr-tile-line { margin: 0; font-size: 15px; line-height: 1.55; color: #5D5672; }
@media (max-width: 960px) { .pr .pr-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .pr .pr-tiles { grid-template-columns: 1fr; } }

/* ---------- 4. compare every plan ---------- */
.pr .pr-compare { gap: 24px; padding-bottom: 64px; }
/* the box scrolls sideways when the table (at least 860 px) is wider than the screen */
.pr .pr-table-box { overflow-x: auto; background: #FFFFFF; border: 1px solid #E7E4F3; border-radius: 16px; }
.pr .cmp { width: 100%; min-width: 860px; border-collapse: collapse; }
.pr .cmp th, .pr .cmp td { padding: 12px 14px; border-bottom: 1px solid #E7E4F3; font-size: 14px; line-height: 1.4; }
.pr .cmp td { text-align: center; color: #2A2440; }
.pr .cmp td svg { display: inline-block; vertical-align: middle; }
.pr .cmp thead th { font-size: 16px; font-weight: 600; color: #3D2B7A; }
.pr .cmp thead th.cmp-plan { text-align: left; width: 32%; font-size: 14px; font-weight: 500; color: #5D5672; }
.pr .cmp thead th.cmp-practice { background: #3D2B7A; color: #FFFFFF; }
.pr .cmp td.pr-col { background: #F1EEFD; }
.pr .cmp th.rl { text-align: left; font-weight: 400; color: #2A2440; }
.pr .cmp th.sec {
  text-align: left; padding: 10px 16px; background: #F0EEF7; color: #3D2B7A;
  font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
}
.pr .cmp strong { font-weight: 600; }
.pr .cmp .cmp-launch th strong, .pr .cmp .cmp-launch td.pr-col strong { color: #3D2B7A; }
.pr .pr-table-note { margin: 0; font-size: 13px; line-height: 1.5; color: #5D5672; }

/* ---------- 5. questions before you choose ---------- */
.pr .pr-faq { gap: 24px; padding-bottom: 72px; }
.pr .pr-faq-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.pr .pr-q {
  display: flex; flex-direction: column; gap: 8px; padding: 20px 22px; text-align: left;
  background: #FFFFFF; border: 1px solid #E7E4F3; border-radius: 14px;
}
.pr .pr-q-h { margin: 0; font-size: 16px; font-weight: 600; color: #3D2B7A; }
.pr .pr-q-a { margin: 0; font-size: 15px; line-height: 1.55; color: #5D5672; }
@media (max-width: 700px) { .pr .pr-faq-grid { grid-template-columns: 1fr; } }

/* ---------- 6. the close: a full-width ink band ---------- */
.pr .pr-close {
  position: relative; overflow: hidden; width: 100%; box-sizing: border-box; padding: 72px 0;
  background: #3D2B7A;
}
.pr .pr-close-ring {
  position: absolute; left: 50%; top: 50%; border-radius: 50%; border: 1px solid #6A55E8; pointer-events: none;
}
.pr .pr-close-ring1 { width: 560px; height: 560px; margin: -280px 0 0 -280px; opacity: 0.6; }
.pr .pr-close-ring2 { width: 380px; height: 380px; margin: -190px 0 0 -190px; }
.pr .pr-close-in {
  position: relative; max-width: 720px; margin: 0 auto; padding: 0 24px; box-sizing: border-box;
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 18px;
}
.pr .pr-close-h { margin: 0; font-size: clamp(36px, 5vw, 52px); font-weight: 600; color: #FFFFFF; letter-spacing: -0.02em; }
.pr .pr-close-line { margin: 0; font-size: 18px; line-height: 1.55; color: #C9BFFF; }
.pr .pr-close-btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 28px;
  border-radius: 10px; background: #FFFFFF; color: #3D2B7A; font-size: 16px; font-weight: 600; text-decoration: none;
  transition: background-color .2s;
}
.pr .pr-close-btn:hover { background: #F1EEFD; color: #3D2B7A; }
/* The site's share row (site.css), restyled for the dark band: lavender border, white words, the
   WhatsApp-green icon (its own colour). The "Copy link" chip keeps its light look. */
.pr .pr-share .wa-go,
.pr .pr-share .wa-desk { background: transparent; border-color: #C9BFFF; color: #FFFFFF; }
.pr .pr-share .wa-go:hover { border-color: #25D366; color: #FFFFFF; }
.pr .pr-share .wa-desk:hover { border-color: #FFFFFF; }
.pr .pr-share .wa-desk-words,
.pr .pr-share .wa-desk-addr { color: #FFFFFF; }
.pr .pr-share .wa-desk-link { border-left-color: rgba(201, 191, 255, 0.5); }

/* ---------- footer: the site's (rf.css), with the homepage footer's top rule ---------- */
.pr .pr-foot .rf-foot-row { border-top: 1px solid #E7E4F3; padding-top: 20px; }

/* ============================================================================
   THE MOTION (only with the classes pricing.js adds)
   ============================================================================ */
@keyframes prRise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes prFade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.pr .pr-reveal.in .pr-rise { animation: prRise .7s cubic-bezier(.2,.7,.2,1) both; animation-delay: var(--d, 0s); }
.pr .pr-reveal.in .pr-fade { animation: prFade .9s ease-out both; animation-delay: var(--d, 0s); }
.pr .pr-reveal.wait .pr-rise, .pr .pr-reveal.wait .pr-fade { opacity: 0; }
/* The voice rings ripple ONCE as the coupon lands (it rises at 0.55 s for 0.7 s): one ring every
   0.14 s from 1.2 s - the delays are on each ring in the HTML. (On the other pages they repeat.) */
.pr .pr-hero.in .vr-hero .rg { animation: ripple 5s ease-out 1; }