/* /enroll: course pre-enrolment. Reuses the acct tokens and the consult card
   language; en- classes are scoped to the page body (.pg-enroll). */

.pg-enroll .en-hero{margin:8px 0 26px}
.pg-enroll .en-eyebrow{margin:0 0 6px; font-size:13px; font-weight:600; color:var(--brass); letter-spacing:.01em}
.pg-enroll .en-hero-cta{display:flex; flex-wrap:wrap; gap:10px; margin:18px 0 10px}
.pg-enroll .en-hero-note{margin:14px 0 0; font-size:14px; color:var(--muted)}

/* value block in the hero: hints the format, then invites a WhatsApp chat */
.pg-enroll .en-perks{margin:20px 0 2px; padding:16px 18px; border:1px solid var(--rule);
  border-radius:12px; background:var(--surface-2)}
.pg-enroll .en-perk-list{margin:0; padding:0; list-style:none; display:grid; gap:13px}
.pg-enroll .en-perk-list li{display:flex; gap:11px; align-items:flex-start; line-height:1.75; color:var(--ink-2)}
.pg-enroll .en-perk-list b{color:var(--ink)}
.pg-enroll .en-perk-list .ico{flex:none; width:22px; height:22px; margin-top:2px; color:var(--brass);
  stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
.pg-enroll .en-ask{display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px; margin-top:14px;
  padding-top:14px; border-top:1px solid var(--rule); font-size:14.5px; color:var(--ink-2)}
.pg-enroll .en-ask span{flex:1 1 220px; min-width:0}
.pg-enroll .en-ask .btn{flex:none}

.pg-enroll .en-intro{margin:0 0 24px; padding:14px 16px; border:1px solid var(--rule);
  border-inline-start:3px solid var(--brass); border-radius:10px; background:var(--surface-2);
  color:var(--ink-2); line-height:1.85}

.pg-enroll .en-sec{margin:0 0 32px; min-width:0}
.pg-enroll .en-h2{font-size:clamp(19px,2.6vw,23px); font-weight:700; margin:0 0 12px; color:var(--ink)}
.pg-enroll .en-h3{font-size:16.5px; font-weight:700; margin:22px 0 10px; color:var(--ink);
  display:flex; align-items:center; gap:10px}
.pg-enroll .en-p{margin:0 0 14px; line-height:1.9; color:var(--ink-2)}
.pg-enroll .en-num{display:inline-grid; place-items:center; width:26px; height:26px; flex:none;
  border-radius:50%; background:var(--brass); color:var(--ground); font-size:14px; font-weight:700}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .pg-enroll .en-num{color:var(--ground)}}
:root[data-theme="dark"] .pg-enroll .en-num{color:var(--ground)}

.pg-enroll .en-pts,.pg-enroll .en-out{margin:0; padding:0; list-style:none; display:grid; gap:10px}
.pg-enroll .en-pts li,.pg-enroll .en-out li{position:relative; padding-inline-start:22px; line-height:1.8; color:var(--ink-2)}
.pg-enroll .en-pts li::before,.pg-enroll .en-out li::before{content:""; position:absolute; inset-inline-start:2px;
  top:.68em; width:7px; height:7px; border-radius:50%; background:var(--brass)}
.pg-enroll .en-pts b,.pg-enroll .en-out b{color:var(--ink)}

.pg-enroll .en-syl-meta{margin:0 0 14px; font-size:14px}
.pg-enroll .en-mods{margin:0; padding:0; list-style:none; display:grid; gap:8px;
  grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr))}
.pg-enroll .en-mods li{display:flex; gap:12px; align-items:baseline; padding:10px 14px;
  border:1px solid var(--rule); border-radius:9px; background:var(--surface-2); color:var(--ink-2); font-size:14.5px}
.pg-enroll .en-mod-n{flex:none; font-family:var(--mo,monospace); font-size:13px; font-weight:700; color:var(--brass);
  font-variant-numeric:tabular-nums}

/* plan cards */
.pg-enroll .en-cards{display:grid; gap:14px; grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr))}
.pg-enroll .en-card{display:flex; flex-direction:column; gap:7px; text-align:start;
  padding:18px 18px 20px; border:1px solid var(--rule); border-radius:14px; background:var(--surface);
  color:var(--ink)}
.pg-enroll button.en-card{cursor:pointer; transition:border-color .16s, background .16s, box-shadow .16s}
.pg-enroll button.en-card:hover{border-color:var(--brass)}
.pg-enroll button.en-card[aria-pressed="true"]{border-color:var(--brass); background:var(--brass-soft);
  box-shadow:inset 0 0 0 1px var(--brass)}
.pg-enroll .en-card-feat{position:relative; border-color:color-mix(in srgb,var(--brass) 45%,var(--rule))}
.pg-enroll .en-card-feat::after{content:"الأفضل قيمةً"; position:absolute; top:-10px; inset-inline-end:16px;
  font-size:11.5px; font-weight:700; letter-spacing:.02em; padding:3px 9px; border-radius:20px;
  background:var(--brass); color:var(--ground)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .pg-enroll .en-card-feat::after{color:var(--ground)}}
:root[data-theme="dark"] .pg-enroll .en-card-feat::after{color:var(--ground)}
.pg-enroll .en-card-k{font-size:12px; font-weight:700; letter-spacing:.02em; color:var(--muted); text-transform:none}
.pg-enroll .en-card-t{font-weight:700; font-size:17px; line-height:1.5; color:var(--ink)}
.pg-enroll .en-card-p{font-size:22px; font-weight:800; color:var(--brass); margin-top:2px}
/* the struck price, slashed corner to corner: a level line-through runs along the
   Arabic-Indic zeros (mid-height dots) and turns ٥٠٠٬٠٠٠ into a dash; the diagonal
   crosses the row once and leaves the digits readable. --ink-2, not --muted: muted reads
   about 4.2:1 on the blue tint in the dark theme, under AA */
.pg-enroll .en-card-was,.pg-enroll .en-hero-promo s{display:inline-block; padding:0 3px;
  text-decoration:none; color:var(--ink-2); white-space:nowrap;
  background:linear-gradient(to top left, transparent calc(50% - .9px), currentColor calc(50% - .9px),
    currentColor calc(50% + .9px), transparent calc(50% + .9px))}
.pg-enroll .en-card-was{font-size:15px; font-weight:600; margin-inline-end:6px}
.pg-enroll .en-card-x{font-size:14px; color:var(--ink-2); line-height:1.75; overflow-wrap:anywhere}

/* promo pill (enroll_plans.badge_ar, the Winter Arc offer): a deeper shade of the Blue
   Team track colour, so it reads as a seasonal offer rather than another brass label and
   keeps white text above 4.5:1 */
.pg-enroll .en-promo{align-self:flex-start; display:inline-flex; align-items:center; gap:6px;
  font-size:12.5px; font-weight:700; line-height:1.4; padding:4px 11px; border-radius:20px;
  color:#fff; background:#2F6EA8}
.pg-enroll .en-promo .ico{flex:none; width:15px; height:15px; stroke:currentColor; fill:none;
  stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
.pg-enroll .en-hero-promo{display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; margin:16px 0 0;
  padding:10px 14px; border-radius:12px; border:1px solid color-mix(in srgb,#4B8AC6 42%,var(--rule));
  background:color-mix(in srgb,#4B8AC6 11%,var(--surface)); color:var(--ink-2); font-size:15px; line-height:1.7}
.pg-enroll .en-hero-promo .en-promo{align-self:center}
.pg-enroll .en-hero-promo-tx{min-width:0}
.pg-enroll .en-hero-promo b{color:var(--ink)}
/* words for screen readers only: "instead of" / "now" around the struck price */
.pg-enroll .en-sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0);
  clip-path:inset(50%); white-space:nowrap}
.pg-enroll .en-card-s{font-size:13px; color:var(--muted); margin-top:2px}
.pg-enroll button.en-card:focus-visible{outline:2px solid var(--brass); outline-offset:3px}
.pg-enroll .en-founder{margin:14px 0 0; line-height:1.8}

.pg-enroll .en-step{margin:22px 0 0}
.pg-enroll .en-signin a{font-weight:600}
.pg-enroll .en-form{display:grid; gap:16px; margin-top:6px}
.pg-enroll .en-count{text-align:start; font-variant-numeric:tabular-nums}

.pg-enroll .en-sum{padding-top:6px}
.pg-enroll .en-dl{display:grid; gap:8px; margin:0 0 16px}
.pg-enroll .en-dl > div{display:flex; flex-wrap:wrap; justify-content:space-between; gap:4px 16px;
  padding:10px 0; border-bottom:1px solid var(--rule)}
.pg-enroll .en-dl dt{color:var(--muted); font-size:14px}
.pg-enroll .en-dl dd{margin:0; font-weight:700; color:var(--ink); overflow-wrap:anywhere; min-width:0}
.pg-enroll .en-policy{margin:14px 0 0; padding-inline-start:20px; display:grid; gap:7px; line-height:1.8; font-size:14px}

.pg-enroll .en-done{min-width:0; overflow-wrap:anywhere; padding-top:4px}
.pg-enroll .en-done:focus{outline:none}
.pg-enroll .en-done:focus-visible{outline:2px solid var(--brass); outline-offset:4px; border-radius:6px}
.pg-enroll .en-done-lede{margin:0 0 14px; line-height:1.85; color:var(--ink-2)}
.pg-enroll .en-how{margin:16px 0; padding-inline-start:20px; display:grid; gap:12px; line-height:1.8}
.pg-enroll .en-paynum{font-weight:700}
.pg-enroll .en-copy-w,.pg-enroll .en-wa-w{margin-top:10px}
.pg-enroll .en-ref{font-weight:700; letter-spacing:.04em}
.pg-enroll .en-done-foot{margin:14px 0 0; font-size:15px}