@import url('/performance-overrides.css?v=20260912');
@import url('/performance-overrides.css?v=20260913');
@import url('/layout-stability.css?v=20260911-3');
@import url('/layout-overrides-base.css?v=20260911');
@import url('/payment-logo-direct.css?v=13');

/* Creator daily upload display: 4 videos/day. Target the actual featured Creator card. */
html body .plans .plan-grid article.featured .ref-features li:last-child b,
html body .plans .plan-grid article[data-plan="Creator"] .ref-features li:last-child b { font-size:0 !important; }
html body .plans .plan-grid article.featured .ref-features li:last-child b::after,
html body .plans .plan-grid article[data-plan="Creator"] .ref-features li:last-child b::after { content:"4 / DAY" !important; font-size:13px !important; font-family:"Space Grotesk",Arial,sans-serif !important; font-weight:700 !important; color:#eef0f7 !important; white-space:nowrap !important; }

/* Starter daily upload display: 2 videos/day. */
html body .plans .plan-grid article:first-child .ref-features li:last-child b { font-size:0 !important; }
html body .plans .plan-grid article:first-child .ref-features li:last-child b::after { content:"2 / DAY" !important; font-size:13px !important; font-family:"Space Grotesk",Arial,sans-serif !important; font-weight:700 !important; color:#eef0f7 !important; white-space:nowrap !important; }

/* Keep the existing payment and Starter Discord styling. */
.modal .payment-hero-icon { width:118px !important; height:118px !important; display:flex !important; align-items:center !important; justify-content:center !important; border-radius:28px !important; overflow:hidden !important; background:#0b0d18 url('/assets/hr-modal-logo.svg') center / 100% 100% no-repeat !important; border:1px solid rgba(126,96,255,.55) !important; box-shadow:0 14px 38px rgba(83,55,180,.25) !important; color:transparent !important; }
.modal .payment-hero-icon svg { display:none !important; }
.modal .pay-options .payment-method { min-height:132px !important; padding:18px !important; border-radius:18px !important; gap:15px !important; }
.modal .payment-method-logo { width:72px !important; height:72px !important; min-width:72px !important; flex:0 0 72px !important; border-radius:17px !important; overflow:hidden !important; border:1px solid rgba(154,159,188,.18) !important; box-shadow:0 9px 24px rgba(0,0,0,.20) !important; background:transparent !important; }
.modal .payment-method-logo.vodafone-logo { background:transparent !important; border-color:rgba(255,94,100,.55) !important; box-shadow:0 10px 24px rgba(214,18,28,.24) !important; }
.modal .payment-method-logo.instapay-logo { background:transparent !important; border-color:rgba(255,255,255,.78) !important; box-shadow:0 10px 24px rgba(0,0,0,.20) !important; }
.modal .payment-method-logo::before { display:block !important; width:100% !important; height:100% !important; content:"" !important; background-repeat:no-repeat !important; background-position:center !important; background-size:contain !important; background-color:transparent !important; }
.modal .payment-method-logo.instapay-logo::before { background-image:url('/instabay.png?v=20260911') !important; }
.modal .payment-method-logo.vodafone-logo::before { background-image:url('/vc.png?v=20260911') !important; }
.modal .payment-method-copy b { font-size:15px !important; }
.modal .payment-method-copy small { font-size:10px !important; }
.modal .payment-method-check { width:24px !important; height:24px !important; min-width:24px !important; }

html body .plans .plan-grid .plan-btn[data-plan="Starter"],
html body .plans .plan-grid .plan-btn[data-plan="starter"] { position:relative !important; display:inline-flex !important; flex-direction:row !important; align-items:center !important; justify-content:center !important; gap:8px !important; width:100% !important; min-width:0 !important; box-sizing:border-box !important; color:#ffffff !important; font-size:15px !important; line-height:1 !important; text-align:center !important; direction:ltr !important; white-space:nowrap !important; overflow:hidden !important; }
html body .plans .plan-grid .plan-btn[data-plan="Starter"]::before,
html body .plans .plan-grid .plan-btn[data-plan="starter"]::before { content:none !important; display:none !important; background:none !important; }
html body .plans .plan-grid .plan-btn[data-plan="Starter"]:not(.plan-btn-current) > *,
html body .plans .plan-grid .plan-btn[data-plan="starter"]:not(.plan-btn-current) > * { visibility:visible !important; opacity:1 !important; width:auto !important; min-width:0 !important; height:auto !important; margin:0 !important; padding:0 !important; overflow:visible !important; flex:0 0 auto !important; display:inline-flex !important; }
html body .plans .plan-grid .plan-btn[data-plan="Starter"] .hr-discord-icon ~ .hr-discord-icon,
html body .plans .plan-grid .plan-btn[data-plan="starter"] .hr-discord-icon ~ .hr-discord-icon { display:none !important; }
html body .plans .plan-grid .plan-btn[data-plan="Starter"]:not(.plan-btn-current) .hr-discord-icon,
html body .plans .plan-grid .plan-btn[data-plan="starter"]:not(.plan-btn-current) .hr-discord-icon { width:18px !important; height:18px !important; flex:0 0 18px !important; display:block !important; fill:currentColor !important; color:#ffffff !important; background:none !important; }
html body .plans .plan-grid .plan-btn[data-plan="Starter"].plan-btn-current,
html body .plans .plan-grid .plan-btn[data-plan="starter"].plan-btn-current { color:#74e2bd !important; font-size:15px !important; direction:rtl !important; display:inline-flex !important; align-items:center !important; justify-content:center !important; }
html body .plans .plan-grid .plan-btn[data-plan="Starter"].plan-btn-current > *,
html body .plans .plan-grid .plan-btn[data-plan="starter"].plan-btn-current > * { visibility:visible !important; opacity:1 !important; width:auto !important; height:auto !important; min-width:0 !important; margin:0 !important; padding:0 !important; overflow:visible !important; flex:0 0 auto !important; display:inline-flex !important; }

@media(max-width:760px){
.modal .payment-hero-icon { width:96px !important; height:96px !important; border-radius:22px !important; }
.modal .pay-options .payment-method { min-height:108px !important; }
.modal .payment-method-logo { width:64px !important; height:64px !important; min-width:64px !important; flex-basis:64px !important; }
html body .plans .plan-grid .plan-btn[data-plan="Starter"], html body .plans .plan-grid .plan-btn[data-plan="starter"] { gap:7px !important; font-size:14px !important; }
html body .plans .plan-grid .plan-btn[data-plan="Starter"] .hr-discord-icon, html body .plans .plan-grid .plan-btn[data-plan="starter"] .hr-discord-icon { width:17px !important; height:17px !important; flex-basis:17px !important; }
}
html { scroll-behavior:auto !important; }
body { overflow-anchor:none !important; }
.plans { overflow-x:clip !important; overflow-anchor:none !important; }
.plans .plan-grid { width:100% !important; min-width:0 !important; max-width:none !important; contain:layout paint !important; }
.plans .plan-grid article { min-width:0 !important; }
@media (min-width:761px) { .plans .plan-grid { grid-template-columns:repeat(3,minmax(0,1fr)) !important; direction:rtl !important; } }

.plan-btn[data-plan="Starter"]:not(.plan-btn-current),
.plan-btn[data-plan="starter"]:not(.plan-btn-current) { color:transparent !important; font-size:0 !important; }
@media (max-width:760px) { .plan-btn[data-plan="Starter"]:not(.plan-btn-current), .plan-btn[data-plan="starter"]:not(.plan-btn-current) { color:transparent !important; font-size:0 !important; } }

/* HR-STARTER-TEXTNODE-HOTFIX-V1 */
.plan-btn[data-plan="Starter"]:not(.plan-btn-current),
.plan-btn[data-plan="starter"]:not(.plan-btn-current) { color: transparent !important; font-size: 0 !important; }
@media (max-width:760px) { .plan-btn[data-plan="Starter"]:not(.plan-btn-current), .plan-btn[data-plan="starter"]:not(.plan-btn-current) { color: transparent !important; font-size: 0 !important; } }

/* HR-CREATOR-PRICE-HOTFIX-V3: Creator is a fixed 50 EGP monthly plan. Hide any JS-updated text and render the fixed price. */
html body .plans .plan-grid article.featured > strong {
  font-size:0 !important;
  color:#f6f7fb !important;
  white-space:nowrap !important;
  direction:rtl !important;
}
html body .plans .plan-grid article.featured > strong::before {
  content:"50 جنيه" !important;
  display:inline-block !important;
  font-family:"Space Grotesk",Arial,sans-serif !important;
  font-size:40px !important;
  line-height:1 !important;
  color:#f6f7fb !important;
}
html body .plans .plan-grid article.featured > strong small {
  display:inline !important;
  visibility:visible !important;
  opacity:1 !important;
  font-family:Alexandria,Arial,sans-serif !important;
  font-size:12px !important;
  line-height:1 !important;
  color:#fff !important;
  margin-right:7px !important;
  font-weight:500 !important;
}
html body[lang="en"] .plans .plan-grid article.featured > strong small { color:#fff !important; }

/* HR-PRICING-REFERENCE-V2: match the supplied pricing-card reference. */
.plans .plan-grid { gap:18px !important; }
.plans .plan-grid article {
  position:relative !important;
  border-radius:22px !important;
  padding:26px 24px 22px !important;
  background:linear-gradient(180deg,rgba(15,18,31,.98),rgba(8,11,21,.99)) !important;
  box-shadow:0 22px 55px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.04) !important;
}
.plans .plan-grid article:not(.featured):hover { transform:translateY(-6px) !important; }
.plans .plan-grid article.featured {
  border:2px solid transparent !important;
  background:linear-gradient(180deg,rgba(24,20,51,.99),rgba(12,12,29,.99)) padding-box,linear-gradient(135deg,#6547ff,#b84cff,#246dff) border-box !important;
  box-shadow:0 25px 75px rgba(102,64,235,.30),0 0 34px rgba(109,73,255,.12),inset 0 1px 0 rgba(255,255,255,.08) !important;
  transform:translateY(-8px) !important;
}
.plans .plan-grid article.featured:hover { transform:translateY(-12px) !important; }
.plans .plan-grid article.featured::before {
  content:"" !important; position:absolute !important; inset:0 !important; pointer-events:none !important;
  background:radial-gradient(circle at 50% 0%,rgba(150,92,255,.20),transparent 42%) !important;
}
.plans .plan-grid article h3 { font-size:30px !important; font-weight:800 !important; margin-bottom:7px !important; }
.plans .plan-grid article > p { margin-bottom:22px !important; opacity:.82 !important; }
.plans .plan-grid article > strong {
  min-height:68px !important; margin-bottom:17px !important; padding:3px 0 16px !important;
  border-bottom:0 !important; font-size:42px !important; font-weight:900 !important; letter-spacing:-1.5px !important;
}
.plans .plan-grid article.featured > strong { font-size:44px !important; text-shadow:0 0 24px rgba(154,94,255,.20) !important; }
.plans .plan-grid article .ref-features { display:flex !important; flex-direction:column !important; gap:7px !important; }
.plans .plan-grid article .ref-features li {
  min-height:43px !important; padding:6px 9px !important;
  border:1px solid rgba(97,106,143,.16) !important; border-radius:12px !important;
  background:linear-gradient(90deg,rgba(22,27,43,.78),rgba(17,21,35,.94)) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025) !important;
}
.plans .plan-grid article .ref-features li > b { font-size:12px !important; font-weight:800 !important; }
.plans .plan-grid article .ref-features .feature-label { color:#d7d9e6 !important; font-size:12px !important; }
.plans .plan-grid article:first-child .ref-features li,
.plans .plan-grid article[data-plan="Starter"] .ref-features li,
.plans .plan-grid article[data-plan="starter"] .ref-features li {
  background:linear-gradient(90deg,rgba(18,32,53,.82),rgba(15,21,35,.96)) !important; border-color:rgba(52,132,255,.16) !important;
}
.plans .plan-grid article.featured .ref-features li {
  background:linear-gradient(90deg,rgba(38,24,68,.82),rgba(18,20,38,.96)) !important; border-color:rgba(147,87,255,.17) !important;
}
.plans .plan-grid article:last-child .ref-features li {
  background:linear-gradient(90deg,rgba(39,24,65,.82),rgba(19,19,37,.96)) !important; border-color:rgba(180,83,255,.18) !important;
}
.plans .plan-grid article .plan-btn {
  height:56px !important; min-height:56px !important; margin-top:17px !important; border-radius:13px !important;
  font-size:15px !important; font-weight:800 !important;
}
.plans .plan-grid article.featured .plan-btn {
  background:linear-gradient(100deg,#557dff,#b54df0) !important; border:0 !important; box-shadow:0 12px 32px rgba(112,70,235,.34) !important;
}
.plans .plan-grid article:not(.featured) .plan-btn { border-radius:13px !important; background:rgba(12,16,29,.65) !important; }
.plans .plan-grid article:not(.featured) .plan-btn:hover { border-color:rgba(91,135,255,.65) !important; box-shadow:0 8px 24px rgba(38,92,190,.15) !important; }
.plans .plan-grid article.featured .tag {
  top:11px !important; right:11px !important; left:auto !important; padding:6px 13px !important;
  border-radius:999px !important; border:1px solid rgba(182,153,255,.42) !important;
  background:linear-gradient(100deg,rgba(92,59,226,.92),rgba(121,60,225,.90)) !important;
  box-shadow:0 8px 22px rgba(85,49,220,.28) !important; font-size:10px !important; z-index:4 !important;
}
.plans .rate { border-radius:999px !important; padding:7px 13px !important; }
@media(max-width:760px){
  .plans .plan-grid { gap:14px !important; }
  .plans .plan-grid article { padding:22px 18px 18px !important; border-radius:19px !important; }
  .plans .plan-grid article.featured { transform:none !important; }
  .plans .plan-grid article h3 { font-size:26px !important; }
  .plans .plan-grid article > strong { font-size:36px !important; }
}


/* Desktop layout reference sizing — tuned to match the supplied 1920/2K reference. */
@media (min-width: 1400px){
  .topbar,.hero,.section{
    width:88vw !important;
    max-width:2200px !important;
    min-width:0 !important;
    box-sizing:border-box !important;
  }
  .topbar{
    padding-left:24px !important;
    padding-right:24px !important;
  }
  .hero{
    padding-left:24px !important;
    padding-right:24px !important;
  }
  .section{
    padding-left:24px !important;
    padding-right:24px !important;
  }
  .plans .plan-grid{
    width:100% !important;
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    gap:18px !important;
  }
  .section-title,.plans-head{
    gap:28px !important;
  }
  .section h2{
    font-size:clamp(34px,3.05vw,56px) !important;
  }
  .hero h1{
    font-size:clamp(42px,4.6vw,76px) !important;
  }
}

@media (min-width: 2200px){
  .topbar,.hero,.section{
    width:84vw !important;
  }
}

@media (min-width: 2800px){
  .topbar,.hero,.section{
    width:80vw !important;
    max-width:2300px !important;
  }
}