/* =====================================================================
   Unifour - pricing page (pricing.html). Uses the tokens from css/kb.css.
   The hero is .p-hero rather than .u-hero so js/site.js adds no ads here.
   ===================================================================== */
.p-hero { background: radial-gradient(1200px 300px at 85% -10%, rgba(2,116,179,.16), transparent 60%),
  linear-gradient(180deg, #ffffff 0%, var(--u-soft) 100%); border-bottom: 1px solid var(--u-line);
  padding: 44px 0 40px; text-align: center; }
.p-hero .u-crumbs { font-size: 13px; color: var(--u-muted); margin-bottom: 14px; }
.p-hero .u-crumbs a { color: var(--u-muted); text-decoration: none; }
.p-hero .u-crumbs span { margin: 0 6px; opacity: .6; }
.p-hero h1 { font-family: var(--u-head); font-weight: 700; color: var(--u-navy); font-size: clamp(26px, 4vw, 40px);
  line-height: 1.2; margin: 10px auto 12px; }
.p-hero .u-lead { font-size: 17px; color: #475569; max-width: 640px; margin: 0 auto; line-height: 1.65; }

/* ---------- plan cards ---------- */
.p-plans { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; padding: 40px 15px 12px; align-items: stretch; }
@media (max-width: 1199px) { .p-plans { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 575px) { .p-plans { grid-template-columns: minmax(0, 1fr); } }
.p-plan { position: relative; display: flex; flex-direction: column; padding: 28px 24px 24px; }
.p-plan.p-pop { border: 2px solid var(--u-blue); box-shadow: 0 2px 4px rgba(15,35,60,.06), 0 16px 36px rgba(2,116,179,.16); }
.p-badge { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); background: var(--u-blue); color: #fff;
  font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; border-radius: 999px; padding: 5px 14px; white-space: nowrap; }
.p-badge.p-alt { background: var(--u-navy); }
.p-plan h2 { font-family: var(--u-head); font-weight: 700; color: var(--u-navy); font-size: 20px; margin: 0 0 6px; }
.p-plan .p-for { font-size: 14px; color: var(--u-muted); margin: 0 0 18px; min-height: 42px; line-height: 1.5; }
.p-price { display: flex; align-items: baseline; gap: 6px; margin-bottom: 4px; }
.p-price .p-cur { font-size: 18px; font-weight: 700; color: var(--u-navy); }
.p-price .p-amt { font-family: var(--u-head); font-size: 44px; font-weight: 700; color: var(--u-navy); line-height: 1; }
.p-price .p-per { font-size: 14px; color: var(--u-muted); }
.p-note { font-size: 13px; color: var(--u-muted); margin: 0 0 20px; }
.p-btn { display: block; text-align: center; border-radius: 999px; padding: 11px 18px; font-weight: 700; text-decoration: none !important;
  border: 1px solid var(--u-blue); color: var(--u-blue) !important; background: #fff; transition: all .15s; }
.p-btn:hover { background: var(--u-soft); }
.p-pop .p-btn { background: var(--u-blue); color: #fff !important; }
.p-pop .p-btn:hover { background: var(--u-blue-d); border-color: var(--u-blue-d); }
.p-feat { border-top: 1px solid var(--u-line); margin-top: 22px; padding-top: 18px; flex: 1; }
.p-feat h3 { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--u-navy); margin: 0 0 12px; }
.p-feat ul { list-style: none; padding: 0; margin: 0; }
.p-feat li { display: flex; gap: 10px; font-size: 14.5px; line-height: 1.5; padding: 5px 0; color: var(--u-ink); }
.p-feat li .fa { color: var(--u-green); padding-top: 3px; }
.p-feat li.p-tbd { color: var(--u-muted); font-style: italic; }
.p-feat li.p-tbd .fa { color: #cbd5e1; }

/* ---------- FAQ ---------- */
.p-faq { max-width: 820px; margin: 0 auto; padding: clamp(22px, 4vw, 36px); }
.p-faq h2 { font-family: var(--u-head); font-weight: 700; color: var(--u-navy); font-size: 24px; margin: 0 0 14px; }
.p-faq details { border-bottom: 1px solid var(--u-line); padding: 14px 0; }
.p-faq details:last-child { border-bottom: 0; }
.p-faq summary { font-weight: 600; color: var(--u-navy); cursor: pointer; }
.p-faq details p { margin: 10px 0 0; color: #475569; line-height: 1.7; }