/* =========================================================
   Ori X Pay  -  Pricing page
   Header / buttons / footer / hero / faq = paynova-home.css + paynova-features.css
   Desktop sizes are written as  N u  (calc(1 * var(--u)) = 1px on the 1024px design).
   ========================================================= */
body.pr{background:#fbf9f1}

/* ---------- plans ---------- */
.pr-plans{background:#fbf9f1;padding:calc(30 * var(--u)) 0 calc(30 * var(--u))}
.pr-head{text-align:center}
.pr-head .ft-tag{margin:0 auto}
.pr-head .ft-h2-big{text-align:center}
.pr-sub{max-width:calc(480 * var(--u));margin:calc(8 * var(--u)) auto 0;font-size:calc(9.4 * var(--u));line-height:calc(15 * var(--u));color:#45586b;text-align:center}
.pr-sub-l{text-align:left;margin:calc(5 * var(--u)) 0 0;max-width:none}
.pr-grid{display:grid;grid-template-columns:repeat(var(--n,4),minmax(0,1fr));gap:calc(14 * var(--u));margin:calc(26 * var(--u)) auto 0;max-width:calc(var(--n,4) * 212 * var(--u));align-items:stretch}
.pr-card{position:relative;display:flex;flex-direction:column;background:#fffdf8;border:1px solid #eadfca;border-radius:calc(12 * var(--u));padding:calc(17 * var(--u)) calc(15 * var(--u)) calc(15 * var(--u));box-shadow:0 calc(2 * var(--u)) calc(10 * var(--u)) rgba(130,95,30,.05);transition:transform .25s ease,box-shadow .25s ease,opacity .6s ease}
.pr-card:hover{transform:translateY(calc(-3 * var(--u)));box-shadow:0 calc(14 * var(--u)) calc(30 * var(--u)) calc(-14 * var(--u)) rgba(130,95,30,.4)}
.pr-card h3{font:700 calc(12.5 * var(--u))/calc(16 * var(--u)) var(--font-h);color:#0b1219}
.pr-valid{font-size:calc(7.8 * var(--u));line-height:calc(11 * var(--u));color:#7a8794;margin-top:calc(2 * var(--u))}
.pr-price{display:flex;align-items:flex-start;gap:calc(2 * var(--u));margin-top:calc(11 * var(--u));color:#0b1219}
.pr-cur{font:700 calc(11 * var(--u))/1 var(--font-h);margin-top:calc(4 * var(--u))}
.pr-price strong{font:800 calc(28 * var(--u))/1 var(--font-h);letter-spacing:calc(-.8 * var(--u))}
.pr-per{font-size:calc(7.8 * var(--u));line-height:calc(11 * var(--u));color:#b87a1c;font-weight:600;margin-top:calc(6 * var(--u))}
.pr-chips{display:flex;flex-wrap:wrap;gap:calc(4 * var(--u));margin-top:calc(9 * var(--u))}
.pr-chips span{font-size:calc(6.8 * var(--u));line-height:1;font-weight:600;background:#f6ecd8;color:#6b4a12;border-radius:calc(5 * var(--u));padding:calc(3.5 * var(--u)) calc(6 * var(--u))}
.pr-list{display:flex;flex-direction:column;gap:calc(6.5 * var(--u));margin:calc(12 * var(--u)) 0 calc(15 * var(--u));padding-top:calc(12 * var(--u));border-top:1px solid #efe5d1;flex:1}
.pr-list li{display:flex;align-items:center;gap:calc(6 * var(--u));font-size:calc(8 * var(--u));line-height:calc(11 * var(--u));color:#26323d}
.pr-list svg{width:calc(10.5 * var(--u));height:calc(10.5 * var(--u))}
.pr-list li.is-off{color:#a3aab1}
.hm .pr-btn{height:calc(27 * var(--u));font-size:calc(8.6 * var(--u));border-radius:calc(14 * var(--u));padding:0;width:100%}
.hm .pr-btn svg{width:calc(9 * var(--u));height:calc(9 * var(--u))}
.hm .pr-btn-line{border:1px solid #cdbf9f;color:#1b2630;background:transparent}
.hm .pr-btn-line:hover{background:#0b1219;color:#fff;border-color:#0b1219}

.pr-card.is-hot{background:#030d12;border-color:rgba(231,178,95,.65);box-shadow:0 calc(18 * var(--u)) calc(38 * var(--u)) calc(-16 * var(--u)) rgba(3,13,18,.75),0 0 0 1px rgba(231,178,95,.12)}
.pr-card.is-hot h3,.pr-card.is-hot .pr-price{color:#fff}
.pr-card.is-hot .pr-valid{color:#aeb6bd}
.pr-card.is-hot .pr-per{color:#f0c06c}
.pr-card.is-hot .pr-chips span{background:rgba(231,178,95,.14);color:#f3d8a3}
.pr-card.is-hot .pr-list{border-color:rgba(255,255,255,.12)}
.pr-card.is-hot .pr-list li{color:#e9ebed}
.pr-card.is-hot .pr-list li.is-off{color:#6f7a83}
.pr-card.is-hot .pr-list li.is-off svg{opacity:.35}
.pr-badge{position:absolute;top:calc(-8 * var(--u));left:50%;transform:translateX(-50%);background:linear-gradient(180deg,#f7dcaa,#dba55a);color:#1b1408;font:700 calc(6.8 * var(--u))/1 var(--font-h);letter-spacing:calc(.3 * var(--u));padding:calc(4.5 * var(--u)) calc(10 * var(--u));border-radius:999px;white-space:nowrap}

.pr-anim .pr-card{opacity:0;transform:translateY(calc(14 * var(--u)))}
.pr-anim .pr-card.is-in{opacity:1;transform:none}
.pr-anim .pr-card.is-in:hover{transform:translateY(calc(-3 * var(--u)))}

.pr-perks{display:flex;justify-content:center;flex-wrap:wrap;gap:calc(8 * var(--u)) calc(28 * var(--u));margin-top:calc(24 * var(--u))}
.pr-perks li{display:flex;align-items:center;gap:calc(6 * var(--u));font-size:calc(8.4 * var(--u));font-weight:500;color:#33424f}
.pr-perks svg{width:calc(12 * var(--u));height:calc(12 * var(--u));color:#c4801d;stroke-width:1.8}

/* ---------- compare ---------- */
.pr-compare{background:#fcfaf3;padding:calc(26 * var(--u)) 0 calc(32 * var(--u))}
.pr-table-wrap{margin-top:calc(14 * var(--u));background:#fffdf8;border:1px solid #eadfca;border-radius:calc(12 * var(--u));overflow-x:auto;box-shadow:0 calc(2 * var(--u)) calc(10 * var(--u)) rgba(130,95,30,.05)}
.pr-table{width:100%;border-collapse:collapse}
.pr-table th,.pr-table td{padding:calc(8 * var(--u)) calc(12 * var(--u));font-size:calc(8.2 * var(--u));line-height:calc(11 * var(--u));border-top:1px solid #f0e7d4;text-align:center;color:#26323d}
.pr-table thead th{border-top:0;background:#030d12;color:#fff;font:700 calc(9 * var(--u))/calc(12 * var(--u)) var(--font-h);padding:calc(10 * var(--u)) calc(12 * var(--u))}
.pr-table thead th:first-child{text-align:left}
.pr-table thead th.is-hot{background:linear-gradient(180deg,#f7dcaa,#dba55a);color:#1b1408}
.pr-table tbody th{text-align:left;font-weight:500;color:#26323d;background:#fffdf8;position:sticky;left:0}
.pr-table td.is-hot{background:#fff6e3}
.pr-row-main td{font:800 calc(11 * var(--u))/calc(14 * var(--u)) var(--font-h);color:#0b1219}
.pr-yes{display:inline-grid;place-items:center;width:calc(13 * var(--u));height:calc(13 * var(--u));border-radius:50%;background:#f6e3bd;color:#9a6410}
.pr-yes svg{width:calc(8 * var(--u));height:calc(8 * var(--u))}
.pr-no{color:#c3bba9}

/* ---------- hero art (desktop only so mobile rules of features css still apply) ---------- */
@media (min-width:900px){
  .pr-hero .ft-hero-art{width:calc(470 * var(--u));height:calc(262 * var(--u))}
  .pr-hero .ft-hero-art img{object-fit:contain}
}

/* ---------- mobile ---------- */
@media (max-width:899px){
  .pr-plans{padding:36px 0 26px}
  .pr-sub{font-size:14px;line-height:1.6;max-width:540px;margin-top:12px}
  .pr-sub-l{margin-top:10px}
  .pr-grid{grid-template-columns:minmax(0,1fr);max-width:420px;gap:28px;margin-top:36px}
  .pr-card{padding:26px 22px 22px;border-radius:18px}
  .pr-card h3{font-size:19px;line-height:1.3}
  .pr-valid{font-size:13px;line-height:1.4;margin-top:4px}
  .pr-price{margin-top:16px;gap:3px}.pr-cur{font-size:19px;margin-top:6px}.pr-price strong{font-size:42px}
  .pr-per{font-size:14px;line-height:1.4;margin-top:8px}
  .pr-chips{gap:6px;margin-top:14px}.pr-chips span{font-size:11.5px;padding:6px 10px;border-radius:8px}
  .pr-list{gap:12px;margin:18px 0 22px;padding-top:18px}.pr-list li{font-size:14px;line-height:1.35;gap:10px}.pr-list svg{width:17px;height:17px}
  .hm .pr-btn{height:50px;font-size:15px;border-radius:25px}.hm .pr-btn svg{width:16px;height:16px}
  .pr-badge{font-size:11.5px;padding:6px 14px;top:-13px}
  .pr-perks{display:grid;grid-template-columns:1fr 1fr;gap:14px 12px;margin-top:30px}.pr-perks li{font-size:13px;gap:8px}.pr-perks svg{width:18px;height:18px}
  .pr-compare{padding:30px 0 30px}
  .pr-table-wrap{margin-top:18px;border-radius:14px}
  .pr-table{min-width:560px}
  .pr-table th,.pr-table td{padding:11px 12px;font-size:13px;line-height:1.35}
  .pr-table thead th{font-size:14px;padding:13px 12px}
  .pr-row-main td{font-size:16px}
  .pr-yes{width:20px;height:20px}.pr-yes svg{width:12px;height:12px}
  .pr-anim .pr-card{transform:translateY(16px)}
}