/* =========================================================================
   assets/offers.css — PHASE 11.2O / 11.2O.1: the two purchase choices (index.html + result.html), shown once per page.
   Brand colours only. The bundle is emphasised by a thicker accent border, a tinted
   background, the «أفضل قيمة / Best value» badge (text + star icon — never colour alone)
   and the filled button; the report-only choice stays fully visible with its own button.
   ========================================================================= */
.hbdi-offer{ --ho-ink:#F5F3FF; --ho-muted:#C4B5FD; --ho-muted2:#AA9ED6; --ho-line:#2E2150; --ho-card:#130D28;
  --ho-accent:#A78BFA; --ho-primary:#7C3AED; --ho-green:#2ECC71; --ho-gold:#F4C443; color:var(--ho-ink); }
.hbdi-offer *{ box-sizing:border-box; }
.hbdi-offer .ho-nb{ white-space:nowrap; }
.hbdi-offer .ho-star{ width:15px; height:15px; fill:currentColor; flex:0 0 auto; }
.hbdi-offer .ho-badge{ display:inline-flex; align-items:center; gap:6px; background:var(--ho-gold); color:#1A1233; font-size:14px; font-weight:800;
  border-radius:999px; padding:4px 12px; line-height:1.4; }
/* ---- the two cards (11.2O.1: shown once, right after the result) ---- */
.ho-cards{ display:grid; grid-template-columns:1fr 1fr; gap:16px; align-items:stretch; }
.ho-card{ position:relative; display:flex; flex-direction:column; min-width:0; background:var(--ho-card); border:1.5px solid var(--ho-line);
  border-radius:18px; padding:22px 18px 18px; }
.ho-card.ho-best{ border:3px solid var(--ho-gold); background:linear-gradient(180deg,rgba(124,58,237,.24),var(--ho-card) 70%);
  box-shadow:0 18px 50px -24px rgba(124,58,237,.8); padding-top:30px; }
.ho-card .ho-badge{ position:absolute; top:-15px; inset-inline-start:16px; }
.ho-name{ font-size:19px; line-height:1.5; margin:0; font-weight:700; }
.ho-price{ font-family:"IBM Plex Sans",system-ui,sans-serif; font-size:34px; font-weight:800; line-height:1.3; margin:4px 0 0; }
.ho-price .ho-cur{ font-size:15px; color:var(--ho-muted); font-weight:600; }
.ho-add{ display:inline-block; align-self:flex-start; margin:10px 0 0; padding:4px 12px; border-radius:12px; font-weight:700; font-size:15px;
  background:rgba(244,196,67,.14); border:1px solid rgba(244,196,67,.55); color:#FBE3A0; line-height:1.6; }
.ho-save{ display:inline-block; align-self:flex-start; margin:8px 0 0; padding:4px 12px; border-radius:12px; font-weight:700; font-size:15px;
  background:rgba(46,204,113,.12); border:1px solid rgba(46,204,113,.45); color:#7ef0ad; line-height:1.6; }
.ho-incl{ list-style:none; margin:14px 0 6px; padding:0; flex:1 0 auto; }
.ho-incl li{ position:relative; padding-inline-start:26px; font-size:16px; line-height:1.7; margin-bottom:8px; }
.ho-incl li::before{ content:"✓"; position:absolute; inset-inline-start:0; color:var(--ho-green); font-weight:800; }
.ho-sep{ font-size:14px; color:var(--ho-muted2); margin:0 0 12px; }
.ho-btn{ display:flex; align-items:center; justify-content:center; width:100%; min-height:54px; margin-top:auto; padding:12px 16px; border-radius:14px;
  font:inherit; font-size:16.5px; font-weight:700; line-height:1.45; text-align:center; cursor:pointer; text-wrap:balance; }
.ho-btn-outline{ background:transparent; color:var(--ho-ink); border:1.5px solid var(--ho-accent); }
.ho-btn-outline:hover{ background:rgba(124,58,237,.14); }
.ho-btn-primary{ background:linear-gradient(135deg,#7C3AED,#8250F0); color:#fff; border:2px solid var(--ho-gold); box-shadow:0 10px 26px -12px rgba(124,58,237,.9); }
.ho-btn-primary:hover{ filter:brightness(1.07); }
.ho-btn[disabled]{ opacity:.7; cursor:progress; }
.ho-pay, .ho-free{ text-align:center; color:var(--ho-muted); font-size:14.5px; line-height:1.8; margin:14px auto 0; max-width:620px; }
.ho-free{ margin-top:6px; color:var(--ho-muted2); }
/* ---- career lead ---- */
.ho-lead{ color:var(--ho-muted,#C4B5FD); font-size:16px; margin:0 auto 8px; max-width:520px; }
.ho-benefits{ list-style:none; margin:0 auto 4px; padding:0; max-width:460px; text-align:start; }
.ho-benefits li{ position:relative; padding-inline-start:26px; font-size:16px; line-height:1.7; margin-bottom:6px; }
.ho-benefits li::before{ content:"✓"; position:absolute; inset-inline-start:2px; color:#2ECC71; font-weight:800; }
.hbdi-offer :focus-visible{ outline:3px solid #F4C443; outline-offset:3px; }
@media (max-width:640px){
  .ho-cards{ grid-template-columns:minmax(0,1fr); gap:24px; }
  .ho-price{ font-size:30px; }
}