/* SINF landing · pricing section «الباقات» (owner-approved variant A of Downloads/sinf-proto/pricing3, full-preview staging 2026-10-20).
   Display only: prices, limits and VAT are the ones src/pricing.js computes; nothing here gates features or changes payment.
   Every rule is scoped to .px (the prototype's variant-B rules are dropped). Behaviour: landing/v3/pricing/px.js. */
.px{--g9:#162F21;--g8:#1B3425;--g7:#24452F;--g1:#E4EBE2;--paper:#F6F0E6;--paper2:#EEE6D8;--white:#fff;--cu:#B1763F;--cu-ink:#8E5A2B;--cu-soft:#D19A62;--cu-tint:#F3E4D2;
  --ink:#17271D;--muted:#5F665C;--line:#DDD3C3;--line2:#E8E0D2;--stage:#E7E1D6;--bezel:#1D1F1C;--on-dark-2:#C9D0C3;--on-dark-3:#AEB8A9;
  --disp:'Readex Pro','IBM Plex Sans Arabic',system-ui,sans-serif;--ui:'IBM Plex Sans Arabic','IBM Plex Sans',system-ui,sans-serif;--num:'IBM Plex Sans','IBM Plex Sans Arabic',sans-serif;
  background:var(--paper);color:var(--ink);font-family:var(--ui);padding:96px 0 104px;border-bottom:1px solid var(--line2);position:relative}
.px *,.px *::before,.px *::after{box-sizing:border-box}
.px .w{max-width:1200px;margin:0 auto;padding:0 20px}
.px h2,.px h3,.px p{margin:0}
.px .disp{font-family:var(--disp);font-weight:600;text-wrap:balance}
.px .eyebrow{display:inline-flex;align-items:center;gap:9px;font-size:14px;font-weight:600;color:var(--cu-ink)}
.px .eyebrow i{width:7px;height:7px;border-radius:50%;background:var(--cu)}
.px .h2{font-size:clamp(30px,4vw,46px);line-height:1.28;color:var(--g9)}
.px .h2 em{font-style:normal;color:var(--cu-ink)}
.px .lead{font-size:17px;line-height:1.75;color:var(--muted);max-width:560px}
.px .btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:50px;padding:0 22px;border-radius:12px;font-weight:600;font-size:15.5px;text-decoration:none;white-space:nowrap;border:1px solid var(--g8);transition:background .15s,border-color .15s,color .15s}
.px .btn-p{background:var(--g8);color:var(--paper)}
.px .btn-p:hover{background:var(--g7);border-color:var(--g7)}
.px .btn-s{background:var(--white);color:var(--g9);border-color:var(--line)}
.px .btn-s:hover{border-color:var(--g8)}
.px .flip{transform:scaleX(-1)}
.px :focus-visible{outline:2px solid var(--cu);outline-offset:3px;border-radius:8px}
.px .num{font-family:var(--num);font-variant-numeric:tabular-nums}
.px .ck{flex:none;width:18px;height:18px;margin-top:3px;color:var(--cu)}
.px .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* phone thumbnail (real published SINF test menus) */

/* ---------------- shared: item-count helper ---------------- */

/* ---------------- variant A: columns crossed by a shared band ---------------- */
.px .pa .head{display:flex;justify-content:space-between;align-items:flex-end;gap:32px 48px;flex-wrap:wrap;margin-bottom:44px}
.px .pa .head > div:first-child{display:flex;flex-direction:column;gap:16px;max-width:640px}
.px .pa .grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:20px}
.px .pa .meta{padding:20px 26px 22px;display:flex;flex-direction:column;gap:10px}
.px .pa .price{display:flex;align-items:baseline;gap:8px}
.px .pa .price b{font-family:var(--disp);font-size:52px;line-height:1;font-weight:600;color:var(--g9);letter-spacing:-.01em}
.px .pa .price span{font-weight:600;font-size:17px;color:var(--g9)}
.px .pa .price small{font-size:13.5px;color:var(--muted);margin-inline-start:4px}
.px .pa .who{font-size:15px;line-height:1.65;color:var(--muted);min-height:1.65em;margin-bottom:4px}

@media (max-width:999px){
  .px{padding:64px 0 72px}
  .px .pa .head{margin-bottom:28px}
  .px .pa .grid{grid-template-columns:1fr;row-gap:0}
  .px .pa .meta{padding:18px 18px 18px;gap:10px}
  .px .pa .price b{font-size:44px}
  .px .pa .who{min-height:0;font-size:14.5px}
}
@media (min-width:1000px){.px .pa .meta .btn{width:100%}}
@media (max-width:999px){.px .pa .meta .btn,.px .pa .meta .trust{display:none}}
@media (max-width:999px){.px .pa .grid > *{order:var(--o,0);grid-column:auto}}
@media (max-width:599px){
  .px{padding:48px 0 60px}
  .px .h2{font-size:27px;line-height:1.38}
  .px .lead{font-size:15.5px;line-height:1.7}
  .px .pa .head > div:first-child{gap:12px}
}

/* ---------------- pricing3 additions ---------------- */
.px.px-en{--ui:'IBM Plex Sans','IBM Plex Sans Arabic',system-ui,sans-serif;--disp:'Readex Pro','IBM Plex Sans',system-ui,sans-serif}
.px.px-en .disp{letter-spacing:-.015em}
.px.px-en .h2{line-height:1.15}
.px .pa .head > div:first-child{max-width:680px}
.px.px-en .flip{transform:none}
@media (min-width:1000px){.px .pa .who{min-height:3.3em}}

/* ---------------- owner pass 2026-10-31: one self-contained card per package; the middle one is the green featured card ---------------- */
.px .pa .grid{align-items:stretch;column-gap:22px}
.px .pa .card{background:var(--white);border:1px solid var(--line2);border-radius:22px;overflow:hidden;display:flex;flex-direction:column;position:relative}
.px .pa .card .meta{flex:1;display:flex;flex-direction:column;padding:22px 26px 26px;gap:12px}
.px .pa .card .who{min-height:3.3em;margin-bottom:0}
.px .pa .feats{list-style:none;margin:6px 0 8px;padding:16px 0 0;border-top:1px dashed var(--line);display:flex;flex-direction:column;gap:11px;flex:1}
.px .pa .feats li{display:flex;gap:10px;font-size:14.5px;line-height:1.55;color:var(--ink)}
.px .pa .feats li:first-child,.px .pa .feats li[data-testid=px-edits]{font-weight:600;color:var(--g9)}
.px .pa .card .btn{width:100%}
.px .btn-f{background:var(--paper);color:var(--g9);border-color:var(--paper)}
.px .btn-f:hover{background:#fff}
/* featured (middle) package: green, calm, no extra badges */
.px .pa .card.feat{background:var(--g9);border-color:var(--g9);color:var(--paper);box-shadow:0 30px 50px -34px rgba(22,47,33,.85)}
.px .pa .card.feat .nm h3,.px .pa .card.feat .price b,.px .pa .card.feat .price span{color:var(--paper)}
.px .pa .card.feat .price small,.px .pa .card.feat .who,.px .pa .card.feat .trust{color:var(--on-dark-2)}
.px .pa .card.feat .feats{border-top-color:rgba(246,240,230,.2)}
.px .pa .card.feat .feats li{color:var(--paper)}
.px .pa .card.feat .feats li:first-child,.px .pa .card.feat .feats li[data-testid=px-edits]{color:#fff}
.px .pa .card.feat .ck{color:var(--cu-soft)}
.px .pa .card.feat :focus-visible{outline-color:var(--cu-soft)}
@media (min-width:1000px){.px .pa .card.feat{transform:translateY(-10px);margin-bottom:-10px}}
@media (max-width:999px){
  .px .pa .grid{grid-template-columns:1fr;row-gap:18px}
  .px .pa .card{display:flex;flex-direction:column}
  .px .pa .card .meta{padding:18px 18px 22px}
  .px .pa .card .meta .btn,.px .pa .card .meta .trust{display:inline-flex}
  .px .pa .card .who{min-height:0}
}

/* ---------------- owner pass 2 2026-10-31: compact cards (no phone stage, no notes, no compare) ---------------- */
.px .pa .head{margin-bottom:34px}
.px .pa .card .meta{padding:26px 26px 26px;gap:10px}
.px .pa .card .meta h3{font-family:var(--disp);font-weight:600;font-size:22px;color:var(--g9)}
.px .pa .card.feat .meta h3{color:var(--paper)}
.px .pa .card .price b{font-size:46px}
.px .pa .card .who{min-height:0;font-size:14.5px}
.px .pa .feats{margin:8px 0 12px;padding-top:14px;gap:9px}
.px .pa .feats li{font-size:14px;line-height:1.5}
.px .pa .feats li .ck{margin-top:2px}
.px .pa .feats li:first-child,.px .pa .feats li[data-testid=px-edits]{font-weight:600}
@media (min-width:1000px){.px .pa .card.feat{transform:none;margin-bottom:0;box-shadow:0 18px 30px -24px rgba(22,47,33,.7)}}
@media (max-width:999px){.px .pa .grid{row-gap:14px}.px .pa .card .meta{padding:20px 18px 20px}}

/* tablet: stacked cards stay a readable width and centred (three columns only from 1000px) */
@media (min-width:600px) and (max-width:999px){.px .pa .grid{max-width:620px;margin-inline:auto}}