/* ══════════════════════════════════════════════════════════════════════════
   /pricing — premium layer (2026-10-05, owner: "ابدع فيها واظبطها").
   Visual only: the plans, the monthly/annual toggle (em-landing.js), the
   comparison table and the FAQ keep their markup, data and behaviour.
   Base: home.css (hm-*), loaded first. Scoped to .pr. Gold leads; neutral
   depth; logical properties; everything stops under reduced motion.
   ══════════════════════════════════════════════════════════════════════════ */
.pr .pr-hero{ overflow:hidden; padding-block:clamp(32px,4.5vw,64px) clamp(24px,3vw,40px); }
.pr .pr-hero .em-container{ position:relative; z-index:1; }
.pr .em-sec-head{ text-align:center; }
/* 2026-10-19: lighter and smaller — two lines, the owner's ≤500 weight */
.pr-h1{ margin:0; font-size:clamp(30px,3.7vw,52px); font-weight:500; line-height:1.15; letter-spacing:-.01em; }
[dir="rtl"] .pr-h1, .pr-h1:lang(ar){ line-height:1.35; letter-spacing:0; }
.pr-h1 .hm-w{ animation:hm-rise .9s cubic-bezier(.2,.8,.2,1) backwards; }
.pr-h1 .hm-w:nth-of-type(2){ animation-delay:.08s; } .pr-h1 .hm-gold .hm-w:nth-child(1){ animation-delay:.18s; } .pr-h1 .hm-gold .hm-w:nth-child(2){ animation-delay:.26s; } .pr-h1 .hm-gold .hm-w:nth-child(3){ animation-delay:.34s; }
.pr .em-sec-head .em-lead{ max-width:52rem; margin-inline:auto; text-wrap:balance; }

/* the monthly / annual switch — a gold pill slides between the two */
.pr .em-price__toggle-wrap{ display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:12px; margin-top:24px; }
/* countries — a segmented control on the same row as the billing cycle */
.pr-markets{ display:inline-flex; flex-wrap:wrap; justify-content:center; gap:4px; padding:5px; border-radius:99px; background:var(--hm-card); border:1px solid var(--hm-line); }
.pr-market{ display:inline-flex; align-items:center; gap:6px; padding:9px 14px; border-radius:99px; font-size:14px; font-weight:500; text-decoration:none; color:var(--em-muted); transition:background .2s,color .2s; }
.pr-market:hover{ color:var(--em-text); }
.pr-market.is-active{ background:color-mix(in srgb,var(--hm-gold) 16%,transparent); color:var(--em-gold-ink,var(--hm-gold)); }
.pr .em-price__toggle{ position:relative; display:inline-flex; padding:5px; gap:0; border-radius:99px; background:var(--hm-card); border:1px solid var(--hm-line); }
.pr .em-price__toggle::before{ content:''; position:absolute; inset-block:5px; inset-inline-start:5px; width:calc(50% - 5px); border-radius:99px;
    background:var(--hm-gold); transition:transform .45s cubic-bezier(.2,.9,.3,1.15); }
.pr .em-price__toggle:has(.em-price__mode:nth-child(2).is-active)::before{ transform:translateX(calc(100% * var(--pr-dir,1))); }
[dir=rtl] .pr .em-price__toggle{ --pr-dir:-1; }
.pr .em-price__mode{ position:relative; z-index:1; flex:1 1 0; min-width:150px; display:inline-flex; align-items:center; justify-content:center; gap:8px;
    padding:11px 22px; border:0; border-radius:99px; background:transparent; font:inherit; font-size:14px; font-weight:700; color:var(--em-muted); cursor:pointer; transition:color .3s; }
.pr .em-price__mode.is-active{ color:var(--em-gold-ink); background:transparent; box-shadow:none; }
.pr .em-price__save{ white-space:nowrap; padding:2px 8px; border-radius:99px; font-size:11.5px; font-weight:800; color:color-mix(in srgb,var(--hm-good) 78%,var(--em-text)); background:color-mix(in srgb,var(--hm-good) 15%,transparent); }
.pr .em-price__mode.is-active .em-price__save{ color:var(--em-gold-ink); background:color-mix(in srgb,var(--em-gold-ink) 22%,transparent); }

/* what every plan has */
.pr-incl{ list-style:none; margin:18px auto 0; padding:0; display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:8px; max-width:62rem; }
.pr-incl li{ display:inline-flex; align-items:center; gap:7px; padding:6px 12px; border-radius:99px; font-size:13px; font-weight:500;
    background:var(--hm-card); border:1px solid var(--hm-line); color:var(--em-text); }
.pr-incl svg{ width:15px; height:15px; color:var(--hm-gold); }
.pr-incl li.pr-incl__lbl{ background:none; border:0; padding-inline:4px; color:var(--em-muted); }
.pr-incl li.pr-incl__more{ background:none; border-style:dashed; }
.pr-incl__more a{ color:var(--hm-gold); text-decoration:none; font-weight:500; }

/* ── the plan cards ── */
.pr .em-price__grid{ gap:20px; margin-top:clamp(24px,3vw,40px); align-items:stretch; }
.pr .em-price__card{ position:relative; isolation:isolate; overflow:hidden; display:flex; flex-direction:column; gap:12px; padding:28px 24px; border-radius:28px;
    background:var(--hm-card); border:1px solid var(--hm-line); box-shadow:none; transition:transform .45s cubic-bezier(.2,.8,.2,1), border-color .3s; }
.pr .em-price__card:hover{ transform:translateY(-6px); border-color:color-mix(in srgb,var(--hm-gold) 40%,var(--hm-line)); }
.pr-ico{ width:48px; height:48px; display:grid; place-items:center; border-radius:15px; color:var(--hm-gold); background:color-mix(in srgb,var(--hm-gold) 13%,transparent); }
.pr-ico svg{ width:22px; height:22px; } .pr-ico.is-pop{ color:var(--em-gold-ink); background:var(--hm-gold); }
.pr .em-price__name{ margin:4px 0 0; font-size:18.5px; font-weight:800; }
.pr .em-price__desc{ margin:0; min-height:3.2em; font-size:13.5px; line-height:1.7; color:var(--em-muted); }
.pr .em-price__amount{ display:flex; align-items:baseline; flex-wrap:wrap; gap:6px; padding-top:14px; border-top:1px dashed var(--hm-line); }
.pr .em-price__val{ font-size:clamp(33px,2.98vw,43px); font-weight:800; line-height:1; letter-spacing:-.02em; }
.pr .em-price__cur{ font-size:14px; font-weight:700; color:var(--em-muted); }
.pr .em-price__per{ font-size:13.5px; color:var(--em-muted); }
.pr .em-price__note{ margin:0; font-size:12.5px; color:var(--em-muted); min-height:1.6em; }
.pr .em-price__card > .em-btn{ width:100%; justify-content:center; margin-block:6px 6px; min-height:48px; border-radius:14px; }
.pr .em-price__feats{ margin:4px 0 0; }
.pr .em-price__feat svg{ color:var(--hm-good); }
.pr .em-price__more{ align-self:flex-start; font-weight:700; color:var(--hm-gold); }
/* the most-chosen plan: lifted, with a gold light running round its border */
.pr .em-price__card--pop{ border-color:transparent; transform:translateY(-10px); }
.pr .em-price__card--pop:hover{ transform:translateY(-14px); }
.pr .em-price__card--pop::before{ content:''; position:absolute; z-index:-2; inset:-60%; background:conic-gradient(from 0deg, transparent 0 68%, var(--hm-gold) 84%, transparent 100%);
    animation:hm-spin 6s linear infinite; }
.pr .em-price__card--pop::after{ content:''; position:absolute; z-index:-1; inset:1.5px; border-radius:26.5px; width:auto; height:auto; opacity:1;
    background:linear-gradient(170deg, color-mix(in srgb,var(--hm-gold) 12%,var(--hm-card)), var(--hm-card) 45%); }
.pr .em-price__card--pop .em-price__val{ color:var(--hm-gold); }
.pr .em-price__tag{ position:absolute; inset-block-start:16px; inset-inline-end:16px; padding:5px 12px; border-radius:99px; font-size:12px; font-weight:800;
    color:var(--em-gold-ink); background:var(--hm-gold); }
/* the price just changed (pricing.js) */
.pr .em-price__amount.is-tick{ animation:pr-tick .5s cubic-bezier(.2,.9,.3,1.3); }
@keyframes pr-tick{ from{ opacity:.3; transform:translateY(8px); } to{ opacity:1; transform:none; } }

/* ── comparison table ── */
.pr .em-cmp{ border-radius:24px; border:1px solid var(--hm-line); background:var(--hm-card); overflow:auto; }
.pr .em-cmp__table thead th{ position:sticky; top:0; z-index:1; background:var(--hm-card); padding-block:18px; }
.pr .em-cmp__table th, .pr .em-cmp__table td{ border-color:var(--hm-line); }
.pr .em-cmp__table tbody tr{ transition:background-color .2s; }
.pr .em-cmp__table tbody tr:hover{ background:color-mix(in srgb,var(--hm-gold) 5%,transparent); }
.pr .em-cmp__table .is-pop{ background:color-mix(in srgb,var(--hm-gold) 7%,transparent); }
.pr .em-cmp__table thead .is-pop{ background:color-mix(in srgb,var(--hm-gold) 12%,var(--hm-card)); }
.pr .em-cmp__pname{ font-weight:800; } .pr .em-cmp__pprice{ color:var(--hm-gold); }
.pr .em-cmp__yes svg{ color:var(--hm-good); } .pr .em-cmp__no svg{ color:color-mix(in srgb,var(--em-muted) 60%,transparent); }

/* ── assurances ── */
.pr .em-assure{ gap:16px; }
.pr .em-assure__item{ align-items:flex-start; gap:14px; padding:22px; border-radius:22px; background:var(--hm-card); border:1px solid var(--hm-line);
    transition:transform .35s cubic-bezier(.2,.8,.2,1), border-color .3s; }
.pr .em-assure__item:hover{ transform:translateY(-4px); border-color:color-mix(in srgb,var(--hm-gold) 40%,var(--hm-line)); }
.pr-assure-ico{ width:46px; height:46px; flex:none; display:grid; place-items:center; border-radius:14px; color:var(--hm-gold); background:color-mix(in srgb,var(--hm-gold) 13%,transparent); }
.pr-assure-ico svg{ width:22px; height:22px; }

@media (max-width:640px){ .pr .em-price__mode{ min-width:120px; padding:10px 14px; } .pr .em-price__card--pop{ transform:none; }
  .pr-incl li{ font-size:12.5px; }
  /* one row that scrolls sideways instead of five stacked rows (2026-10-19) */
  .pr-incl{ flex-wrap:nowrap; overflow-x:auto; justify-content:flex-start; margin-inline:-16px; padding:2px 16px 6px; scrollbar-width:none; -webkit-overflow-scrolling:touch; }
  .pr-incl::-webkit-scrollbar{ display:none; }
  .pr-incl li{ flex:none; } }
@media (prefers-reduced-motion: reduce){ .pr *, .pr *::before, .pr *::after{ animation:none !important; transition:none !important; } }