/* ==========================================================================
   Butran College — single-program pages  (program-*.html)
   --------------------------------------------------------------------------
   A course detail page, one step below the department pages (dept-*.html):
   dept page = "what this department teaches", program page = "what this one
   course actually covers, week by week".

   Everything here is namespaced .pg-* so it can never collide with style.css
   or inner.css. Written with LOGICAL properties (inline-start/end, padding-
   inline) so the same rules serve /ar (rtl) and / (ltr) with no rtl.css
   counterpart — do not reintroduce left/right here.
   ========================================================================== */

/* ---------- shared bits ---------------------------------------------------- */
.pg-sec-head{max-width:760px;margin:0 auto 48px;text-align:center;}
.pg-sec-head .section-title{margin-bottom:14px;}
.pg-sec-head p{color:var(--color-gray-500);margin:0;}

/* dark "studio" panel — the PDF's control-room look, in brand navy */
.pg-dark{
    background:
        radial-gradient(1200px 400px at 50% -10%, rgba(200,166,70,.16), transparent 60%),
        linear-gradient(160deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    color:#fff;
}
.pg-dark .section-title,.pg-dark h3,.pg-dark h4{color:#fff;}
.pg-dark .pg-sec-head p{color:rgba(255,255,255,.72);}

/* ---------- hero facts + price rail --------------------------------------- */
.pg-banner-top{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:18px;}
.pg-chip{
    display:inline-flex;align-items:center;gap:8px;
    padding:7px 16px;border-radius:999px;font-size:14px;font-weight:600;
    background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.22);
    backdrop-filter:blur(4px);
}
.pg-chip.is-gold{background:var(--color-secondary);color:var(--color-primary);border-color:transparent;}
.pg-banner-btns{display:flex;gap:14px;flex-wrap:wrap;margin-top:26px;}

/* ---------- 1. workflow engine (5 steps) ---------------------------------- */
.pg-flow{list-style:none;margin:0;padding:0;display:grid;gap:18px;
         grid-template-columns:repeat(5,1fr);counter-reset:flow;}
.pg-flow > li{position:relative;counter-increment:flow;}
.pg-flow .pg-step{
    height:100%;display:flex;flex-direction:column;gap:12px;
    padding:30px 24px 26px;border-radius:20px;
    background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.14);
    transition:transform .25s ease,border-color .25s ease,background .25s ease;
}
.pg-flow > li:hover .pg-step{transform:translateY(-6px);border-color:var(--color-secondary);
    background:rgba(255,255,255,.09);}
.pg-flow .pg-step-n{
    position:absolute;inset-block-start:-14px;inset-inline-start:22px;
    width:34px;height:34px;border-radius:50%;
    display:grid;place-items:center;font-weight:700;font-size:15px;
    background:var(--color-secondary);color:var(--color-primary);
    box-shadow:0 6px 18px rgba(200,166,70,.35);
}
.pg-flow .pg-step i{font-size:26px;color:var(--color-secondary);}
.pg-flow .pg-step h3{font-size:18px;margin:0;line-height:1.35;}
.pg-flow .pg-step .pg-en{display:block;font-size:13px;font-weight:600;letter-spacing:.02em;
    color:rgba(255,255,255,.55);margin-top:3px;}
.pg-flow .pg-step p{margin:0;font-size:14.5px;line-height:1.75;color:rgba(255,255,255,.75);}
/* connector arrow between steps — hidden on the last one and when stacked */
.pg-flow > li::after{
    content:"";position:absolute;inset-block-start:50%;inset-inline-end:-13px;
    width:9px;height:9px;border-block-start:2px solid rgba(200,166,70,.6);
    border-inline-end:2px solid rgba(200,166,70,.6);
    transform:translateY(-50%) rotate(45deg);
}
[dir="rtl"] .pg-flow > li::after{transform:translateY(-50%) rotate(225deg);}
.pg-flow > li:last-child::after{display:none;}

/* ---------- 2. project architecture (3 compare cards) --------------------- */
.pg-arch{display:grid;gap:26px;grid-template-columns:repeat(3,1fr);}
.pg-arch-card{
    position:relative;overflow:hidden;
    padding:34px 28px;border-radius:22px;
    background:var(--color-white);border:1px solid var(--color-border-light);
    box-shadow:0 10px 30px rgba(11,31,58,.05);
    transition:transform .25s ease,box-shadow .25s ease;
}
.pg-arch-card:hover{transform:translateY(-6px);box-shadow:0 20px 45px rgba(11,31,58,.11);}
.pg-arch-card::before{content:"";position:absolute;inset-block-start:0;inset-inline:0;height:4px;
    background:var(--pg-accent,var(--color-secondary));}
.pg-arch-card .pg-arch-ico{
    width:60px;height:60px;border-radius:16px;display:grid;place-items:center;
    font-size:25px;margin-bottom:20px;
    color:var(--pg-accent,var(--color-secondary));
    background:var(--color-gray-100);   /* fallback: browsers without color-mix() */
    background:color-mix(in srgb,var(--pg-accent,var(--color-secondary)) 12%,transparent);
}
.pg-arch-card h3{font-size:21px;margin:0 0 4px;}
.pg-arch-card .pg-en{display:block;font-size:13.5px;font-weight:600;color:var(--color-gray-500);
    margin-bottom:18px;padding-bottom:18px;border-block-end:1px solid var(--color-border-light);}
.pg-arch-card dl{margin:0;display:grid;gap:13px;}
.pg-arch-card dt{font-weight:700;color:var(--color-primary);font-size:14.5px;}
.pg-arch-card dd{margin:2px 0 0;font-size:14.5px;line-height:1.7;color:var(--color-gray-700);}

/* ---------- 3. curriculum modules ----------------------------------------- */
.pg-mods{display:grid;gap:20px;grid-template-columns:repeat(2,1fr);}
.pg-mod{
    display:grid;grid-template-columns:auto 1fr;gap:20px;align-items:start;
    padding:26px 26px;border-radius:18px;
    background:var(--color-white);border:1px solid var(--color-border-light);
    transition:border-color .25s ease,box-shadow .25s ease,transform .25s ease;
}
.pg-mod:hover{border-color:var(--color-secondary);transform:translateY(-4px);
    box-shadow:0 14px 34px rgba(11,31,58,.08);}
.pg-mod-n{
    width:46px;height:46px;border-radius:13px;display:grid;place-items:center;
    font-weight:700;font-size:16px;font-variant-numeric:tabular-nums;
    background:var(--color-primary);color:var(--color-secondary);
}
.pg-mod h3{font-size:17.5px;margin:0 0 7px;line-height:1.45;}
.pg-mod p{margin:0;font-size:14.5px;line-height:1.75;color:var(--color-gray-700);}
.pg-mod .pg-tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:13px;}
.pg-mod .pg-tags span{
    font-size:12.5px;font-weight:600;padding:4px 11px;border-radius:999px;
    background:var(--color-gray-100);color:var(--color-gray-700);
}

/* ---------- 4. the four trim tools (keycaps) ------------------------------- */
.pg-keys{display:grid;gap:22px;grid-template-columns:repeat(4,1fr);}
.pg-key{
    padding:30px 24px;border-radius:20px;text-align:center;
    background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.14);
    transition:transform .25s ease,border-color .25s ease;
}
.pg-key:hover{transform:translateY(-6px);border-color:var(--color-secondary);}
.pg-keycap{
    width:66px;height:66px;margin:0 auto 18px;border-radius:14px;
    display:grid;place-items:center;
    font-size:29px;font-weight:700;line-height:1;
    color:var(--color-primary);background:linear-gradient(180deg,#fff,#dfe3ea);
    box-shadow:0 5px 0 #aab2bf,0 12px 22px rgba(0,0,0,.3);
    font-family:var(--font-head);
}
.pg-key h3{font-size:17px;margin:0 0 3px;}
.pg-key .pg-en{display:block;font-size:13px;font-weight:600;color:rgba(255,255,255,.55);margin-bottom:13px;}
.pg-key p{margin:0;font-size:14px;line-height:1.7;color:rgba(255,255,255,.75);}

/* ---------- 5. J & L cut track diagram ------------------------------------ */
.pg-cuts{display:grid;gap:26px;grid-template-columns:repeat(2,1fr);}
.pg-cut{padding:30px 28px;border-radius:20px;
    background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.14);}
.pg-cut h3{font-size:19px;margin:0 0 6px;}
.pg-cut > p{margin:0 0 22px;font-size:14.5px;line-height:1.75;color:rgba(255,255,255,.75);}
.pg-track{display:grid;gap:9px;}
.pg-track-row{display:grid;grid-template-columns:34px 1fr;gap:11px;align-items:center;}
.pg-track-lbl{font-size:12.5px;font-weight:700;color:rgba(255,255,255,.6);letter-spacing:.04em;}
.pg-track-bar{display:flex;gap:4px;height:30px;}
.pg-track-bar span{flex:1;border-radius:5px;background:rgba(56,189,248,.28);
    border:1px solid rgba(56,189,248,.45);}
.pg-track-bar.is-audio span{background:rgba(52,211,153,.24);border-color:rgba(52,211,153,.45);}
.pg-track-bar span.is-lead{flex:1.9;background:rgba(52,211,153,.6);border-color:rgba(52,211,153,.9);}
.pg-track-bar span.is-hold{flex:1.9;background:rgba(56,189,248,.62);border-color:rgba(56,189,248,.92);}
.pg-cut-note{margin:18px 0 0;font-size:13.5px;color:var(--color-secondary);font-weight:600;}

/* ---------- 6. colour: correction vs grading ------------------------------ */
.pg-split{display:grid;gap:26px;grid-template-columns:repeat(2,1fr);}
.pg-split-col{padding:34px 30px;border-radius:22px;border:1px solid var(--color-border-light);
    background:var(--color-white);}
.pg-split-col.is-b{background:var(--color-primary);border-color:transparent;color:#fff;}
.pg-split-col.is-b h3,.pg-split-col.is-b dt{color:#fff;}
.pg-split-col.is-b dd{color:rgba(255,255,255,.75);}
.pg-split-col.is-b .pg-split-kind{background:rgba(255,255,255,.14);color:var(--color-secondary);}
.pg-split-kind{display:inline-block;font-size:12.5px;font-weight:700;padding:5px 13px;
    border-radius:999px;background:var(--color-gray-100);color:var(--color-gray-700);margin-bottom:15px;}
.pg-split-col h3{font-size:22px;margin:0 0 20px;}
.pg-split-col dl{margin:0;display:grid;gap:15px;}
.pg-split-col dt{font-weight:700;font-size:14.5px;color:var(--color-primary);
    display:flex;align-items:center;gap:9px;}
.pg-split-col dt i{color:var(--color-secondary);}
.pg-split-col dt .pg-en{font-weight:600;font-size:12.5px;letter-spacing:.02em;
    color:var(--color-text-muted);}
.pg-split-col dd{margin:3px 0 0;padding-inline-start:26px;font-size:14.5px;line-height:1.7;
    color:var(--color-gray-700);}

/* ---------- 7. scopes ----------------------------------------------------- */
.pg-scopes{display:grid;gap:22px;grid-template-columns:repeat(3,1fr);}
.pg-scope{padding:28px 26px;border-radius:20px;text-align:center;
    background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.14);}
.pg-scope i{font-size:32px;color:var(--color-secondary);margin-bottom:16px;display:block;}
.pg-scope h3{font-size:17px;margin:0 0 4px;}
.pg-scope .pg-en{display:block;font-size:13px;font-weight:600;color:rgba(255,255,255,.55);margin-bottom:13px;}
.pg-scope p{margin:0;font-size:14px;line-height:1.7;color:rgba(255,255,255,.75);}

/* ---------- 8. export matrix ---------------------------------------------- */
.pg-rule{
    display:flex;align-items:center;gap:14px;flex-wrap:wrap;justify-content:center;
    padding:18px 26px;margin-bottom:30px;border-radius:14px;
    background:var(--overlay-gold);border:1px solid rgba(200,166,70,.35);
    font-size:15px;font-weight:600;color:var(--color-primary);
}
.pg-rule i{color:var(--color-secondary);font-size:19px;}
.pg-rule code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:14px;
    background:var(--color-white);padding:3px 9px;border-radius:6px;direction:ltr;display:inline-block;}
.pg-table-wrap{overflow-x:auto;border-radius:18px;border:1px solid var(--color-border-light);}
.pg-table{width:100%;border-collapse:collapse;background:var(--color-white);min-width:560px;}
.pg-table th,.pg-table td{padding:17px 20px;text-align:start;
    border-block-end:1px solid var(--color-border-light);font-size:15px;}
.pg-table thead th{background:var(--color-primary);color:#fff;font-size:14.5px;font-weight:600;}
.pg-table tbody tr:last-child th,.pg-table tbody tr:last-child td{border-block-end:0;}
.pg-table tbody tr:hover{background:var(--color-gray-100);}
.pg-table .pg-plat{display:flex;align-items:center;gap:12px;font-weight:700;color:var(--color-primary);}
.pg-table .pg-plat i{font-size:20px;color:var(--color-secondary);width:24px;text-align:center;}
.pg-table code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13.5px;
    direction:ltr;display:inline-block;}
.pg-table-note{margin:18px 0 0;font-size:14px;color:var(--color-gray-500);text-align:center;}

/* ---------- 9. closing pillars + quote ------------------------------------ */
.pg-pillars{display:grid;gap:24px;grid-template-columns:repeat(3,1fr);margin-bottom:40px;}
.pg-pillar{padding:32px 28px;border-radius:20px;text-align:center;
    background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.14);}
.pg-pillar .pg-pillar-ico{width:62px;height:62px;margin:0 auto 18px;border-radius:50%;
    display:grid;place-items:center;font-size:25px;
    color:var(--color-secondary);background:rgba(200,166,70,.14);
    border:1px solid rgba(200,166,70,.35);}
.pg-pillar h3{font-size:18px;margin:0 0 9px;}
.pg-pillar p{margin:0;font-size:14.5px;line-height:1.75;color:rgba(255,255,255,.75);}
.pg-quote{
    max-width:860px;margin:0 auto;padding:30px 34px;border-radius:18px;text-align:center;
    background:rgba(200,166,70,.1);border:1px solid rgba(200,166,70,.4);
}
.pg-quote i{font-size:24px;color:var(--color-secondary);margin-bottom:12px;display:block;}
.pg-quote p{margin:0;font-size:19px;line-height:1.7;font-weight:600;color:#fff;}

/* ---------- 10. outcomes list --------------------------------------------- */
.pg-outcomes{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:13px;
             grid-template-columns:repeat(2,1fr);}
.pg-outcomes li{display:flex;gap:12px;align-items:flex-start;font-size:15px;line-height:1.7;
                color:var(--color-gray-700);}
.pg-outcomes li i{color:var(--color-secondary);font-size:17px;margin-top:3px;flex:0 0 auto;}

/* ---------- 11. enrol CTA ------------------------------------------------- */
.pg-enroll{display:grid;grid-template-columns:1.4fr 1fr;gap:34px;align-items:center;
    padding:46px 48px;border-radius:26px;
    background:linear-gradient(140deg,var(--color-primary) 0%,var(--color-primary-light) 100%);
    color:#fff;}
.pg-enroll h2{color:#fff;font-size:30px;margin:0 0 12px;}
.pg-enroll p{margin:0;color:rgba(255,255,255,.78);font-size:16px;line-height:1.75;}
.pg-enroll-box{padding:30px 28px;border-radius:18px;text-align:center;
    background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.2);}
.pg-enroll-box .pg-enroll-lbl{display:block;font-size:14px;color:rgba(255,255,255,.7);margin-bottom:14px;}
.pg-enroll-box .btn{width:100%;justify-content:center;}
.pg-enroll-box .pg-enroll-alt{display:block;margin-top:14px;font-size:14px;
    color:var(--color-secondary);text-decoration:underline;}

/* ==========================================================================
   Responsive — the grids collapse in the same order on every breakpoint so
   the page keeps one rhythm: 5/4/3/2 -> 2 -> 1.
   ========================================================================== */
@media (max-width:1200px){
    .pg-flow{grid-template-columns:repeat(3,1fr);}
    .pg-flow > li::after{display:none;}
    .pg-keys,.pg-scopes,.pg-pillars{grid-template-columns:repeat(2,1fr);}
    .pg-arch{grid-template-columns:1fr;}
}
@media (max-width:992px){
    .pg-mods,.pg-cuts,.pg-split{grid-template-columns:1fr;}
    .pg-enroll{grid-template-columns:1fr;padding:38px 32px;}
    .pg-enroll h2{font-size:26px;}
}
@media (max-width:768px){
    .pg-flow,.pg-keys,.pg-scopes,.pg-pillars,.pg-outcomes{grid-template-columns:1fr;}
    .pg-sec-head{margin-bottom:34px;}
    .pg-quote{padding:24px 22px;}
    .pg-quote p{font-size:16.5px;}
    .pg-enroll{padding:30px 22px;}
}
@media (prefers-reduced-motion:reduce){
    .pg-flow > li:hover .pg-step,.pg-arch-card:hover,.pg-mod:hover,
    .pg-key:hover{transform:none;}
}

/* ---------- 12. reporting chain (wrapping arrow sequence) -----------------
   .pg-flow is locked to 5 columns; the IFRS reporting cycle and the capstone
   project are 7 and 11 nodes, so they need a sequence that WRAPS instead.
   Logical properties only — one rule serves / and /ar (see the file header).
   -------------------------------------------------------------------------- */
.pg-chain{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;
    gap:12px 0;align-items:stretch;counter-reset:chain;}
.pg-chain > li{position:relative;counter-increment:chain;
    display:flex;align-items:center;padding-inline-end:26px;}
/* chevron between nodes; hidden after the last one */
.pg-chain > li::after{
    content:"";position:absolute;inset-inline-end:8px;inset-block-start:50%;
    width:8px;height:8px;
    border-block-start:2px solid rgba(200,166,70,.75);
    border-inline-end:2px solid rgba(200,166,70,.75);
    transform:translateY(-50%) rotate(45deg);
}
[dir="rtl"] .pg-chain > li::after{transform:translateY(-50%) rotate(225deg);}
.pg-chain > li:last-child{padding-inline-end:0;}
.pg-chain > li:last-child::after{display:none;}
.pg-chain .pg-node{
    display:flex;flex-direction:column;gap:2px;justify-content:center;
    min-height:100%;padding:13px 18px;border-radius:14px;
    background:var(--color-white);border:1px solid var(--color-border-light);
    box-shadow:0 6px 18px rgba(11,31,58,.05);
    font-size:14.5px;font-weight:600;line-height:1.45;color:var(--color-primary);
    transition:transform .22s ease,border-color .22s ease;
}
.pg-chain > li:hover .pg-node{transform:translateY(-3px);border-color:var(--color-secondary);}
.pg-chain .pg-node .pg-en{display:block;font-size:12.5px;font-weight:600;letter-spacing:.02em;
    color:var(--color-text-muted);}
/* counter badge for the numbered variant */
.pg-chain.is-numbered .pg-node::before{
    content:counter(chain);display:inline-block;margin-inline-end:8px;
    min-width:19px;height:19px;border-radius:50%;
    background:var(--color-secondary);color:var(--color-primary);
    font-size:11.5px;font-weight:700;text-align:center;line-height:19px;
}
/* on the dark sections the nodes invert */
.pg-dark .pg-chain .pg-node{
    background:rgba(255,255,255,.055);border-color:rgba(255,255,255,.14);
    color:var(--color-white);box-shadow:none;
}
.pg-dark .pg-chain .pg-node .pg-en{color:rgba(255,255,255,.55);}
@media (max-width:768px){
    .pg-chain{flex-direction:column;gap:10px;}
    .pg-chain > li{padding-inline-end:0;padding-block-end:18px;width:100%;}
    .pg-chain > li .pg-node{width:100%;}
    .pg-chain > li::after{inset-inline-end:auto;inset-inline-start:50%;
        inset-block-start:auto;inset-block-end:5px;
        transform:translateX(-50%) rotate(135deg);}
    [dir="rtl"] .pg-chain > li::after{transform:translateX(50%) rotate(135deg);}
    .pg-chain > li:last-child{padding-block-end:0;}
}
@media (prefers-reduced-motion:reduce){
    .pg-chain > li:hover .pg-node{transform:none;}
}

/* ---------- 13. reporting stages (7 numbered cards, cycle section) --------
   Richer than .pg-chain: each stage carries an icon, what you do, and the
   output it hands to the next stage. auto-fit so 7 cards settle 4+3 on wide
   screens and never leave a lone orphan. Logical properties only.
   -------------------------------------------------------------------------- */
.pg-stages{list-style:none;margin:0;padding:0;display:grid;gap:22px;
    grid-template-columns:repeat(auto-fit,minmax(255px,1fr));counter-reset:stage;}
.pg-stages > li{counter-increment:stage;display:flex;}
.pg-stage{
    position:relative;display:flex;flex-direction:column;gap:11px;
    width:100%;padding:32px 26px 24px;border-radius:20px;
    background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.14);
    transition:transform .25s ease,border-color .25s ease,background .25s ease;
}
.pg-stages > li:hover .pg-stage{transform:translateY(-6px);
    border-color:var(--color-secondary);background:rgba(255,255,255,.09);}
.pg-stage::before{
    content:counter(stage);
    position:absolute;inset-block-start:-14px;inset-inline-start:22px;
    width:34px;height:34px;border-radius:50%;
    display:grid;place-items:center;font-weight:700;font-size:15px;
    background:var(--color-secondary);color:var(--color-primary);
    box-shadow:0 6px 18px rgba(200,166,70,.35);
}
.pg-stage > i{font-size:25px;color:var(--color-secondary);}
.pg-stage h3{font-size:17.5px;margin:0;line-height:1.35;}
.pg-stage .pg-en{display:block;font-size:12.5px;font-weight:600;letter-spacing:.02em;
    color:rgba(255,255,255,.55);margin-top:3px;}
.pg-stage p{margin:0;font-size:14.5px;line-height:1.75;color:rgba(255,255,255,.75);}
/* the output strip, pinned to the card foot so the row reads evenly */
.pg-stage .pg-out{
    margin-block-start:auto;padding-block-start:14px;
    border-block-start:1px dashed rgba(255,255,255,.18);
    display:flex;align-items:flex-start;gap:8px;
    font-size:13px;line-height:1.6;color:rgba(255,255,255,.62);
}
.pg-stage .pg-out i{color:var(--color-secondary);font-size:12px;margin-block-start:4px;}
.pg-stage .pg-out b{color:rgba(255,255,255,.9);font-weight:600;}
/* closing note: stage 7 feeds the next period */
.pg-cycle-note{
    margin:34px 0 0;padding:16px 22px;border-radius:14px;
    background:rgba(200,166,70,.1);border:1px solid rgba(200,166,70,.28);
    display:flex;align-items:center;gap:11px;
    font-size:14.5px;line-height:1.7;color:rgba(255,255,255,.82);
}
.pg-cycle-note i{color:var(--color-secondary);font-size:17px;flex-shrink:0;}
@media (max-width:768px){
    .pg-stages{grid-template-columns:1fr;}
    .pg-cycle-note{padding:14px 18px;font-size:14px;}
}
@media (prefers-reduced-motion:reduce){
    .pg-stages > li:hover .pg-stage{transform:none;}
}

/* ---------- 14. application method (6-step rail, closing section) ---------
   Deliberately NOT .pg-stages: that one is a wide card grid on a dark band,
   this is a vertical rail on a light band, because it is a loop you repeat per
   transaction rather than a sequence you walk once. One worked example runs
   down the rail. Logical properties only.
   -------------------------------------------------------------------------- */
.pg-method{list-style:none;margin:0;padding:0;position:relative;counter-reset:meth;}
/* the rail */
.pg-method::before{
    content:"";position:absolute;inset-block:14px 14px;inset-inline-start:17px;
    width:2px;background:linear-gradient(to bottom,
        var(--color-secondary), color-mix(in srgb, var(--color-secondary) 25%, transparent));
    background:var(--color-border-light);
}
.pg-method > li{counter-increment:meth;position:relative;
    padding-inline-start:54px;padding-block-end:18px;}
.pg-method > li:last-child{padding-block-end:0;}
.pg-method > li::before{
    content:counter(meth);
    position:absolute;inset-inline-start:0;inset-block-start:16px;
    width:36px;height:36px;border-radius:50%;
    display:grid;place-items:center;font-weight:700;font-size:15px;
    background:var(--color-secondary);color:var(--color-primary);
    box-shadow:0 0 0 5px var(--color-white),0 6px 16px rgba(200,166,70,.3);
}
.pg-meth{
    padding:20px 24px;border-radius:16px;
    background:var(--color-white);border:1px solid var(--color-border-light);
    box-shadow:0 8px 24px rgba(11,31,58,.05);
    transition:transform .22s ease,border-color .22s ease;
}
.pg-method > li:hover .pg-meth{transform:translateX(0) translateY(-3px);
    border-color:var(--color-secondary);}
.pg-meth-head{display:flex;align-items:center;gap:11px;flex-wrap:wrap;}
.pg-meth-head i{color:var(--color-secondary);font-size:18px;}
.pg-meth-head h3{margin:0;font-size:17.5px;line-height:1.3;}
.pg-meth-head .pg-en{font-size:12.5px;font-weight:600;letter-spacing:.02em;
    color:var(--color-text-muted);}
/* the question this step answers */
.pg-meth-q{margin:9px 0 0;font-size:14.5px;line-height:1.7;color:var(--color-gray-700);}
.pg-meth-q i{color:var(--color-secondary);font-size:12px;margin-inline-end:6px;}
/* the worked example, carried down the rail */
.pg-meth-ex{
    margin-block-start:13px;padding:12px 16px;border-radius:11px;
    background:var(--color-gray-100);
    border-inline-start:3px solid var(--color-secondary);
    font-size:14px;line-height:1.75;color:var(--color-primary);
}
.pg-meth-ex b{font-weight:700;}
.pg-meth-ex .pg-ex-lbl{
    display:block;font-size:11.5px;font-weight:700;letter-spacing:.06em;
    text-transform:uppercase;color:var(--color-text-muted);margin-block-end:3px;
}
/* the example banner above the rail */
.pg-method-intro{
    margin:0 0 26px;padding:15px 22px;border-radius:14px;
    background:rgba(200,166,70,.1);border:1px solid rgba(200,166,70,.3);
    display:flex;align-items:center;gap:11px;
    font-size:14.5px;line-height:1.7;color:var(--color-primary);
}
.pg-method-intro i{color:var(--color-secondary);font-size:17px;flex-shrink:0;}
@media (max-width:768px){
    .pg-method > li{padding-inline-start:44px;}
    .pg-method::before{inset-inline-start:14px;}
    .pg-method > li::before{width:30px;height:30px;font-size:13.5px;inset-block-start:14px;}
    .pg-meth{padding:17px 18px;}
    .pg-meth-ex{padding:11px 13px;font-size:13.5px;}
}
@media (prefers-reduced-motion:reduce){
    .pg-method > li:hover .pg-meth{transform:none;}
}

/* ---------- 15. program mix (the 30/70 duration split) -------------------- */
.pg-mix{margin:0 0 38px;padding:26px 28px;border-radius:18px;
    background:var(--color-white);border:1px solid var(--color-border-light);
    box-shadow:0 8px 24px rgba(11,31,58,.05);}
.pg-mix h3{margin:0 0 4px;font-size:20px;}
.pg-mix > p{margin:0 0 20px;font-size:14.5px;color:var(--color-gray-700);}
.pg-mix-bar{display:flex;height:16px;border-radius:999px;overflow:hidden;
    border:1px solid var(--color-border-light);}
.pg-mix-bar span{display:block;}
.pg-mix-bar .is-k{flex:30;background:color-mix(in srgb, var(--color-primary) 35%, var(--color-white));
    background:#9aa7b8;}
.pg-mix-bar .is-p{flex:70;background:var(--color-secondary);}
.pg-mix-key{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:13px;}
.pg-mix-key li{display:flex;gap:11px;align-items:flex-start;font-size:14.5px;line-height:1.7;}
.pg-mix-key .pg-dot{width:12px;height:12px;border-radius:50%;flex-shrink:0;margin-block-start:6px;}
.pg-mix-key .pg-dot.is-k{background:#9aa7b8;}
.pg-mix-key .pg-dot.is-p{background:var(--color-secondary);}
.pg-mix-key b{color:var(--color-primary);}
.pg-mix-key .pg-en{display:block;font-size:12.5px;font-weight:600;letter-spacing:.02em;
    color:var(--color-text-muted);margin-block-start:2px;}
@media (max-width:768px){.pg-mix{padding:22px 20px;margin-block-end:30px;}}

/* ---------- 16. verbatim-source extras --------------------------------- */
/* the title's second line ("مع التحضير لاختبار ACCA CertIFR") */
.page-banner .pg-h1sub{font-size:19px;font-weight:600;margin:-6px 0 10px;
    color:var(--color-secondary);line-height:1.5;}
/* the answer line in "لماذا هذه الدورة؟" */
.pg-why-a{margin:18px 0 0;font-size:15.5px;line-height:1.8;display:flex;gap:10px;align-items:flex-start;}
.pg-why-a i{color:var(--color-secondary);margin-block-start:5px;flex-shrink:0;}
/* module 01's three bullets, inside its card */
.pg-mod-list{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:6px;}
.pg-mod-list li{position:relative;padding-inline-start:16px;font-size:13.5px;line-height:1.65;
    color:var(--color-gray-700);}
.pg-mod-list li::before{content:"";position:absolute;inset-inline-start:0;inset-block-start:8px;
    width:5px;height:5px;border-radius:50%;background:var(--color-secondary);}
/* the split columns' intro / footer lines */
.pg-split-col .pg-col-note{margin:4px 0 16px;font-size:14px;color:var(--color-gray-700);}
.pg-split-col .pg-col-foot{margin:18px 0 0;padding-block-start:14px;
    border-block-start:1px dashed var(--color-border);
    font-size:13.5px;line-height:1.7;color:var(--color-gray-700);}
.pg-split-col .pg-col-foot i{color:var(--color-secondary);margin-inline-end:6px;}
.pg-split-col .pg-col-foot code{font-size:12.5px;}
.pg-split-col dl dd{margin:3px 0 0;}
/* the closing sign-off block */
.pg-sign{margin:46px auto 0;max-width:720px;padding:34px 30px;border-radius:20px;text-align:center;
    background:var(--color-primary);color:var(--color-white);display:grid;gap:7px;}
.pg-sign .pg-sign-col{font-size:19px;font-weight:700;letter-spacing:.1em;}
.pg-sign .pg-sign-motto{font-size:13.5px;font-weight:600;letter-spacing:.08em;
    text-transform:uppercase;color:var(--color-secondary);}
.pg-sign .pg-sign-line{margin-block-start:10px;font-size:16px;line-height:1.75;
    color:rgba(255,255,255,.92);}
.pg-sign .pg-sign-prog{margin-block-start:10px;padding-block-start:14px;
    border-block-start:1px solid rgba(255,255,255,.2);
    font-size:13.5px;line-height:1.7;color:rgba(255,255,255,.7);}
.pg-sign .pg-sign-name{font-size:14.5px;font-weight:600;color:rgba(255,255,255,.88);}
@media (max-width:768px){
    .page-banner .pg-h1sub{font-size:16.5px;}
    .pg-sign{padding:26px 20px;margin-block-start:34px;}
    .pg-sign .pg-sign-col{font-size:17px;}
    .pg-sign .pg-sign-line{font-size:15px;}
}

/* the verbatim header meta line: "45 ساعة تدريبية | تدريب عملي مكثف | مستوى متوسط – متقدم" */
.page-banner .pg-h1meta{margin:0 0 12px;font-size:14.5px;font-weight:600;letter-spacing:.01em;
    color:rgba(255,255,255,.82);line-height:1.7;}
/* the standards table is 2 columns here, so let the label column breathe */
.pg-table.is-2col th[scope="row"]{width:auto;min-width:230px;}
@media (max-width:768px){.page-banner .pg-h1meta{font-size:13.5px;}
    .pg-table.is-2col th[scope="row"]{min-width:150px;}}

/* ---------- anchor offsets under the 3-row sticky header ------------------ */
/* matches the #overview/#courses rule in inner.css — keep the two in step */
#overview,#workflow,#architecture,#curriculum,#tools,#color,#export,#outcome,#enroll,#cycle,#standards,#closing,#statements,#project,#certifr,#audience{
    scroll-margin-top:170px;
}
@media (max-width:1024px){
    #overview,#workflow,#architecture,#curriculum,#tools,#color,#export,#outcome,#enroll,#cycle,#standards,#closing,#statements,#project,#certifr,#audience{
        scroll-margin-top:150px;
    }
}

/* ---------- 17. english-for-accounting extras ------------------------------ */
/* module groups ("Modules 1 – 5 · Core Accounting English Skills") */
.pg-group{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin:44px 0 20px;
    padding-block-end:12px;border-block-end:2px solid var(--color-secondary);}
.pg-group.is-first{margin-block-start:0;}
.pg-group h3{margin:0;font-size:21px;}
.pg-group span{font-size:14.5px;font-weight:600;color:var(--color-secondary-dark);}
/* module card: English sub-label, summary line, Topics / Practical Activities rows */
.pg-mod h3 .pg-en{display:block;font-size:12.5px;font-weight:600;letter-spacing:.02em;
    color:var(--color-text-muted);margin-block-start:2px;}
.pg-mod .pg-mod-sum{font-size:13.5px;color:var(--color-text-muted);}
.pg-mod .pg-mod-row{margin-block-start:11px;}
.pg-mod .pg-mod-row b{display:block;font-size:13px;color:var(--color-primary);margin-block-end:2px;}
.pg-mod .pg-mod-row.is-act{color:var(--color-primary-light);}
/* sub-heading inside a section */
.pg-sub{font-size:22px;margin:0 0 20px;}
.pg-sub.is-next{margin-block-start:52px;}
/* training methodology tiles */
.pg-pills{list-style:none;margin:0;padding:0;display:grid;gap:14px;grid-template-columns:repeat(4,1fr);}
.pg-pills li{display:flex;align-items:center;gap:11px;padding:16px 18px;border-radius:14px;
    background:var(--color-white);border:1px solid var(--color-border-light);
    font-size:14.5px;font-weight:600;line-height:1.5;color:var(--color-primary);}
.pg-pills li i{color:var(--color-secondary);font-size:17px;flex:0 0 auto;}
/* assessment weights */
.pg-bars{list-style:none;margin:0;padding:26px 28px;display:grid;gap:15px;border-radius:18px;
    background:var(--color-white);border:1px solid var(--color-border-light);}
.pg-bars li{display:grid;grid-template-columns:minmax(130px,230px) 1fr 48px;gap:16px;
    align-items:center;font-size:14.5px;}
.pg-bars .pg-bar-lbl{font-weight:600;color:var(--color-primary);}
.pg-bars .pg-bar{height:14px;border-radius:999px;background:var(--color-gray-100);overflow:hidden;}
.pg-bars .pg-bar span{display:block;height:100%;border-radius:999px;background:var(--color-primary);}
.pg-bars .pg-bar-pct{font-weight:700;color:var(--color-primary);
    font-variant-numeric:tabular-nums;text-align:end;}
/* delivery / duration lines */
.pg-rule.is-fact{justify-content:flex-start;margin-bottom:14px;}
.pg-quote h3{margin:0 0 10px;font-size:20px;color:var(--color-secondary);}
.pg-dark .pg-uvp{max-width:860px;margin:0 auto 34px;text-align:center;font-size:16.5px;line-height:1.9;
    color:rgba(255,255,255,.86);}
@media (max-width:1024px){.pg-pills{grid-template-columns:repeat(2,1fr);}}
@media (max-width:768px){
    .pg-group{margin-block-start:34px;}
    .pg-bars{padding:20px 18px;}
    .pg-bars li{grid-template-columns:1fr 44px;gap:6px 12px;}
    .pg-bars .pg-bar-lbl{grid-column:1 / -1;}
    .pg-sub{font-size:19px;}
}
@media (max-width:560px){.pg-pills{grid-template-columns:1fr;}}
#objectives,#workshops,#methodology,#package{scroll-margin-top:170px;}
@media (max-width:1024px){#objectives,#workshops,#methodology,#package{scroll-margin-top:150px;}}

/* ---------- 18. canada-quickbooks extras ---------------------------------- */
/* training-plan table: No. | unit | hours, with a total row */
.pg-table.is-plan{min-width:0;}
.pg-table.is-plan .pg-num{width:70px;font-weight:700;color:var(--color-secondary-dark);
    font-variant-numeric:tabular-nums;}
.pg-table.is-plan th[scope="row"]{font-weight:600;color:var(--color-primary);}
.pg-table.is-plan .pg-hrs{width:110px;text-align:center;font-weight:700;color:var(--color-primary);
    font-variant-numeric:tabular-nums;}
.pg-table.is-plan thead th:last-child{text-align:center;}
.pg-table.is-plan tfoot th,.pg-table.is-plan tfoot td{background:var(--color-primary);color:var(--color-white);
    border-block-end:0;font-weight:700;}
.pg-table.is-plan tfoot .pg-hrs{color:var(--color-secondary);font-size:17px;}
/* three-across tiles (career paths) */
.pg-pills.is-3{grid-template-columns:repeat(3,1fr);}
/* professional notice / disclaimer */
.pg-notice{max-width:900px;margin:0 auto;padding:26px 30px;border-radius:18px;
    background:var(--overlay-gold);border:1px solid rgba(200,166,70,.4);
    border-inline-start:5px solid var(--color-secondary);}
.pg-notice h3{display:flex;align-items:center;gap:10px;margin:0 0 10px;font-size:18px;color:var(--color-primary);}
.pg-notice h3 i{color:var(--color-secondary-dark);}
.pg-notice p{margin:0;font-size:14.5px;line-height:1.95;color:var(--color-gray-700);}
@media (max-width:1024px){.pg-pills.is-3{grid-template-columns:repeat(2,1fr);}}
@media (max-width:768px){
    .pg-table.is-plan th,.pg-table.is-plan td{padding:13px 12px;font-size:14px;}
    .pg-table.is-plan .pg-num{width:44px;}
    .pg-table.is-plan .pg-hrs{width:70px;}
    .pg-notice{padding:20px 18px;}
}
@media (max-width:560px){.pg-pills.is-3{grid-template-columns:1fr;}}
#outcomes,#assessment{scroll-margin-top:170px;}
@media (max-width:1024px){#outcomes,#assessment{scroll-margin-top:150px;}}

/* a11y.css paints every <th> navy with white text; body-row headers in our tables sit on the
   row's own background instead, otherwise their navy text disappears into a navy cell */
.pg-table tbody th{background:transparent;color:var(--color-primary);text-align:start;}
.pg-table.is-plan tfoot th[scope="row"]{background:var(--color-primary);color:var(--color-white);}