/* Colour panels with tonal ribbons (see panels.js); the Krackerz clouds they replace are hidden. */
.framer-7xzl3c, .framer-reayh5 { display: none !important; }
.mp-host { isolation: isolate; }
.mp-panel { position: absolute; inset: 10px 10px 0; z-index: -1; border-radius: 36px; overflow: hidden; pointer-events: none; }
.mp-panel svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.mp-panel path { fill: none; stroke-width: 120; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 1 1.02; stroke-dashoffset: 1; }
.mp-panel.is-drawn path { stroke-dashoffset: 0; transition: stroke-dashoffset 2.4s cubic-bezier(.45, 0, .2, 1); }
.mp-panel.is-drawn path + path { transition-delay: .5s; }

/* hero: bright brand purple (black type stays readable), darker tonal ribbons */
.mp-panel--hero { inset: 0; border-radius: 0; background: none;   /* no fill: just the ribbon shapes, fading out */
  -webkit-mask-image: linear-gradient(#000 62%, transparent 96%); mask-image: linear-gradient(#000 62%, transparent 96%); }
.mp-panel--hero path { stroke: rgb(238, 228, 255); }
/* final CTA + footer: deep purple, lighter tonal ribbons */
.mp-panel--cta { inset: 10px 10px calc(10px - var(--mp-ext, 0px)); background: rgb(53, 13, 88); }
/* one panel for the final CTA and the footer: the CTA panel runs down behind the (now transparent) footer,
   so the ribbons continue through both. --mp-ext = footer height (panels.js) */
section.framer-78hs7d { overflow: visible !important; }
footer.framer-qmwpd { background: transparent !important; }
.mp-panel--cta path { stroke: rgb(72, 24, 118); }

/* tonal ribbon inside the purple feature cards; the card's text stays above it */
.mp-ribbon { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.mp-ribbon path { fill: none; stroke: rgba(255, 255, 255, .09); stroke-width: 70; stroke-linecap: round;
  stroke-dasharray: 1 1.02; stroke-dashoffset: 1; }
.mp-ribbon--wide path { stroke-width: 90; stroke: rgba(255, 255, 255, .07); }
.mp-ribbon.is-drawn path { stroke-dashoffset: 0; transition: stroke-dashoffset 1.8s cubic-bezier(.45, 0, .2, 1) .2s; }

/* the cluster's soft mint glow is for a light background */
.mp-host .mc-stage { background: none; }

@media (max-width: 760px) {
  .mp-panel { inset: 6px 6px 0; border-radius: 24px; }
  .mp-panel--hero { inset: 0; border-radius: 0; }
  .mp-panel--cta { inset: 6px 6px calc(6px - var(--mp-ext, 0px)); }
  .mp-panel path { stroke-width: 150; }
}

/* Eyebrows (treat-box shape), all the same: brand purple, bevelled corners, a thin white inner line and a
   deep-purple offset edge underneath; straight, never clipped. Section eyebrows and the hero badge alike. */
[class*="-container"]:has(> .framer-k2XiW), .framer-k2x2p1,
[class*="-container"]:has(> .framer-5NGg7):is(.framer-1g67rl-container) {
  transform: none !important; rotate: none !important; overflow: visible !important; }
.framer-k2XiW, .framer-1g67rl-container > .framer-5NGg7 {
  background: rgb(137, 11, 248) !important; border: 2px solid #fff !important; border-radius: 12px !important; corner-shape: bevel;
  box-shadow: 0 0 0 2.5px rgb(53, 13, 88), 0 5px 0 2.5px rgb(53, 13, 88) !important;
  transform: none !important; rotate: none !important; overflow: visible !important; }
.framer-k2XiW { padding: 7px 18px 9px !important; }
.framer-k2XiW > :not(.framer-16rxhxe) { display: none !important; }
.framer-k2XiW .framer-text, .framer-1g67rl-container > .framer-5NGg7 .framer-text {
  color: #fff !important; --framer-text-color: #fff !important; }
/* room for the offset edge so nothing nearby overlaps it */
.framer-k2x2p1 { padding-bottom: 6px; }

/* Section order: the laptop-sticker section ("ذاكر بستايلك") opens the page; the student hero comes second.
   The parent is display:contents, so order applies within the page's flex column. */
section.framer-qexbpp { order: -1; z-index: 1; }   /* own layer: painted first now, it must still sit above the dotted page background */
section.framer-qexbpp > .framer-1rzrr31 { display: none; }   /* its top Najdi edge would sit under the nav */
/* the Najdi edge at its bottom leads straight into the student section (no panel, no gap) */

/* Pricing: both plan cards the same height, in the panel look (same rounding, a tonal ribbon in each) */
.framer-33heav { align-items: stretch !important; }
.framer-33heav > [class*="-container"] { height: auto !important; align-self: stretch !important; }
.framer-33heav .framer-7px3Q { height: 100% !important; border-radius: 28px !important; overflow: hidden; }
.mp-ribbon--plan path { stroke-width: 80; }
.mp-ribbon--free path { stroke: rgba(137, 11, 248, .06); }
.framer-1g67rl-container > .framer-5NGg7[data-border]::after { display: none !important; }   /* Framer's own inner border */

/* Najdi edges, all identical: the two image-mask edges use the same 72x36 tile as the tiled rows */
.framer-lgoecb, .framer-1nrmy0w { height: 36px !important; }
.framer-lgoecb { top: -34px !important;
  -webkit-mask: url(/fu/images/najdi-up.svg) left top / 72px 36px repeat-x !important; mask: url(/fu/images/najdi-up.svg) left top / 72px 36px repeat-x !important; }
.framer-1nrmy0w {
  -webkit-mask: url(/fu/images/najdi-down.svg) left bottom / 72px 36px repeat-x !important; mask: url(/fu/images/najdi-down.svg) left bottom / 72px 36px repeat-x !important; }

/* FAQ: a compact title column (eyebrow, title, small sticker kept together) and the questions filling the rest */
@media (min-width: 810px) {
  .framer-1hnn8bx { gap: 56px !important; align-items: flex-start !important; }
  .framer-17nbkwr { flex: 0 0 auto !important; width: 30% !important; gap: 22px !important; }
  .framer-1by3scx-container { flex: 1 1 0 !important; width: auto !important; }
  .framer-14rtjnp { width: 170px !important; align-self: flex-start !important; }
}

/* header logo ink follows its background: logo.js sets the fill on the logo symbols directly */
/* phones: a soft frosted bar behind the logo and menu, so they never sit straight on the content */
@media (max-width: 809px) {
  header.framer-y4g92k::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background: rgba(247, 246, 240, .78); -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3);
    border-bottom: 1px solid rgba(53, 13, 88, .07); box-shadow: 0 6px 18px rgba(53, 13, 88, .05); }
}
/* plan cards: content starts at the top in both (equal heights made the free card centre its content) */
.framer-33heav .framer-7px3Q { justify-content: flex-start !important; }
/* the cap sticker sits on the free card's empty top corner instead of over its checklist */
@media (min-width: 810px) {
  .framer-33heav > .framer-wdcdvf { left: calc(51.45% - 34px) !important; top: -38px !important; right: auto !important; bottom: auto !important; }
}