/*
|--------------------------------------------------------------------------
| Track B — the author-facing publishing site
|--------------------------------------------------------------------------
|
| Loaded only on /publish-your-book and its pages. Its own `pb-` namespace
| rather than an extension of `dk-`: the two sites share the brand and the
| token set, but nothing else — the shop is a grid of covers, this is a long
| argument read top to bottom, and the components have no overlap worth
| sharing. Keeping them separate means a change here cannot reach the shop.
|
| Everything reads --site-* and --dk-* from brand.css, so the admin's brand
| colour flows through both sites from one place.
*/

/* One bold weight across this site: 700.

   It used to be 800 on every heading except the hero h1, which was 700 — so a
   section heading was heavier than the page title above it, and at Alexandria's
   800 the Arabic came out noticeably blacker than the design. Marketing asked
   for exactly this: "الالتزام بألوان الخطوط وتناسق أحجامها وعدم جعلها عريضة
   (Bold) بشكل مبالغ فيه". Emphasis inside body copy stays at 700 too, so there
   is one bold in the whole typeface rather than two that differ slightly. */

/* store.css sets `.dk h1, .dk h2 { color: var(--site-brand) }` for the shop's
   section headings (MKT-02), and <body> carries .dk on every page — so those
   two selectors reach into Track B and beat a single class on specificity.
   Restated once here at matching specificity, rather than fought heading by
   heading and rediscovered every time a band is added. */
.dk .pb-hero h1,
.dk .pb-band h2,
.dk .pb-cta h2,
.dk .pb-callout h2,
.dk .pb-rules--good h2 { color: #fff; }

.dk .pb-sechead h2,
.dk .pb-step h2,
.dk .pb-done h1,
.dk .pb-rate h3 { color: var(--site-brand); }

.dk .pb-rules--bad h2 { color: #c0392b; }

/* The same collision, one element down: `.dk p { color: var(--site-muted) }`
   also outranks a single class, so every paragraph sitting on one of the dark
   green bands inherited a colour mixed for a white page. Measured on the hero
   lede it came to 2.23:1 and on the band subtitle 1.68:1, against the 4.5:1
   floor for body text — the text was legible only because readers expect it to
   be there. White at 78% keeps the deliberate step down from the heading while
   clearing the floor. */
.dk .pb-hero__lede,
.dk .pb-hero__note,
.dk .pb-band__sub,
.dk .pb-cta p,
.dk .pb-callout p { color: rgba(255, 255, 255, .78); }

/* ── Shell ──────────────────────────────────────────────────────────────── */
.pb-wrap { width: min(1140px, 100% - 2.5rem); margin-inline: auto; }
.pb-wrap--narrow { width: min(880px, 100% - 2.5rem); }

.pb-sec { padding-block: clamp(3rem, 7vw, 5.5rem); background: var(--site-bg); }
.pb-sec--wash { background: var(--site-bg-alt); }

.pb-sr {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.pb-eyebrow {
    font-size: .82rem; font-weight: 700; letter-spacing: .06em;
    color: var(--dk-gold); margin: 0 0 .7rem;
}
.pb-eyebrow--gold { color: var(--dk-gold); }

/* The purchased theme paints a bare <header> white, which put a white slab
   behind every section heading on the washed bands. These are landmarks, not
   page headers, so they take the ground they sit on. */
.pb-sechead, .pb-rules header { background: transparent; }
.pb-sechead { text-align: center; margin-bottom: clamp(2rem, 4vw, 3rem); }

/* The two pages align differently, and the design is deliberate about it.

   The landing page centres its section headings — it is a pitch, read straight
   down the middle. The criteria page sets them flush to the reading edge, over
   cards whose content is also flush, so the eye runs down one margin while it
   checks itself against a list. Marketing asked for exactly this: "تُحاذى
   المعايير لليمين وليس في المنتصف".

   Logical properties, so the English site mirrors it without a second rule. */
.pb-page--criteria .pb-sechead { text-align: start; }
.dk .pb-page--criteria .pb-sechead__lede { margin-inline: 0; }
.pb-sechead h2 {
    font-size: clamp(1.5rem, 3.4vw, 2.35rem); font-weight: 700; line-height: 1.3;
    color: var(--site-brand); margin: 0 0 .8rem; text-wrap: balance;
}
.pb-sechead__lede {
    max-width: 62ch; margin-inline: auto; color: var(--site-muted);
    line-height: 1.8; font-size: 1rem;
}
/* `.dk p { margin: 0 }` in store.css is (0,1,1) and beats the single class
   above, so the auto margins never applied: the lede kept its 62ch cap but lost
   its centring and sat flush against the start edge — 219px right of the
   heading in Arabic. Restated with the .dk guard so the two are level, and the
   criteria page's deliberate start-alignment above now carries .dk too, keeping
   it ahead of this. */
.dk .pb-sechead__lede { margin-inline: auto; }

/* ── Buttons ────────────────────────────────────────────────────────────── */
.pb-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
    padding: .78rem 1.5rem; border: 1px solid transparent; border-radius: var(--dk-radius-sm);
    font-weight: 700; font-size: .94rem; line-height: 1; cursor: pointer;
    text-decoration: none; transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.pb-btn--lg { padding: 1rem 2rem; font-size: 1rem; }
.pb-btn--block { display: flex; width: 100%; }
.pb-btn--primary { background: var(--site-brand); color: #fff; }
.pb-btn--primary:hover { background: var(--site-brand-strong); color: #fff; }
.pb-btn--gold { background: var(--dk-gold); color: #fff; }
.pb-btn--gold:hover { background: var(--dk-gold-strong); color: #fff; }
.pb-btn--outline { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .45); }
.pb-btn--outline:hover { background: rgba(255, 255, 255, .12); color: #fff; }

/* ── Header ─────────────────────────────────────────────────────────────── */
.pb-head {
    position: sticky; top: 0; z-index: 60;
    background: var(--site-surface);
    border-bottom: 1px solid var(--dk-line);
}
.pb-head__in {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    width: min(1140px, 100% - 2.5rem); margin-inline: auto;
    min-height: 68px;
}

.pb-logo { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; }
.pb-logo__mark {
    width: 40px; height: 40px; flex: none;
    display: grid; place-items: center;
    border-radius: 9px; background: var(--site-brand); color: #fff;
    font-weight: 700; font-size: 1.1rem;
}
/* The real logo carries its own ground; boxing it in a green tile frames it in
   something the brand does not have. */
.pb-logo__mark--img { background: transparent; }
.pb-logo__mark img { width: 100%; height: 100%; object-fit: contain; }
.pb-logo__name { display: block; font-weight: 700; color: var(--site-ink); font-size: 1rem; }
.pb-logo__sub { display: block; font-size: .72rem; color: var(--site-muted); }

.pb-nav { display: flex; align-items: center; gap: 1.35rem; }
.pb-nav__link {
    font-size: .9rem; font-weight: 600; color: var(--site-ink);
    text-decoration: none; white-space: nowrap;
}
.pb-nav__link:hover, .pb-nav__link.is-on { color: var(--site-brand); }
.pb-nav__back { color: var(--site-muted); }
.pb-nav__back i { font-size: .78em; margin-inline-end: .25rem; }
.pb-head__cta { padding: .6rem 1.1rem; font-size: .86rem; }

.pb-burger {
    display: none; width: 42px; height: 42px;
    border: 1px solid var(--dk-line); border-radius: var(--dk-radius-sm);
    background: var(--site-surface); color: var(--site-ink); cursor: pointer; font-size: 1rem;
}

/* ── Hero ───────────────────────────────────────────────────────────────── */
.pb-hero {
    background: var(--dk-green-deep, #163a2d);
    color: #fff;
    padding-block: clamp(3rem, 8vw, 6rem);
}
.pb-hero .pb-eyebrow { color: var(--dk-gold); }
.pb-hero__h {
    font-size: clamp(2rem, 6vw, 3.9rem); font-weight: 700; line-height: 1.18;
    margin: 0 0 1.1rem; max-width: 16ch; text-wrap: balance; color: #fff;
}
.pb-hero__lede {
    max-width: 58ch; font-size: clamp(1rem, 1.6vw, 1.12rem); line-height: 1.85;
    color: rgba(255, 255, 255, .82); margin: 0 0 1.9rem;
}
.pb-hero__lede strong { color: #fff; }
.pb-hero__cta { display: flex; flex-wrap: wrap; gap: .8rem; }
.pb-hero__note { margin: 1rem 0 0; font-size: .85rem; color: rgba(255, 255, 255, .62); }

.pb-trust {
    display: flex; flex-wrap: wrap; gap: 1.5rem 2.2rem;
    list-style: none; padding: 1.6rem 0 0; margin: 2.4rem 0 0;
    border-top: 1px solid rgba(255, 255, 255, .16);
}
.pb-trust li {
    display: flex; align-items: center; gap: .5rem;
    font-size: .88rem; color: rgba(255, 255, 255, .78);
}
.pb-trust i { color: var(--dk-gold); }

/* ── Two ways in ────────────────────────────────────────────────────────── */
.pb-lanes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.4rem; }
.pb-lane {
    position: relative; display: flex; flex-direction: column;
    padding: 1.9rem 1.6rem 1.6rem;
    background: var(--site-surface);
    border: 1px solid var(--dk-line); border-radius: var(--dk-radius-lg);
}
.pb-lane.is-featured { border-color: var(--dk-gold); }
.pb-lane__badge {
    position: absolute; inset-block-start: -.75rem; inset-inline-start: 1.6rem;
    padding: .3rem .8rem; border-radius: 99px;
    background: var(--dk-gold); color: #fff; font-size: .74rem; font-weight: 700;
}
.pb-lane.is-featured .pb-lane__badge { background: var(--dk-gold); }
.pb-lane:not(.is-featured) .pb-lane__badge { background: var(--site-bg-alt); color: var(--site-muted); }
.pb-lane h3 { font-size: 1.28rem; font-weight: 700; color: var(--site-brand); margin: 0 0 .55rem; }
.pb-lane > p { color: var(--site-muted); line-height: 1.75; margin: 0 0 1.2rem; font-size: .93rem; }
.pb-lane__worry {
    background: var(--site-bg-alt); border-radius: var(--dk-radius-sm);
    padding: .85rem 1rem; margin-bottom: 1.2rem; margin-top: auto;
}
.pb-lane__worrylabel { display: block; font-size: .78rem; font-weight: 700; color: var(--site-brand); margin-bottom: .3rem; }
.pb-lane__worry p { margin: 0; font-size: .88rem; color: var(--site-muted); }

/* ── Manifesto band ─────────────────────────────────────────────────────── */
.pb-band {
    background: var(--site-brand); color: #fff;
    padding-block: clamp(3rem, 7vw, 5rem); text-align: center;
}
.pb-band__h {
    font-size: clamp(1.4rem, 3.6vw, 2.4rem); font-weight: 700;
    margin: 0 0 .7rem; color: #fff; text-wrap: balance;
}
.pb-band__sub { color: rgba(255, 255, 255, .66); font-size: .92rem; margin: 0 0 2.2rem; }
.pb-band__box {
    text-align: start;
    background: rgba(255, 255, 255, .07);
    border-inline-end: 4px solid var(--dk-gold);
    border-radius: var(--dk-radius);
    padding: 1.6rem 1.8rem;
}
.pb-band__box p { margin: 0; color: rgba(255, 255, 255, .88); line-height: 1.95; font-size: 1rem; }
.pb-band__box p + p { margin-top: 1.2rem; }
.pb-band__box strong { color: var(--dk-gold); font-weight: 700; }

/* ── Seven stages ───────────────────────────────────────────────────────── */
.pb-stages { list-style: none; padding: 0; margin: 0; display: grid; gap: .9rem; }
.pb-stage {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) auto;
    align-items: start; gap: 1rem;
    padding: 1.3rem 1.5rem;
    background: var(--site-surface);
    border: 1px solid var(--dk-line); border-radius: var(--dk-radius);
}
.pb-stage__n {
    width: 38px; height: 38px; display: grid; place-items: center;
    border-radius: 50%; background: var(--site-brand); color: #fff;
    font-weight: 700; font-size: .95rem;
}
.pb-stage__body h3 { font-size: 1.1rem; font-weight: 700; color: var(--site-brand); margin: 0 0 .35rem; }
.pb-stage__body p { margin: 0; color: var(--site-muted); line-height: 1.75; font-size: .92rem; }
.pb-stage__body strong { color: var(--site-ink); }
.pb-stage__pay {
    align-self: center;
    padding: .4rem .95rem; border-radius: 99px;
    background: var(--dk-gold); color: #fff; font-size: .8rem; font-weight: 700;
    white-space: nowrap;
}
.pb-chip {
    display: inline-block; margin-top: .7rem;
    padding: .32rem .8rem; border-radius: 99px;
    background: color-mix(in srgb, var(--site-brand) 10%, var(--site-bg));
    color: var(--site-brand); font-size: .78rem; font-weight: 700;
}

/* ── Packages ───────────────────────────────────────────────────────────── */
.pb-plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.4rem; align-items: start; }
.pb-plan {
    display: flex; flex-direction: column;
    background: var(--site-surface);
    border: 1px solid var(--dk-line); border-radius: var(--dk-radius-lg);
    overflow: hidden;
}
.pb-plan.is-featured { border-color: var(--dk-gold); }
.pb-plan__head { padding: 1.6rem 1.6rem 1.2rem; }
.pb-plan__head h3 { font-size: 1.35rem; font-weight: 700; color: var(--site-brand); margin: 0 0 .35rem; }
.pb-plan__for { margin: 0; color: var(--site-muted); font-size: .9rem; }
.pb-plan__price {
    padding: 1.3rem 1.6rem;
    background: var(--site-bg-alt);
    border-block: 1px solid var(--dk-line);
}
.pb-plan__amount {
    display: block; font-size: clamp(1.8rem, 4vw, 2.5rem); font-weight: 700;
    color: var(--site-brand); line-height: 1.1;
}
.pb-plan__note { display: block; margin-top: .4rem; font-size: .82rem; color: var(--site-muted); }
.pb-plan__sub {
    display: block; margin-top: .75rem; padding-top: .75rem;
    border-top: 1px dashed var(--dk-line);
    font-size: .82rem; color: var(--site-muted);
}
.pb-plan__list { list-style: none; padding: 1.4rem 1.6rem; margin: 0; display: grid; gap: .75rem; flex: 1; }
.pb-plan__list li { display: flex; align-items: flex-start; gap: .6rem; font-size: .9rem; color: var(--site-ink); }
.pb-plan__list i { color: var(--site-brand); margin-top: .2rem; }
.pb-plan__list .is-strong { font-weight: 700; }
.pb-plan__list .is-out { color: var(--site-muted); }
.pb-plan__list .is-out i { color: var(--site-muted); }
.pb-plan .pb-btn { margin: 0 1.6rem 1.6rem; width: calc(100% - 3.2rem); }

.pb-promise {
    margin-top: 2rem;
    border: 1px solid var(--dk-line); border-radius: var(--dk-radius);
    overflow: hidden;
}
.pb-promise__h { background: var(--site-brand); color: #fff; padding: .85rem 1.3rem; font-weight: 700; font-size: .96rem; }
.pb-promise__b { padding: 1.2rem 1.3rem; color: var(--site-muted); line-height: 1.9; font-size: .93rem; }
.pb-promise__b strong { color: var(--site-ink); }

/* ── Six differentiators ────────────────────────────────────────────────── */
.pb-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.2rem; }
.pb-card {
    padding: 1.5rem;
    background: var(--site-surface);
    border: 1px solid var(--dk-line); border-radius: var(--dk-radius);
}
.pb-card__icon {
    display: grid; place-items: center; width: 42px; height: 42px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--site-brand) 9%, var(--site-bg));
    color: var(--site-brand); margin-bottom: 1rem;
}
.pb-card h3 { font-size: 1.05rem; font-weight: 700; color: var(--site-brand); margin: 0 0 .5rem; }
.pb-card p { margin: 0; color: var(--site-muted); line-height: 1.75; font-size: .89rem; }

/* ── Comparison ─────────────────────────────────────────────────────────── */
/* The comparison scrolls in its own box.

   `contain: paint` is load-bearing, not decoration. In an RTL document
   Chromium adds this scroller's overflow to the ROOT's scroll width even
   though the box clips it — the page cannot be dragged sideways, but the
   inflated width is not harmless: it shifts what a screenshot captures and
   makes any width audit report a phantom ~221px. Containment stops the root
   counting it, and unlike `overflow-x: clip` on <html> it leaves the sticky
   header sticking. */
.pb-tablewrap {
    overflow-x: auto;
    contain: paint;
    border-radius: var(--dk-radius);
    border: 1px solid var(--dk-line);
}
.pb-table { width: 100%; border-collapse: collapse; min-width: 680px; font-size: .9rem; }
.pb-table th, .pb-table td { padding: .95rem 1rem; text-align: center; }
.pb-table thead th { background: var(--site-brand); color: #fff; font-weight: 700; }
.pb-table thead th.is-ours { background: var(--dk-gold); }
.pb-table tbody th {
    text-align: start; font-weight: 700; color: var(--site-ink);
    background: var(--site-surface); white-space: nowrap;
}
.pb-table tbody tr + tr th, .pb-table tbody tr + tr td { border-top: 1px solid var(--dk-line); }
.pb-table td { color: var(--site-muted); background: var(--site-surface); }
.pb-table td.is-ours { background: color-mix(in srgb, var(--dk-gold) 8%, var(--site-bg)); color: var(--site-ink); font-weight: 700; }
.pb-table td.is-good { color: #1c7a4b; font-weight: 700; }
.pb-table td.is-bad { color: #c0392b; font-weight: 700; }
.pb-yes { color: #1c7a4b; }
.pb-no { color: #c0392b; }

/* ── FAQ ────────────────────────────────────────────────────────────────── */
.pb-faq { display: grid; gap: .75rem; }
.pb-faq__i {
    background: var(--site-surface);
    border: 1px solid var(--dk-line); border-radius: var(--dk-radius);
    overflow: hidden;
}
.pb-faq__i summary {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    padding: 1.1rem 1.3rem; cursor: pointer; list-style: none;
    font-weight: 700; color: var(--site-brand); font-size: 1rem;
}
.pb-faq__i summary::-webkit-details-marker { display: none; }
.pb-faq__i summary i { color: var(--site-muted); font-size: .85rem; flex: none; }
.pb-faq__i[open] .pb-faq__plus { display: none; }
.pb-faq__i:not([open]) .pb-faq__minus { display: none; }
.pb-faq__a {
    padding: 0 1.3rem 1.25rem;
    color: var(--site-muted); line-height: 1.95; font-size: .93rem;
    border-top: 1px solid var(--dk-line); padding-top: 1.1rem;
}
.pb-faq__a strong { color: var(--site-ink); }

/* ── Closing call to action ─────────────────────────────────────────────── */
.pb-cta {
    background: var(--dk-green-deep, #163a2d); color: #fff;
    padding-block: clamp(3rem, 7vw, 5rem); text-align: center;
}
.pb-cta h2 { font-size: clamp(1.6rem, 4vw, 2.6rem); font-weight: 700; margin: 0 0 .9rem; color: #fff; }
.pb-cta p { color: rgba(255, 255, 255, .78); margin: 0 0 1.8rem; line-height: 1.8; }
.pb-cta__note { font-size: .85rem; color: rgba(255, 255, 255, .58); margin: 1.1rem 0 0; }

/* ── Footer ─────────────────────────────────────────────────────────────── */
/* Two tiers: the promise and the commitments on the dark green, then the legal
   line on the near-black beneath it — so the reader can stop at either. */
.pb-foot__top {
    background: var(--dk-green-deep, #163a2d);
    padding-block: clamp(2rem, 5vw, 3.2rem);
}
.pb-foot__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr));
    gap: 2rem;
    align-items: start;
}
.pb-foot__mark { display: block; margin-bottom: .9rem; }
.pb-foot__mark img { width: 44px; height: 44px; display: block; }
.pb-foot__brand strong { display: block; color: #fff; font-size: 1.15rem; font-weight: 700; margin-bottom: .5rem; }
.pb-foot__brand p { margin: 0; color: rgba(255, 255, 255, .72); line-height: 1.85; font-size: .92rem; max-width: 42ch; }
.pb-foot__col h3 {
    margin: 0 0 .9rem; font-size: .88rem; font-weight: 700; color: var(--dk-gold);
    letter-spacing: .04em;
}
.pb-foot__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.pb-foot__col li {
    display: flex; align-items: flex-start; gap: .5rem;
    font-size: .88rem; color: rgba(255, 255, 255, .78); line-height: 1.6;
}
.pb-foot__col li i { color: var(--dk-gold); font-size: .78em; margin-top: .35rem; flex: none; }

.pb-foot { background: var(--site-ink-strong); color: rgba(255, 255, 255, .7); padding-block: 1.5rem; }
.pb-foot__in {
    width: min(1140px, 100% - 2.5rem); margin-inline: auto;
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: .8rem 1.5rem; font-size: .84rem;
}
.pb-foot strong { color: #fff; }
.pb-foot__links { display: flex; gap: 1.2rem; }
.pb-foot__links a { color: rgba(255, 255, 255, .7); text-decoration: none; }
.pb-foot__links a:hover { color: var(--dk-gold); }

/* ── Criteria page ──────────────────────────────────────────────────────── */
.pb-crumbs { background: var(--site-surface); border-bottom: 1px solid var(--dk-line); padding-block: .85rem; font-size: .85rem; }
.pb-crumbs .pb-wrap { display: flex; align-items: center; gap: .5rem; color: var(--site-muted); }
.pb-crumbs a { color: var(--site-muted); text-decoration: none; }
.pb-crumbs a:hover { color: var(--site-brand); }
.pb-crumbs span:last-child { color: var(--site-ink); font-weight: 700; }

.pb-callout { background: var(--dk-gold); color: #fff; padding-block: clamp(2rem, 4vw, 2.8rem); }
.pb-callout__in { display: flex; align-items: flex-start; gap: 1rem; }
.pb-callout__in > i { font-size: 1.4rem; margin-top: .15rem; opacity: .85; }
.pb-callout h2 { font-size: 1.2rem; font-weight: 700; margin: 0 0 .5rem; color: #fff; }
.pb-callout p { margin: 0; color: rgba(255, 255, 255, .9); line-height: 1.85; font-size: .95rem; }

.pb-crit {
    background: var(--site-surface);
    border: 1px solid var(--dk-line); border-radius: var(--dk-radius);
    overflow: hidden; margin-bottom: 1.4rem;
}
.pb-crit__h { background: var(--site-brand); color: #fff; padding: 1.1rem 1.4rem; }
.pb-crit__h h3 { margin: 0; font-size: 1.15rem; font-weight: 700; color: #fff; }
.pb-crit__h p { margin: .25rem 0 0; font-size: .85rem; color: rgba(255, 255, 255, .72); }
.pb-crit__list { list-style: none; margin: 0; padding: 0; }
.pb-crit__list li { display: flex; gap: .8rem; padding: 1.1rem 1.4rem; }
.pb-crit__list li + li { border-top: 1px solid var(--dk-line); }
.pb-crit__list i { color: var(--site-brand); margin-top: .25rem; }
.pb-crit__list strong { display: block; color: var(--site-brand); font-size: 1rem; margin-bottom: .25rem; }
.pb-crit__list p { margin: 0; color: var(--site-muted); font-size: .9rem; line-height: 1.75; }
.pb-dot {
    display: inline-block; width: 9px; height: 9px; border-radius: 50%;
    background: #e0384a; margin-inline-end: .35rem;
}

.pb-rules { border-radius: var(--dk-radius); overflow: hidden; }
.pb-rules--bad { background: var(--site-surface); border: 1px solid var(--dk-line); border-inline-end: 4px solid #c0392b; }
.pb-rules--good { background: var(--site-brand); color: #fff; }
.pb-rules header { padding: 1.4rem 1.5rem 0; }
.pb-rules h2 { font-size: 1.25rem; font-weight: 700; margin: 0 0 .4rem; }
.pb-rules--bad h2 { color: #c0392b; }
.pb-rules--good h2 { color: #fff; }
.pb-rules header p { margin: 0; font-size: .88rem; }
.pb-rules--bad header p { color: var(--site-muted); }
.pb-rules--good header p { color: rgba(255, 255, 255, .7); }
.pb-rules ul { list-style: none; margin: 1.1rem 0 0; padding: 0 0 .4rem; }
.pb-rules li { display: flex; gap: .75rem; padding: .95rem 1.5rem; font-size: .92rem; line-height: 1.7; }
.pb-rules--bad li + li { border-top: 1px solid color-mix(in srgb, #c0392b 12%, transparent); }
.pb-rules--good li + li { border-top: 1px solid rgba(255, 255, 255, .12); }
.pb-rules--bad li i { color: #c0392b; margin-top: .2rem; }
.pb-rules--good li i { color: var(--dk-gold); margin-top: .2rem; }
.pb-rules--bad li span { color: var(--site-muted); }
.pb-rules--bad li strong { color: var(--site-ink); }
.pb-rules--good li span { color: rgba(255, 255, 255, .76); }
.pb-rules--good li strong { color: #fff; }

.pb-outcomes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.3rem; }
.pb-outcome {
    background: var(--site-surface);
    border: 1px solid var(--dk-line); border-radius: var(--dk-radius); overflow: hidden;
}
.pb-outcome header { padding: .95rem 1.3rem; color: #fff; font-weight: 700; font-size: 1.05rem; }
.pb-outcome--good header { background: #1c7a4b; }
.pb-outcome--bad header { background: #8d6a6a; }
.pb-outcome > div { padding: 1.2rem 1.3rem; color: var(--site-muted); line-height: 1.9; font-size: .92rem; }
.pb-outcome strong { color: var(--site-ink); }

.pb-rate {
    margin-top: 1.6rem; padding: 1.4rem 1.5rem;
    background: var(--site-surface);
    border: 1px solid var(--dk-line); border-radius: var(--dk-radius);
}
/* Centred, against the flush-right grain of the rest of the page — the design
   sets this one apart because it is an admission rather than a criterion, and
   marketing asked for it specifically: "عرض القسم في المنتصف وليس على الجانب". */
.pb-rate { text-align: center; }
.pb-rate h3 { margin: 0 0 .6rem; font-size: 1.05rem; font-weight: 700; color: var(--site-brand); }
.pb-rate p { margin: 0 auto; max-width: 62ch; color: var(--site-muted); line-height: 1.85; font-size: .92rem; }
.pb-rate strong { color: var(--site-ink); }
.pb-rate__slot {
    margin-top: 1.2rem; padding: 1.4rem; text-align: center;
    border: 1px dashed var(--dk-line); border-radius: var(--dk-radius-sm);
}
.pb-rate__slot strong {
    display: block; font-size: 1.3rem; font-weight: 700;
    color: color-mix(in srgb, var(--site-brand) 45%, var(--site-bg)); margin-bottom: .4rem;
}
.pb-rate__slot span { font-size: .85rem; color: var(--site-muted); }

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 980px) {
    .pb-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
    .pb-foot__grid { grid-template-columns: minmax(0, 1fr); gap: 1.8rem; }

    /* The menu becomes a sheet under the bar. Hidden with [hidden]-like
       display rather than width tricks, so nothing in it is focusable while
       it is closed. */
    .pb-burger { display: grid; place-items: center; }
    .pb-nav {
        display: none; position: absolute; inset-inline: 0; inset-block-start: 100%;
        flex-direction: column; align-items: stretch; gap: 0;
        background: var(--site-surface); border-bottom: 1px solid var(--dk-line);
        box-shadow: 0 18px 30px rgba(16, 28, 23, .1);
        padding: .5rem 1.25rem 1.1rem;
    }
    .pb-head { position: sticky; }
    .pb-head__in { position: relative; flex-wrap: nowrap; }
    .pb-nav.is-open { display: flex; }
    .pb-nav__link { padding: .85rem 0; border-bottom: 1px solid var(--dk-line); }
    .pb-head__cta { margin-top: .9rem; }

    .pb-lanes, .pb-plans, .pb-outcomes, .pb-cards { grid-template-columns: minmax(0, 1fr); }
    .pb-stage { grid-template-columns: 38px minmax(0, 1fr); }
    .pb-stage__pay { grid-column: 2; justify-self: start; margin-top: .3rem; }
    .pb-foot__in { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 520px) {
    .pb-wrap, .pb-wrap--narrow, .pb-head__in, .pb-foot__in { width: calc(100% - 2rem); }
    .pb-hero__cta .pb-btn { flex: 1 1 100%; }
    .pb-logo__sub { display: none; }
}

/* ── The four-step assessment ───────────────────────────────────────────── */
.pb-wizard {
    background: var(--site-surface);
    border: 1px solid var(--dk-line); border-radius: var(--dk-radius-lg);
    overflow: hidden;
}
.pb-wizard__bar { padding: 1.1rem 1.5rem; border-bottom: 1px solid var(--dk-line); }
.pb-wizard__track { height: 5px; border-radius: 99px; background: var(--site-bg-sunken); overflow: hidden; }
.pb-wizard__track span {
    display: block; height: 100%; background: var(--dk-gold);
    transition: width .25s ease;
}
.pb-wizard__meta {
    display: flex; justify-content: space-between; gap: 1rem;
    margin-top: .65rem; font-size: .84rem;
}
.pb-wizard__meta strong { color: var(--site-brand); font-weight: 700; }
.pb-wizard__meta span { color: var(--site-muted); }

.pb-step { border: 0; margin: 0; padding: clamp(1.5rem, 4vw, 2.5rem); text-align: center; }
.pb-step[hidden] { display: none; }
.pb-step h2 {
    font-size: clamp(1.35rem, 3.2vw, 2rem); font-weight: 700;
    color: var(--site-brand); margin: 0 0 .7rem; outline: none;
}
.pb-step__lede { color: var(--site-muted); line-height: 1.8; margin: 0 0 1.8rem; font-size: .95rem; }

/* Source order is [Back, Next]. A plain `row` already resolves right-to-left
   in Arabic, so Back sits at the start of the line (the right in RTL, the left
   in English) and the forward action ends it. `row-reverse` used to undo that,
   which put "رجوع" on the far left — reading as the last control in the row
   rather than the way back. */
.pb-step__nav {
    display: flex; gap: .8rem; margin-top: 1.8rem;
    flex-direction: row; justify-content: flex-start;
}
.pb-step__nav .pb-btn--lg { flex: 1; }
.pb-btn--ghost {
    background: var(--site-surface); color: var(--site-ink); border-color: var(--dk-line);
}
.pb-btn--ghost:hover { background: var(--site-bg-alt); color: var(--site-ink); }

/* One big target per case on step 1 — this is the choice the rest branches on. */
.pb-choice {
    display: flex; gap: .9rem; text-align: start; cursor: pointer;
    padding: 1.2rem 1.3rem; margin-bottom: .9rem;
    background: var(--site-surface);
    border: 1px solid var(--dk-line); border-radius: var(--dk-radius);
}
.pb-choice:has(input:checked), .pb-choice.is-on {
    border-color: var(--dk-gold);
    background: color-mix(in srgb, var(--dk-gold) 7%, var(--site-bg));
}
.pb-choice input { margin-top: .3rem; accent-color: var(--dk-gold); flex: none; }
.pb-choice strong { display: block; color: var(--site-brand); font-size: 1.05rem; margin-bottom: .35rem; }
.pb-choice__b { display: block; color: var(--site-muted); font-size: .9rem; line-height: 1.7; }
.pb-choice__for { display: block; margin-top: .5rem; color: var(--dk-gold); font-size: .84rem; font-weight: 700; }

.pb-field { text-align: start; margin-bottom: 1.4rem; }
.pb-field > label, .pb-field__label {
    display: block; font-weight: 700; color: var(--site-brand); font-size: .93rem; margin-bottom: .25rem;
}
.pb-field .req { color: #c0392b; }
.pb-field__hint { display: block; color: var(--site-muted); font-size: .82rem; margin-bottom: .55rem; }
.pb-field input[type="text"],
.pb-field input[type="tel"],
.pb-field input[type="email"],
.pb-field textarea {
    width: 100%; padding: .8rem 1rem;
    border: 1px solid var(--dk-line); border-radius: var(--dk-radius-sm);
    background: var(--site-surface); color: var(--site-ink);
    font: inherit; font-size: .93rem;
}
.pb-field input:focus, .pb-field textarea:focus {
    outline: 2px solid color-mix(in srgb, var(--site-brand) 45%, transparent); outline-offset: 1px;
    border-color: var(--site-brand);
}
.pb-field textarea { resize: vertical; min-height: 90px; }

.pb-fields2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1rem; }

/* The pills. A real input stays inside the label so the form posts without JS;
   :has() styles the checked state, and the is-on class is the fallback for the
   browsers that do not support it yet. */
.pb-pills { display: flex; flex-wrap: wrap; gap: .55rem; }
.pb-pill {
    display: inline-flex; cursor: pointer;
    padding: .6rem 1.05rem; border-radius: var(--dk-radius-sm);
    border: 1px solid var(--dk-line); background: var(--site-surface);
    font-size: .88rem; font-weight: 600; color: var(--site-ink);
}
.pb-pill input { position: absolute; opacity: 0; width: 0; height: 0; }
.pb-pill:has(input:checked), .pb-pill.is-on {
    background: var(--site-brand); border-color: var(--site-brand); color: #fff;
}
.pb-pill:focus-within { outline: 2px solid color-mix(in srgb, var(--site-brand) 45%, transparent); outline-offset: 2px; }

.pb-planpick {
    display: flex; align-items: center; gap: 1rem; cursor: pointer;
    padding: 1rem 1.2rem; margin-bottom: .7rem;
    border: 1px solid var(--dk-line); border-radius: var(--dk-radius);
    background: var(--site-surface);
}
.pb-planpick:has(input:checked), .pb-planpick.is-on {
    border-color: var(--dk-gold);
    background: color-mix(in srgb, var(--dk-gold) 7%, var(--site-bg));
}
.pb-planpick input { position: absolute; opacity: 0; width: 0; height: 0; }
.pb-planpick__t { flex: 1; }
.pb-planpick__t strong { display: block; color: var(--site-brand); font-size: 1rem; }
.pb-planpick__t span { display: block; color: var(--site-muted); font-size: .85rem; margin-top: .15rem; }
.pb-planpick__p { font-weight: 700; color: var(--dk-gold); font-size: 1.05rem; white-space: nowrap; }

.pb-drop {
    display: grid; justify-items: center; gap: .3rem; cursor: pointer;
    padding: 1.8rem 1.2rem; text-align: center;
    border: 2px dashed var(--dk-line); border-radius: var(--dk-radius);
    color: var(--site-muted);
}
.pb-drop:hover { border-color: var(--site-brand); }
.pb-drop input { position: absolute; opacity: 0; width: 0; height: 0; }
.pb-drop i { font-size: 1.4rem; color: var(--site-brand); margin-bottom: .35rem; }
.pb-drop strong { color: var(--site-brand); font-size: .95rem; }
.pb-drop span { font-size: .82rem; }
.pb-drop__name:not(:empty) {
    margin-top: .5rem; padding: .3rem .8rem; border-radius: 99px;
    background: var(--site-bg-alt); color: var(--site-ink); font-weight: 600;
}

/* Dragging a file over the box. The label is the drop target; the input inside
   it is invisible and never receives the drop itself. */
.pb-drop.is-over {
    border-color: var(--site-brand);
    background: var(--site-bg-alt);
}

/* The chosen file's "remove" row, revealed by JS once something is attached. */
.pb-drop__chosen {
    display: flex; justify-content: center;
    margin: .6rem 0 0;
}
.pb-drop__rm {
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .3rem .8rem; border: 0; border-radius: 99px;
    background: transparent; color: var(--site-muted);
    font: inherit; font-size: .82rem; cursor: pointer;
}
.pb-drop__rm:hover { color: var(--dk-danger, #b42318); text-decoration: underline; }

.pb-drop__err {
    margin: .6rem 0 0; text-align: center;
    font-size: .85rem; font-weight: 600;
    color: var(--dk-danger, #b42318);
}

.pb-note {
    text-align: start; margin: 1.6rem 0 0;
    padding: .9rem 1.1rem;
    background: var(--site-bg-alt);
    border-inline-start: 3px solid var(--dk-gold);
    border-radius: var(--dk-radius-sm);
    color: var(--site-muted); font-size: .87rem; line-height: 1.7;
}
.pb-note strong { color: var(--site-ink); }

.pb-errors {
    margin: 0 clamp(1.5rem, 4vw, 2.5rem); padding: 1rem 1.2rem;
    background: color-mix(in srgb, #c0392b 8%, var(--site-bg));
    border: 1px solid color-mix(in srgb, #c0392b 30%, transparent);
    border-radius: var(--dk-radius-sm); text-align: start;
}
.pb-errors strong { display: block; color: #c0392b; margin-bottom: .4rem; }
.pb-errors ul { margin: 0; padding-inline-start: 1.1rem; color: var(--site-muted); font-size: .88rem; }

/* ── Thank you ──────────────────────────────────────────────────────────── */
.pb-done { text-align: center; }
.pb-done__tick {
    display: grid; place-items: center; width: 68px; height: 68px; margin: 0 auto 1.4rem;
    border-radius: 50%; background: #1c7a4b; color: #fff; font-size: 1.6rem;
}
.pb-done h1 { font-size: clamp(1.6rem, 4vw, 2.5rem); font-weight: 700; color: var(--site-brand); margin: 0 0 .8rem; }
.pb-done__lede { max-width: 60ch; margin: 0 auto 1.5rem; color: var(--site-muted); line-height: 1.85; }
.pb-done__ref {
    display: inline-block; margin: 0 0 2rem;
    padding: .7rem 1.4rem; border-radius: var(--dk-radius-sm);
    background: var(--site-bg-alt); border: 1px solid var(--dk-line);
    color: var(--site-muted); font-size: .95rem;
}
.pb-done__ref strong { color: var(--site-brand); font-weight: 700; }

.pb-next { list-style: none; margin: 0 0 2rem; padding: 0; display: grid; gap: .75rem; text-align: start; }
.pb-next li {
    display: flex; gap: .9rem; align-items: flex-start;
    padding: 1.1rem 1.3rem;
    background: var(--site-bg-alt); border-radius: var(--dk-radius);
}
.pb-next__n {
    width: 34px; height: 34px; flex: none; display: grid; place-items: center;
    border-radius: 50%; background: var(--site-brand); color: #fff; font-weight: 700; font-size: .9rem;
}
.pb-next strong { display: block; color: var(--site-brand); margin-bottom: .2rem; }
.pb-next p { margin: 0; color: var(--site-muted); font-size: .89rem; line-height: 1.7; }

.pb-done__cta { display: flex; flex-wrap: wrap; gap: .8rem; justify-content: center; }

@media (max-width: 640px) {
    .pb-fields2 { grid-template-columns: minmax(0, 1fr); }
    .pb-step__nav { flex-direction: column-reverse; }
    .pb-step__nav .pb-btn { width: 100%; }
    .pb-done__cta .pb-btn { flex: 1 1 100%; }
}