/* =========================================================
   Pricing — configured around your hospital
   Built to public/reference/brand-guidelines.md. Loaded after /index.css.

   No tiers, no monthly figures, no "starting at". The page's job is to
   show what can be configured and then hand the visitor to a person.

   The brief's green (#16C542) is not in our palette. Lime is a fill,
   never body text (1.28:1 on white), so the green emphasis in headings
   is --lime-ink #3f5a00 — 7.85:1, and still reads green.

   Every class is prefixed pr- ; the reset weighs nothing (guidelines §14).
   ========================================================= */

.pr {
  --pad: calc(67 * var(--u));
  --text: #2a2a2a;
  --faint: #9a9a9a;
  --soft: #f5f8f1;
  --grey: #f7f7f7;
  --lime-tint: #effcb5;
  --lime-ink: #3f5a00;
  --r-card: calc(16 * var(--u));
  --r: calc(12 * var(--u));
  --shadow: 0 1px 2px rgba(17, 19, 24, .03), 0 calc(16 * var(--u)) calc(36 * var(--u)) calc(-26 * var(--u)) rgba(17, 19, 24, .14);
  --ease: cubic-bezier(.2, .8, .2, 1);
  display: block;
  color: var(--ink);
}
.pr *, .pr *::before, .pr *::after { box-sizing: border-box; }
:where(.pr) :where(h1, h2, h3, h4, p, ul, ol, dl, dd, dt, figure) { margin: 0; }
:where(.pr) :where(ul, ol) { padding: 0; list-style: none; }
.pr img { display: block; max-width: 100%; }
.pr .i { flex: none; width: calc(18 * var(--u)); height: calc(18 * var(--u)); fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* the nav item for this page, marked in the shared chrome */
.navlink[href="/pages/pricing/page.html"] { color: var(--ink); font-weight: 600; }

/* ---------- type ---------- */
.pr-h1, .pr-h2, .pr-h3 { font-family: var(--font-head); font-weight: 500; letter-spacing: -.03em; color: var(--ink); text-wrap: balance; }
.pr-h1 { font-size: calc(64 * var(--u)); line-height: calc(77 * var(--u)); }
.pr-h2 { font-size: calc(48 * var(--u)); line-height: calc(57 * var(--u)); }
.pr-h3 { font-size: calc(32 * var(--u)); line-height: calc(40 * var(--u)); }
.pr .hl { color: var(--lime-ink); }
.pr .dim { color: var(--muted); }
.pr-lede { margin-top: calc(18 * var(--u)); max-width: calc(560 * var(--u)); font-size: calc(22 * var(--u)); line-height: calc(32 * var(--u)); letter-spacing: -.01em; color: var(--muted); text-wrap: pretty; }
.pr-note { margin-top: calc(20 * var(--u)); font-size: calc(16 * var(--u)); line-height: calc(24 * var(--u)); font-weight: 500; color: var(--text); }
.pr-k { display: inline-flex; align-items: center; gap: calc(8 * var(--u)); font-size: calc(12 * var(--u)); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); }
.pr-k::before { content: ""; width: calc(16 * var(--u)); height: 1px; background: var(--divider); }
.pr-k + .pr-h1, .pr-k + .pr-h2 { margin-top: calc(20 * var(--u)); }

/* ---------- CTAs: exactly two labels, all the way down ---------- */
.pr-ctas { display: flex; flex-wrap: wrap; align-items: center; gap: calc(14 * var(--u)); margin-top: calc(40 * var(--u)); }
.pr .btn .i { width: calc(22 * var(--u)); height: calc(22 * var(--u)); }
.pr .wa { width: calc(22 * var(--u)); height: calc(22 * var(--u)); flex: none; }

/* ---------- sections ---------- */
.pr-sec { position: relative; padding: calc(112 * var(--u)) var(--pad); }
.pr-sec + .pr-sec { border-top: 1px solid var(--rule); }
.pr-head { max-width: calc(820 * var(--u)); }
.pr-head.mid { margin-inline: auto; text-align: center; }
.pr-head.mid .pr-lede { margin-inline: auto; }
.pr-head.mid .pr-k::before { display: none; }
.pr-grid-wrap { margin-top: calc(56 * var(--u)); }
.pr-sec.soft { isolation: isolate; }
.pr-sec.soft::before { content: ""; position: absolute; inset: 0 auto 0 50%; width: 100vw; transform: translateX(-50%); background: #fafaf8; z-index: -1; }
.pr-sec.soft::after { content: ""; position: absolute; top: 0; bottom: 0; left: -1px; right: -1px; border-left: 1px solid var(--rule); border-right: 1px solid var(--rule); pointer-events: none; }

/* ---------- hero ---------- */
.pr-hero { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); column-gap: calc(80 * var(--u)); align-items: center; padding: calc(112 * var(--u)) var(--pad) calc(104 * var(--u)); }
.pr-hero .pr-h1 { max-width: calc(620 * var(--u)); }
.pr-hero__line { margin-top: calc(24 * var(--u)); font-size: calc(17 * var(--u)); font-weight: 600; letter-spacing: -.01em; color: var(--text); }
.pr-hero__art { position: relative; }
.pr-hero__art img { width: 100%; height: auto; aspect-ratio: 5 / 6; object-fit: cover; object-position: 20% 42%; border-radius: var(--r-card); }
.pr-badge { position: absolute; z-index: 2; left: calc(-34 * var(--u)); bottom: calc(40 * var(--u)); display: grid; gap: calc(4 * var(--u)); padding: calc(18 * var(--u)) calc(22 * var(--u)); border: 1px solid var(--rule); border-radius: var(--r); background: #fff; box-shadow: var(--shadow); }
.pr-badge b { font-family: var(--font-head); font-size: calc(30 * var(--u)); line-height: 1.1; font-weight: 500; letter-spacing: -.03em; }
.pr-badge span { font-size: calc(13.5 * var(--u)); color: var(--muted); }

/* ---------- the module grid ---------- */
.pr-mods { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: calc(14 * var(--u)); }
.pr-card { display: grid; align-content: start; gap: calc(10 * var(--u)); padding: calc(22 * var(--u)); border: 1px solid var(--rule); border-radius: var(--r-card); background: #fff; transition: border-color .2s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease); }
.pr-card:hover { border-color: var(--lime-ico); box-shadow: var(--shadow); transform: translateY(calc(-2 * var(--u))); }
.pr-card__ic { display: grid; place-items: center; width: calc(38 * var(--u)); height: calc(38 * var(--u)); border-radius: calc(10 * var(--u)); background: var(--grey); color: var(--text); }
.pr-card b { font-size: calc(17 * var(--u)); font-weight: 600; letter-spacing: -.02em; }
.pr-card p { font-size: calc(14 * var(--u)); line-height: calc(20 * var(--u)); color: var(--muted); }
/* the last card carries the expansion, so it carries the lime */
.pr-card.more { border-color: var(--lime-ico); background: var(--lime-soft); }
.pr-card.more .pr-card__ic { background: var(--lime); color: var(--ink); }
.pr-card.more b { font-family: var(--font-head); font-size: calc(26 * var(--u)); font-weight: 500; letter-spacing: -.03em; }
.pr-card.more p { color: var(--lime-ink); }
.pr-line { margin-top: calc(36 * var(--u)); font-family: var(--font-head); font-size: calc(24 * var(--u)); line-height: calc(32 * var(--u)); font-weight: 500; letter-spacing: -.03em; }

/* ---------- channels ---------- */
.pr-chans { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: calc(14 * var(--u)); }
.pr-chan { display: grid; align-content: start; gap: calc(10 * var(--u)); padding: calc(22 * var(--u)); border: 1px solid var(--rule); border-radius: var(--r-card); background: #fff; transition: border-color .2s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease); }
.pr-chan:hover { border-color: var(--lime-ico); box-shadow: var(--shadow); transform: translateY(calc(-2 * var(--u))); }
.pr-chan__ic { display: grid; place-items: center; width: calc(38 * var(--u)); height: calc(38 * var(--u)); border-radius: calc(10 * var(--u)); background: var(--grey); }
.pr-chan__ic svg { width: calc(20 * var(--u)); height: calc(20 * var(--u)); display: block; }
.pr-chan b { font-size: calc(17 * var(--u)); font-weight: 600; letter-spacing: -.02em; }
.pr-chan p { font-size: calc(14 * var(--u)); line-height: calc(20 * var(--u)); color: var(--muted); }
.pr-chans__foot { margin-top: calc(48 * var(--u)); text-align: center; font-family: var(--font-head); font-size: calc(32 * var(--u)); line-height: calc(41 * var(--u)); font-weight: 500; letter-spacing: -.03em; }

/* ---------- your setup ---------- */
.pr-setup { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: calc(56 * var(--u)); row-gap: calc(40 * var(--u)); }
.pr-setup > div { display: grid; align-content: start; gap: calc(9 * var(--u)); padding-top: calc(22 * var(--u)); border-top: 1px solid var(--rule); }
.pr-setup .i { color: var(--lime-ink); }
.pr-setup b { font-size: calc(19 * var(--u)); font-weight: 600; letter-spacing: -.02em; }
.pr-setup p { font-size: calc(15.5 * var(--u)); line-height: calc(23 * var(--u)); color: var(--muted); }

/* ---------- the pricing statement ---------- */
.pr-quote { max-width: calc(980 * var(--u)); margin: calc(48 * var(--u)) auto 0; padding: calc(48 * var(--u)); border: 1px solid var(--lime-ico); border-radius: calc(20 * var(--u)); background: var(--lime-soft); text-align: center; }
.pr-quote p { font-family: var(--font-head); font-size: calc(34 * var(--u)); line-height: calc(45 * var(--u)); font-weight: 500; letter-spacing: -.03em; text-wrap: balance; }
.pr-quote .pr-ctas { justify-content: center; }
.pr-quote small { display: block; margin-top: calc(26 * var(--u)); font-size: calc(15 * var(--u)); color: var(--muted); }
.pr-no { display: flex; flex-wrap: wrap; justify-content: center; gap: calc(10 * var(--u)); margin-top: calc(36 * var(--u)); }
.pr-no span { display: inline-flex; align-items: center; gap: calc(8 * var(--u)); padding: calc(7 * var(--u)) calc(14 * var(--u)); border: 1px solid var(--rule); border-radius: 999px; background: #fff; font-size: calc(14 * var(--u)); font-weight: 500; color: var(--muted); }
.pr-no span::before { content: ""; width: calc(12 * var(--u)); height: 1px; background: var(--divider); }

/* ---------- how it works ---------- */
.pr-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(16 * var(--u)); }
.pr-step { display: grid; align-content: start; gap: calc(12 * var(--u)); padding: calc(30 * var(--u)) calc(26 * var(--u)); border: 1px solid var(--rule); border-radius: var(--r-card); background: #fff; }
.pr-step .n { font-family: var(--font-head); font-size: calc(56 * var(--u)); line-height: 1; font-weight: 500; letter-spacing: -.04em; color: var(--rule); font-variant-numeric: tabular-nums; }
.pr-step:first-child .n { color: var(--lime-ico); }
.pr-step b { font-size: calc(21 * var(--u)); font-weight: 600; letter-spacing: -.025em; }
.pr-step p { font-size: calc(15.5 * var(--u)); line-height: calc(23 * var(--u)); color: var(--muted); }

/* ---------- FAQ ---------- */
.pr-faq { max-width: calc(880 * var(--u)); margin-top: calc(48 * var(--u)); border-top: 1px solid var(--rule); }
.pr-faq details { border-bottom: 1px solid var(--rule); }
.pr-faq summary { display: flex; align-items: center; gap: calc(18 * var(--u)); padding: calc(24 * var(--u)) 0; cursor: pointer; list-style: none; font-family: var(--font-head); font-size: calc(22 * var(--u)); line-height: calc(29 * var(--u)); font-weight: 500; letter-spacing: -.028em; transition: color .15s ease; }
.pr-faq summary::-webkit-details-marker { display: none; }
.pr-faq summary:hover { color: var(--lime-ink); }
.pr-faq summary::after { content: ""; flex: none; width: calc(11 * var(--u)); height: calc(11 * var(--u)); margin-left: auto; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg) translate(calc(-2 * var(--u)), calc(-2 * var(--u))); transition: transform .25s var(--ease); }
.pr-faq details[open] summary::after { transform: rotate(-135deg); }
.pr-faq p { padding: 0 calc(48 * var(--u)) calc(26 * var(--u)) 0; max-width: calc(720 * var(--u)); font-size: calc(17 * var(--u)); line-height: calc(27 * var(--u)); color: var(--prose, #4d4d4d); }

/* ---------- final CTA ---------- */
.pr-cta { position: relative; isolation: isolate; padding: calc(130 * var(--u)) var(--pad); border-top: 1px solid var(--rule); text-align: center; }
.pr-cta::before { content: ""; position: absolute; z-index: -1; left: 50%; top: calc(40 * var(--u)); width: calc(620 * var(--u)); height: calc(620 * var(--u)); transform: translateX(-50%); border-radius: 50%; background: var(--lime-soft); filter: blur(calc(40 * var(--u))); opacity: .85; }
.pr-cta .pr-h1 { max-width: calc(980 * var(--u)); margin-inline: auto; }
.pr-cta .pr-lede { max-width: calc(620 * var(--u)); margin-inline: auto; }
.pr-cta .pr-ctas { justify-content: center; }

/* ---------- motion ---------- */
.pr-js .pr-rev { opacity: 0; transform: translateY(calc(12 * var(--u))); }
.pr-js .pr-rev.is-in { opacity: 1; transform: none; transition: opacity .7s ease var(--d, 0ms), transform .7s var(--ease) var(--d, 0ms); }
@media (prefers-reduced-motion: reduce) {
  .pr *, .pr *::before, .pr *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; transition-delay: 0ms !important; }
}

/* =========================================================
   Below 1180 --u is 1px. Stack, don't shrink (guidelines §10).
   ========================================================= */
@media (max-width: 1179px) {
  .pr { --pad: 22px; }
  .pr .i { width: 18px; height: 18px; }
  .pr-h1 { font-size: clamp(32px, 7.2vw, 46px); line-height: 1.09; }
  .pr-h2 { font-size: clamp(26px, 5.4vw, 36px); line-height: 1.16; }
  .pr-h3 { font-size: 22px; line-height: 29px; }
  .pr-lede { font-size: 17px; line-height: 26px; max-width: none; }
  .pr-ctas { margin-top: 26px; }
  .pr-ctas .btn { flex: 1 1 auto; justify-content: center; }

  .pr-hero { grid-template-columns: 1fr; row-gap: 32px; padding: 44px 22px 56px; }
  .pr-hero__art { max-width: 460px; }
  .pr-hero__art img { aspect-ratio: 4 / 3; }
  .pr-badge { left: auto; right: 12px; bottom: 12px; padding: 14px 16px; }
  .pr-badge b { font-size: 24px; }

  .pr-sec { padding: 56px 22px; }
  .pr-grid-wrap { margin-top: 32px; }
  .pr-mods { grid-template-columns: 1fr 1fr; gap: 12px; }
  .pr-chans { grid-template-columns: 1fr 1fr; gap: 12px; }
  .pr-card, .pr-chan { padding: 18px; }
  .pr-card.more b { font-size: 22px; }
  .pr-line { margin-top: 26px; font-size: 19px; line-height: 27px; }
  .pr-chans__foot { margin-top: 32px; font-size: 22px; line-height: 30px; }

  .pr-setup { grid-template-columns: 1fr 1fr; column-gap: 24px; row-gap: 26px; }
  .pr-setup > div { padding-top: 16px; }

  .pr-quote { margin-top: 32px; padding: 26px 20px; border-radius: 18px; }
  .pr-quote p { font-size: 22px; line-height: 30px; }
  .pr-no { margin-top: 24px; gap: 8px; }
  .pr-no span { font-size: 13px; padding: 6px 11px; }

  .pr-steps { grid-template-columns: 1fr; gap: 12px; }
  .pr-step { padding: 22px 20px; }
  .pr-step .n { font-size: 40px; }

  .pr-faq { margin-top: 28px; }
  .pr-faq summary { font-size: 18px; line-height: 25px; padding: 18px 0; gap: 14px; }
  .pr-faq p { font-size: 16px; line-height: 25px; padding: 0 0 20px; }

  .pr-cta { padding: 72px 22px; }
  .pr-cta::before { width: 340px; height: 340px; filter: blur(50px); }
}

@media (max-width: 460px) {
  /* the setup items carry sentences, so they stack; the module and channel
     cards are one line each and stay two-up — ten stacked cards is the
     "excessive scrolling" the brief warns about */
  .pr-setup { grid-template-columns: 1fr; }
  .pr-ctas { flex-direction: column; align-items: stretch; }
}

@media (max-width: 379px) {
  .pr-mods, .pr-chans { grid-template-columns: 1fr; }
}