/* Shared presentation; scope excludes the classroom, admin, payment and exam engines. */
#app[data-package-experience] { --package-border: #d9e3ec; --package-muted: #526780; }
#app[data-package-experience] .wrap { min-width: 0; }
.v44-package-hero.pg-hero.package-exp-branded-hero { min-height: 0; padding-block: clamp(36px, 5vw, 68px); background: radial-gradient(ellipse at 18% 25%, #20516c80, transparent 55%), linear-gradient(125deg, #10283e, #0c2038) !important; border-bottom: 4px solid var(--v43-accent, #f0741a); }
.package-exp-branded-hero.v44-package-hero .v43-package-layout { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(24px, 4vw, 60px); align-items: center; }
.package-exp-branded-hero.v44-package-hero .v43-package-copy { width: auto; min-width: 0; text-shadow: none; }
.package-exp-branded-hero.v44-package-hero .crumb { margin-bottom: 24px; }
.package-exp-branded-hero .v44-hero-heading h1 { font-size: clamp(1.8rem, 3.5vw, 3rem); line-height: 1.45; }
.package-exp-hero-art { margin: 0; min-width: 0; padding: 12px; border: 1px solid #ffffff25; border-radius: 24px; background: #ffffff06; box-shadow: 0 22px 60px #020f2433; }
.package-exp-hero-art img { display: block; width: 100%; height: auto; aspect-ratio: 10 / 7; object-fit: contain; border-radius: 16px; }
.package-exp-hero-art figcaption { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; padding: 12px 10px 6px; color: #e7eff7; font-size: .82rem; }
.package-exp-hero-art figcaption bdi { font: 700 .9rem var(--fm, monospace); color: #ffc58f; }
@media (max-width: 900px) {
  .package-exp-branded-hero.v44-package-hero .v43-package-layout { grid-template-columns: minmax(0, 1fr); }
  .package-exp-hero-art { width: min(100%, 520px); justify-self: center; }
  .package-exp-hero-art img { max-height: 300px; }
}
.package-exp-overview { padding-block: 25px 0; }
.package-exp-eyebrow { color: #985020; font-weight: 800; font-size: .75rem; letter-spacing: .035em; margin-bottom: 10px; }
.package-exp-outline { display: flex; flex-wrap: wrap; gap: 8px; }
.package-exp-jump { min-height: 44px; padding: 9px 14px; border: 1px solid var(--package-border); background: #fff; color: #183955; border-radius: 12px; font: 700 .85rem var(--fb, sans-serif); line-height: 1.6; text-align: start; }
.package-exp-jump:hover { background: #edf3f7; border-color: #9db3c7; }
.package-exp-detail { grid-template-columns: minmax(0, 1fr) minmax(260px, 320px); }
.package-exp-detail > * { min-width: 0; }
.package-exp-promo { padding: clamp(18px, 3vw, 28px); margin-bottom: 26px; border: 1px solid var(--package-border); border-radius: 18px; background: #f3f7fa; }
.package-exp-promo h2 { font: 800 1.25rem var(--fd, sans-serif); line-height: 1.6; color: var(--navy); scroll-margin-top: calc(var(--hdr, 82px) + 24px); }
.package-exp-promo p { color: var(--package-muted); font-size: .88rem; line-height: 1.8; margin-block: 8px 16px; }
.package-exp-promo-player { aspect-ratio: 16 / 9; background: #0e2444; overflow: hidden; border-radius: 12px; margin-bottom: 14px; }
.package-exp-promo-player iframe, .package-exp-promo-player video { display: block; width: 100%; height: 100%; border: 0; }
.package-exp-promo-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }
.package-exp-promo-poster.btn { position: relative; display: block; width: 100%; padding: 0; border: 0; overflow: hidden; border-radius: 12px; background: #0e2444; }
.package-exp-promo-poster img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: contain; }
.package-exp-promo-poster span { display: block; padding: 14px; background: #102d49; color: #fff; font-size: 1rem; }
.package-exp-promo-poster span::before { content: ''; display: inline-block; width: 0; height: 0; margin-inline-end: 10px; border-block: 7px solid transparent; border-inline-start: 11px solid currentColor; }
.package-exp-promo-actions a { min-height: 44px; display: inline-flex; align-items: center; text-decoration: underline; }
.package-exp-promo [hidden] { display: none !important; }
.package-exp-promo-in-hero { width: 100%; min-width: 0; margin: 0; padding: clamp(14px, 2vw, 22px); border-color: #ffffff40; background: #f4f7fa; box-shadow: 0 22px 60px #020f2433; }
.package-exp-promo-in-hero > p { display: none; }
.package-exp-promo-heading { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.package-exp-promo-heading h2 { margin: 0; font-size: clamp(1rem, 1.7vw, 1.25rem); }
.package-exp-promo-logo { flex: 0 0 64px; width: 64px; height: 64px; object-fit: contain; border-radius: 50%; }
.package-exp-promo-in-hero .package-exp-promo-actions a { color: #225777; }
.package-exp-promo :focus-visible { outline: 3px solid #bf621c; outline-offset: 3px; }
.package-exp-certificate { margin-block: 32px; padding: clamp(16px, 3vw, 28px); border: 1px solid #d8c69e; border-radius: 18px; background: linear-gradient(135deg, #fffdf8, #f5f2f9); }
.package-exp-certificate h2 { margin: 0 0 10px; color: #33264f; font-size: 1.2rem; }
.package-exp-certificate p, .package-exp-certificate-dialog p { color: #596377; line-height: 1.9; margin: 0 0 18px; }
.package-exp-certificate-preview { display: block; border-radius: 10px; overflow: hidden; background: #33264f; color: #fff; text-align: center; text-decoration: none; box-shadow: 0 12px 26px #33264f14; }
.package-exp-certificate-preview img { display: block; width: 100%; height: auto; aspect-ratio: 1600 / 1132; object-fit: contain; }
.package-exp-certificate-preview span { display: block; min-height: 44px; padding: 11px 16px; font-weight: 600; }
.package-exp-certificate-dialog { box-sizing: border-box; width: min(1200px, calc(100% - 24px)); max-width: none; max-height: calc(100dvh - 24px); margin: auto; padding: clamp(14px, 3vw, 28px); border: 1px solid #d8c69e; border-radius: 16px; background: #fffdf8; overflow: auto; overscroll-behavior: contain; color: #33264f; }
.package-exp-certificate-dialog::backdrop { background: #111528bd; }
.package-exp-certificate-dialog-header { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 12px; }
.package-exp-certificate-dialog-header h2 { margin: 0; font-size: clamp(1rem, 2vw, 1.3rem); }
.package-exp-certificate-dialog-header button { flex-shrink: 0; min-height: 44px; }
.package-exp-certificate-dialog > img { display: block; width: 100%; height: auto; }
.package-exp-certificate-dialog > a { display: inline-flex; align-items: center; min-height: 44px; margin-top: 10px; color: #33264f; text-decoration: underline; }
.package-exp-certificate :focus-visible { outline: 3px solid #bf621c; outline-offset: 3px; }
@media (max-width: 480px) { .package-exp-certificate-dialog-header { flex-wrap: wrap; } }
.package-exp-detail .pd-spec { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.package-exp-detail .pd-s { min-width: 0; overflow-wrap: anywhere; }
.package-exp-detail .pd-s b { line-height: 1.6; }
.package-exp-detail .pd-s b:not(.num), .package-exp-detail .pd-s b.package-exp-text-value { font-family: var(--fb, 'IBM Plex Sans Arabic', sans-serif); letter-spacing: normal; }
.package-exp-detail .pd-s b.package-exp-text-value { direction: inherit; unicode-bidi: plaintext; }
.package-exp-detail .kind-g, .package-exp-detail .chap-g { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.package-exp-detail .kind, .package-exp-detail .chap-c { min-width: 0; }
.package-exp-detail .obj { align-items: start; }
.package-exp-detail .obj p { min-width: 0; }
.package-exp-detail .qtype-row { flex-wrap: wrap; }
.package-exp-detail [role="link"] { border-radius: 8px; }
.package-exp-detail [role="link"]:hover { background: #f1f5f9; }
.package-exp-heading, #package-detail-compare, #package-learning-progress, .package-exp-workspace { scroll-margin-top: calc(var(--hdr, 82px) + 24px); }
#app[data-package-experience] .v32-compare-scroll { overscroll-behavior-inline: contain; }
#app[data-package-experience] .v32-compare th, #app[data-package-experience] .v32-compare td { overflow-wrap: break-word; }
.package-exp-workspace { display: grid; grid-template-columns: 244px minmax(0, 1fr); gap: 22px; align-items: start; margin-block: 24px 44px; }
.package-exp-navigation.card { position: sticky; top: calc(var(--hdr, 82px) + 18px); max-height: calc(100vh - var(--hdr, 82px) - 36px); max-height: calc(100dvh - var(--hdr, 82px) - 36px); overflow-y: auto; scrollbar-width: thin; padding: 18px; margin: 0; border: 1px solid var(--package-border); border-radius: 20px; background: #fff; }
.package-exp-navigation > p { font-size: .78rem; color: var(--package-muted); margin: 7px 0 16px; line-height: 1.8; }
.package-exp-nav { display: grid; gap: 7px; }
.package-exp-nav .package-exp-step { display: flex; align-items: center; flex-direction: row; gap: 10px; width: 100%; min-width: 0; min-height: 64px; padding: 11px; border: 1px solid #e1e8ef; border-radius: 12px; background: #f8fafc; color: #183955; text-align: start; box-shadow: none; }
.package-exp-nav .package-exp-step:hover { background: #eef4f8; border-color: #aac0d2; }
.package-exp-nav .package-exp-step[aria-current="true"] { background: #153c58; border-color: #153c58; color: #fff; box-shadow: inset 3px 0 0 #ed9b55; }
[dir="rtl"] .package-exp-nav .package-exp-step[aria-current="true"] { box-shadow: inset -3px 0 0 #ed9b55; }
.package-exp-step-number { display: inline-grid; place-items: center; flex: 0 0 28px; width: 28px; height: 28px; font: 600 .7rem var(--fm, monospace); border: 1px solid currentColor; border-radius: 8px; opacity: .8; }
.package-exp-step-copy { min-width: 0; display: grid; gap: 3px; }
.package-exp-step-copy strong { font-size: .86rem; line-height: 1.6; overflow-wrap: anywhere; }
.package-exp-step-copy small { font-size: .7rem; line-height: 1.5; opacity: .87; }
.package-exp-step.done:not([aria-current="true"]) .package-exp-step-number { color: #14684a; background: #e9f6ee; }
.package-exp-nav .package-exp-progress-jump { margin-top: 6px; color: #215a78; background: #edf5f8; text-align: center; }
.package-exp-workspace > .learning-content-frame { margin: 0; min-width: 0; padding: 22px; border-radius: 20px; }
.package-exp-workspace > .learning-content-frame > .card:first-child { margin-top: 0; }
.package-exp-workspace .passing-roadmap { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.package-exp-workspace .passing-roadmap .wk { min-width: 0; }
.package-exp-workspace .wk-b { min-width: 0; overflow-wrap: anywhere; }
.package-exp-workspace .resource-row { flex-wrap: wrap; min-width: 0; }
.package-exp-workspace .learning-chapter .ch-h { gap: 12px; flex-wrap: wrap; }
.package-exp-workspace .learning-lesson .ls-t { min-width: 0; overflow-wrap: anywhere; }
.package-exp-outline :focus-visible, .package-exp-nav :focus-visible, .package-exp-detail :focus-visible, #app[data-package-experience] .v32-compare-scroll:focus-visible { outline: 3px solid #bf621c; outline-offset: 3px; }
@media (max-width: 1100px) {
  .package-exp-workspace { grid-template-columns: minmax(0, 1fr); }
  .package-exp-navigation.card { position: static; max-height: none; overflow: visible; }
  .package-exp-nav { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .package-exp-nav .package-exp-progress-jump { margin-top: 0; }
}
@media (max-width: 900px) {
  .package-exp-detail { grid-template-columns: minmax(0, 1fr); }
  .package-exp-detail > .side { position: static; }
  .package-exp-detail > .side > .card { position: static; }
}
@media (max-width: 640px) {
  .package-exp-overview { padding-block-start: 18px; }
  .package-exp-outline { gap: 6px; }
  .package-exp-outline .package-exp-jump { font-size: .78rem; padding: 8px 11px; }
  .package-exp-detail .pd-spec { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .package-exp-detail .kind-g, .package-exp-detail .chap-g { grid-template-columns: minmax(0, 1fr); }
  .package-exp-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .package-exp-nav .package-exp-step { gap: 7px; padding: 9px; min-height: 70px; }
  .package-exp-navigation.card { padding: 14px; }
  .package-exp-step-number { flex-basis: 25px; width: 25px; height: 25px; font-size: .65rem; }
  .package-exp-step-copy strong { font-size: .78rem; }
  .package-exp-workspace > .learning-content-frame { padding: 12px; border-radius: 16px; }
  .package-exp-workspace .learning-lesson { padding: 10px; }
  .package-exp-workspace .learning-lesson .ls { flex-wrap: wrap; padding: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  #app[data-package-experience] { scroll-behavior: auto; }
  .package-exp-nav *, .package-exp-outline * { transition: none !important; }
}

.package-exp-navigation > h3 { font-size:1.05rem;line-height:1.6;color:#193a56; }
/* Focused package journey: one navigation, compact progress, distinct workspace. */
.package-exp-group { display:grid; gap:7px; min-width:0; }
.package-exp-group-title { margin:12px 3px 3px; font:700 .74rem var(--fb); color:#62758a; }
.package-exp-navigation > p { display:none; }
.package-exp-panel-heading { border-bottom:1px solid #e1e8ef; padding:0 0 17px; margin-bottom:22px; }
.package-exp-panel-heading h2 { font:800 1.35rem var(--fb); color:#183955; margin:0; }
.package-exp-panel-heading .package-exp-eyebrow { font-size:.68rem; display:block; margin-bottom:5px; }
.package-plan-intro { display:flex; gap:18px; align-items:center; justify-content:space-between; margin-bottom:20px; padding:20px; border-radius:14px; background:#eef4f8; }
.package-plan-intro h3 { font-size:1.1rem; margin:0 0 8px; }
.package-plan-intro p { margin:0; line-height:1.9; color:#526780; }
.package-plan-intro .btn { flex-shrink:0; }
.package-exp-readiness { margin-block:8px 18px; border:1px solid #dde6ef; border-radius:12px; background:white; }
.package-exp-readiness summary { padding:12px 18px; cursor:pointer; font-weight:700; color:#244662; }
.package-exp-readiness .readiness-explain { margin:0; border:0; }
#app[data-package-experience="learn"] > .wrap > .grid.g4 { gap:12px; margin-block:22px 8px; }
#app[data-package-experience="learn"] .stat { padding:16px; border-radius:14px; }
#app[data-package-experience="learn"] .stat .num { font-size:1.6rem; }
@media(max-width:1100px) { .package-exp-nav { grid-template-columns:1fr; } .package-exp-group { grid-template-columns:repeat(3,minmax(0,1fr)); } .package-exp-group-title { grid-column:1/-1; } }
@media(max-width:600px) { .package-exp-group { grid-template-columns:repeat(2,minmax(0,1fr)); } .package-exp-nav .package-exp-step { min-height:54px; padding:9px; } .package-plan-intro { flex-direction:column; align-items:stretch; } .package-exp-workspace > .learning-content-frame { padding:16px; } }