.pf-quiz {
  --pf-orange: #F07848;
  --pf-orange-dark: #C1521F;
  --pf-green: #2FA847;
  --pf-green-dark: #1F7A33;
  --pf-periwinkle: #9090C0;
  --pf-ink: #1B1A1D;
  --pf-cream: #F7F3EA;
  --pf-paper: #FFFDF9;
  --pf-bg: #E6E1D7;

  background: var(--pf-bg);
  font-family: Manrope, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  color: var(--pf-ink);
  padding: 28px 16px 60px;
}

.pf-quiz * { box-sizing: border-box; }
.pf-quiz a { color: var(--pf-orange-dark); }

.pf-quiz .pf-h1, .pf-quiz .pf-h2 {
  font-family: "P22MackinacProBold", Lora, Georgia, serif;
  font-weight: 400;
  color: var(--pf-ink);
  margin: 0;
}
.pf-quiz .pf-h1 em, .pf-quiz .pf-h2 em { font-family: Lora, Georgia, serif; color: var(--pf-orange-dark); font-style: italic; }
.pf-quiz .pf-h1 { font-size: 40px; line-height: 1.1; margin-top: 14px; }
.pf-quiz .pf-h2 { font-size: 28px; line-height: 1.2; }
.pf-quiz .pf-body-text { font-size: 15.5px; line-height: 1.6; color: rgba(27,26,29,.68); margin-top: 14px; }
.pf-quiz .pf-body-text p { margin: 0; }

.pf-quiz .pf-hero-svg { width: 240px; display: block; }

.pf-quiz .pf-eyebrow {
  display: inline-flex; align-self: flex-start; align-items: center; gap: 8px;
  padding: 6px 12px; border-radius: 20px; background: rgba(240,120,72,.14);
  font: 600 10.5px/1 Manrope, sans-serif; letter-spacing: .12em; color: var(--pf-orange-dark);
  text-transform: uppercase; margin-top: 18px;
}
.pf-quiz .pf-eyebrow--orange { color: var(--pf-orange-dark); background: none; padding: 0; margin: 0; }
.pf-quiz .pf-eyebrow--muted { color: rgba(27,26,29,.5); background: none; padding: 0; margin: 0; }

.pf-quiz .pf-stat-row { display: flex; gap: 22px; margin-top: 26px; align-items: center; }
.pf-quiz .pf-stat-num { font: 800 24px/1 Manrope, sans-serif; }
.pf-quiz .pf-stat-label { margin-top: 6px; font: 500 10.5px/1 Manrope, sans-serif; letter-spacing: .08em; color: rgba(27,26,29,.5); text-transform: uppercase; }
.pf-quiz .pf-stat-sep { width: 1px; height: 30px; background: rgba(27,26,29,.14); }

.pf-quiz .pf-cta-row { display: flex; align-items: center; gap: 14px; margin-top: 26px; flex-wrap: wrap; }

.pf-quiz .pf-btn {
  cursor: pointer; display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 24px; border-radius: 30px; font: 700 14.5px/1 Manrope, sans-serif;
  border: none; transition: transform .18s ease, box-shadow .18s ease; text-decoration: none;
}
.pf-quiz .pf-btn:disabled { cursor: not-allowed; opacity: .4; }
.pf-quiz .pf-btn--primary { background: var(--pf-orange); color: var(--pf-ink); box-shadow: 0 8px 20px rgba(240,120,72,.36); }
.pf-quiz .pf-btn--primary:not(:disabled):hover { transform: translateY(-2px); }
.pf-quiz .pf-btn--dark { background: var(--pf-ink); color: var(--pf-paper); }
.pf-quiz .pf-btn--dark:not(:disabled):hover { transform: translateY(-2px); }
.pf-quiz .pf-btn--outline { background: transparent; border: 1.5px solid rgba(27,26,29,.25); color: var(--pf-ink); }
.pf-quiz .pf-btn--block { justify-content: center; width: 100%; }
.pf-quiz .pf-arrow { font-size: 16px; }
.pf-quiz .pf-link-btn {
  cursor: pointer; background: none; border: none; font: 600 13px/1 Manrope, sans-serif;
  color: rgba(27,26,29,.45); padding: 0;
}

.pf-quiz .pf-topbar {
  max-width: 1180px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between;
  background: var(--pf-paper); border: 1px solid rgba(27,26,29,.1); border-radius: 14px 14px 0 0;
  padding: 14px 24px;
}
.pf-quiz .pf-topbar-left, .pf-quiz .pf-topbar-right { display: flex; align-items: center; gap: 16px; }
.pf-quiz .pf-wordmark { height: 24px; display: block; }
.pf-quiz .pf-divider { width: 1px; height: 20px; background: rgba(27,26,29,.14); }
.pf-quiz .pf-course-label { font: 500 12px/1 Manrope, sans-serif; color: rgba(27,26,29,.6); }
.pf-quiz .pf-status { font: 600 10.5px/1 Manrope, sans-serif; letter-spacing: .1em; color: rgba(27,26,29,.45); text-transform: uppercase; }
.pf-quiz .pf-dots { display: flex; gap: 3px; padding: 5px 8px; border: 1px solid rgba(27,26,29,.13); border-radius: 20px; }
.pf-quiz .pf-dot { height: 5px; border-radius: 3px; background: rgba(27,26,29,.16); transition: all .35s ease; }
.pf-quiz .pf-dot--done { background: var(--pf-green); }
.pf-quiz .pf-dot--active { background: var(--pf-orange); width: 16px !important; }
.pf-quiz .pf-lang { display: flex; align-items: center; gap: 4px; padding: 6px 11px; border-radius: 20px; background: rgba(27,26,29,.06); font: 600 11.5px/1 Manrope, sans-serif; }
.pf-quiz .pf-lang-dim { opacity: .35; }

.pf-quiz .pf-progressbar { max-width: 1180px; margin: 0 auto; height: 3px; background: rgba(27,26,29,.08); }
.pf-quiz .pf-progressbar-fill { height: 3px; width: 0%; background: linear-gradient(90deg, var(--pf-orange), var(--pf-green)); transition: width .6s ease; }

.pf-quiz .pf-stage {
  max-width: 1180px; margin: 0 auto; background: var(--pf-cream);
  border: 1px solid rgba(27,26,29,.1); border-top: none; border-radius: 0 0 14px 14px;
  min-height: 640px; padding: 40px;
}

.pf-quiz .pf-screen { display: none; animation: pfFadeIn .25s ease; }
.pf-quiz .pf-screen--active { display: block; }
@keyframes pfFadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* Landing */
.pf-quiz .pf-landing-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 36px; align-items: center; }
.pf-quiz .pf-landing-right { display: flex; flex-direction: column; gap: 12px; }
.pf-quiz .pf-module-card { padding: 18px 20px; border-radius: 14px; background: var(--pf-paper); border: 1px solid rgba(27,26,29,.1); display: flex; gap: 16px; align-items: flex-start; transition: border-color .2s ease; cursor: pointer; }
.pf-quiz .pf-module-card--current { border-color: var(--pf-orange); }
.pf-quiz .pf-module-num { flex: none; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font: 400 16px/1 Lora, Georgia, serif; }
.pf-quiz .pf-module-title { font: 700 15.5px/1.3 Manrope, sans-serif; }
.pf-quiz .pf-module-blurb { margin-top: 5px; font: 400 12.5px/1.5 Manrope, sans-serif; color: rgba(27,26,29,.6); }
.pf-quiz .pf-module-meta { display: flex; align-items: center; gap: 9px; margin-top: 10px; font: 600 10.5px/1 Manrope, sans-serif; letter-spacing: .06em; color: var(--pf-green-dark); text-transform: uppercase; }

/* Video */
.pf-quiz .pf-video-wrap { display: flex; flex-direction: column; height: 100%; }
.pf-quiz .pf-video-header { display: flex; align-items: baseline; gap: 12px; }
.pf-quiz .pf-hr { flex: 1; height: 1px; background: rgba(27,26,29,.13); }
.pf-quiz .pf-hr--spaced { margin: 22px 0; }
.pf-quiz .pf-muted-sm { font: 500 11.5px/1 Manrope, sans-serif; color: rgba(27,26,29,.5); }
.pf-quiz #pfVideoTitle { margin: 14px 0 18px; max-width: 700px; }
.pf-quiz .pf-video-box { position: relative; flex: 1; min-height: 320px; border-radius: 12px; overflow: hidden; background: var(--pf-ink); }
.pf-quiz .pf-video-box iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.pf-quiz .pf-video-footer { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 20px; flex-wrap: wrap; }
.pf-quiz .pf-video-blurb { max-width: 620px; font: 400 14px/1.6 Manrope, sans-serif; color: rgba(27,26,29,.62); }

/* Question */
.pf-quiz .pf-q-grid { display: grid; grid-template-columns: 1fr; gap: 0; transition: grid-template-columns .4s ease; }
.pf-quiz .pf-q-grid.pf-revealed { grid-template-columns: 1.05fr .95fr; }
.pf-quiz .pf-q-meta { display: flex; align-items: center; gap: 12px; }
.pf-quiz .pf-q-count { font: 600 11px/1 Manrope, sans-serif; letter-spacing: .12em; color: var(--pf-orange-dark); text-transform: uppercase; }
.pf-quiz .pf-q-sep { width: 1px; height: 13px; background: rgba(27,26,29,.2); }
.pf-quiz .pf-q-modname { font: 500 11.5px/1 Manrope, sans-serif; color: rgba(27,26,29,.55); }
.pf-quiz .pf-q-kind { margin-left: auto; font: 600 10.5px/1 Manrope, sans-serif; letter-spacing: .1em; color: rgba(27,26,29,.42); text-transform: uppercase; }
.pf-quiz .pf-q-prompt { margin-top: 16px; max-width: 640px; }

.pf-quiz .pf-clip-box { position: relative; margin-top: 18px; height: 170px; border-radius: 11px; overflow: hidden; background: var(--pf-ink); display: flex; align-items: center; gap: 14px; padding: 0 22px; }
.pf-quiz .pf-clip-play { flex: none; width: 52px; height: 52px; border-radius: 50%; background: var(--pf-orange); color: var(--pf-ink); border: none; font-size: 17px; cursor: pointer; }
.pf-quiz .pf-clip-info { flex: 1; min-width: 0; }
.pf-quiz .pf-clip-title { font: 600 12.5px/1.3 Manrope, sans-serif; color: var(--pf-paper); }
.pf-quiz .pf-clip-bar-track { margin-top: 8px; height: 3px; border-radius: 3px; background: rgba(255,255,255,.2); overflow: hidden; }
.pf-quiz .pf-clip-bar-fill { height: 100%; width: 0%; background: var(--pf-orange); transition: width .1s linear; }
.pf-quiz .pf-clip-slot { margin-top: 8px; font: 500 11px/1 ui-monospace, Menlo, monospace; color: rgba(255,253,249,.5); }

.pf-quiz .pf-options { display: flex; flex-direction: column; gap: 9px; margin-top: 20px; }
.pf-quiz .pf-option { cursor: pointer; display: flex; align-items: flex-start; gap: 13px; padding: 14px 16px; border-radius: 11px; background: var(--pf-paper); border: 1.5px solid rgba(27,26,29,.1); transition: background .18s ease, border-color .18s ease; }
.pf-quiz .pf-option--selected { background: rgba(240,120,72,.1); border-color: var(--pf-orange); }
.pf-quiz .pf-option--correct { background: rgba(47,168,71,.1); border-color: var(--pf-green); }
.pf-quiz .pf-option--incorrect { background: rgba(199,60,49,.08); border-color: #C7423A; }
.pf-quiz .pf-option-mark { flex: none; width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid rgba(27,26,29,.28); display: flex; align-items: center; justify-content: center; font: 700 12px/1 Manrope, sans-serif; color: transparent; }
.pf-quiz .pf-option--multi .pf-option-mark { border-radius: 6px; }
.pf-quiz .pf-option--selected .pf-option-mark { background: var(--pf-orange); border-color: var(--pf-orange); color: var(--pf-ink); }
.pf-quiz .pf-option--correct .pf-option-mark { background: var(--pf-green); border-color: var(--pf-green); color: var(--pf-paper); }
.pf-quiz .pf-option--incorrect .pf-option-mark { background: #C7423A; border-color: #C7423A; color: var(--pf-paper); }
.pf-quiz .pf-option-label { flex: 1; font: 500 14.5px/1.5 Manrope, sans-serif; }

.pf-quiz .pf-slider-wrap { margin-top: 26px; }
.pf-quiz .pf-slider-row { display: flex; align-items: baseline; justify-content: space-between; }
.pf-quiz .pf-slider-value { font: 800 38px/1 Manrope, sans-serif; color: var(--pf-orange-dark); }
.pf-quiz .pf-slider-pct { font-size: 18px; opacity: .6; }
.pf-quiz .pf-slider-reading { font: 500 13px/1 Manrope, sans-serif; color: rgba(27,26,29,.6); }
.pf-quiz .pf-slider-input { width: 100%; margin-top: 16px; accent-color: var(--pf-orange); height: 6px; }
.pf-quiz .pf-slider-labels { display: flex; justify-content: space-between; margin-top: 10px; font: 500 11.5px/1 Manrope, sans-serif; color: rgba(27,26,29,.45); }

.pf-quiz .pf-q-footer { display: flex; align-items: center; gap: 16px; margin-top: 28px; padding-top: 20px; flex-wrap: wrap; }
.pf-quiz .pf-q-hint { margin-left: auto; font: 500 12px/1 Manrope, sans-serif; color: rgba(27,26,29,.4); }

.pf-quiz .pf-reveal-panel { overflow: hidden; opacity: 0; max-height: 0; transition: opacity .35s ease; background: var(--pf-paper); border-radius: 12px; margin-top: 24px; }
.pf-quiz .pf-q-grid.pf-revealed .pf-reveal-panel { opacity: 1; max-height: none; margin-top: 0; margin-left: 24px; }
.pf-quiz .pf-reveal-inner { padding: 28px; }
.pf-quiz .pf-expert-row { display: flex; align-items: center; gap: 10px; }
.pf-quiz .pf-expert-avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--pf-periwinkle); color: var(--pf-paper); display: flex; align-items: center; justify-content: center; font: 800 13px/1 Manrope, sans-serif; }
.pf-quiz .pf-expert-label { font: 700 13px/1.2 Manrope, sans-serif; }
.pf-quiz .pf-expert-name { margin-top: 3px; font: 500 11.5px/1 Manrope, sans-serif; color: rgba(27,26,29,.55); }
.pf-quiz .pf-expert-text { margin: 18px 0 0; font: 400 15.5px/1.62 Lora, Georgia, serif; }
.pf-quiz .pf-go-deeper { font: 600 10.5px/1 Manrope, sans-serif; letter-spacing: .12em; color: rgba(27,26,29,.5); text-transform: uppercase; }
.pf-quiz .pf-expert-link { display: flex; align-items: center; gap: 10px; margin-top: 10px; padding: 11px 13px; border-radius: 9px; background: var(--pf-cream); text-decoration: none; color: var(--pf-ink); cursor: pointer; transition: background .16s ease; }
.pf-quiz a.pf-expert-link:hover { background: rgba(240,120,72,.16); }
.pf-quiz .pf-expert-link-kind { font: 600 10px/1 Manrope, sans-serif; letter-spacing: .06em; padding: 4px 7px; border-radius: 4px; background: var(--pf-green); color: var(--pf-paper); text-transform: uppercase; }
.pf-quiz .pf-expert-link-title { flex: 1; font: 600 13px/1.4 Manrope, sans-serif; }

/* Break */
.pf-quiz .pf-break-wrap { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; min-height: 500px; padding: 0 40px; }
.pf-quiz .pf-break-circle { position: relative; width: 96px; height: 96px; display: flex; align-items: center; justify-content: center; }
.pf-quiz .pf-break-circle::before { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 1px solid rgba(27,26,29,.16); }
.pf-quiz .pf-break-pulse { position: absolute; inset: 8px; border-radius: 50%; background: var(--pf-green); opacity: .28; animation: pfPulse 3.2s ease-in-out infinite; }
.pf-quiz .pf-break-num { font: 400 34px/1 Lora, Georgia, serif; }
@keyframes pfPulse { 0%, 100% { opacity: .28; transform: scale(1); } 50% { opacity: .7; transform: scale(1.3); } }
.pf-quiz .pf-break-eyebrow { margin-top: 22px; font: 600 11px/1 Manrope, sans-serif; letter-spacing: .16em; color: var(--pf-green-dark); text-transform: uppercase; }
.pf-quiz .pf-break-body { max-width: 560px; }
.pf-quiz .pf-break-wrap .pf-btn { margin-top: 28px; }

/* Results */
.pf-quiz .pf-results-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
.pf-quiz .pf-profile-list { display: flex; flex-direction: column; gap: 18px; margin-top: 24px; }
.pf-quiz .pf-profile-head { display: flex; align-items: baseline; justify-content: space-between; }
.pf-quiz .pf-profile-label { font: 700 13.5px/1 Manrope, sans-serif; }
.pf-quiz .pf-profile-tag { font: 600 12px/1 Manrope, sans-serif; color: var(--pf-green-dark); }
.pf-quiz .pf-profile-track { margin-top: 8px; height: 8px; border-radius: 5px; background: rgba(27,26,29,.09); overflow: hidden; }
.pf-quiz .pf-profile-fill { height: 8px; border-radius: 5px; width: 0%; transition: width 1s ease; }
.pf-quiz .pf-profile-note { margin-top: 8px; font: 400 12.5px/1.5 Manrope, sans-serif; color: rgba(27,26,29,.6); }

.pf-quiz .pf-claim-form { margin-top: 26px; padding-top: 22px; border-top: 1px solid rgba(27,26,29,.1); }
.pf-quiz .pf-claim-fields { display: flex; gap: 12px; flex-wrap: wrap; }
.pf-quiz .pf-input { flex: 1; min-width: 200px; padding: 12px 14px; border-radius: 10px; border: 1.5px solid rgba(27,26,29,.15); font: 500 14px/1 Manrope, sans-serif; background: var(--pf-paper); }
.pf-quiz .pf-claim-error { margin-top: 10px; font: 600 12.5px/1.4 Manrope, sans-serif; color: #B33A3A; }

.pf-quiz .pf-resource-list { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; }
.pf-quiz .pf-resource { display: flex; align-items: center; gap: 14px; padding: 14px 15px; border-radius: 11px; background: var(--pf-paper); border: 1px solid rgba(27,26,29,.08); text-decoration: none; color: var(--pf-ink); transition: background .16s ease; }
.pf-quiz .pf-resource:hover { background: rgba(240,120,72,.1); }
.pf-quiz .pf-resource-thumb { width: 44px; height: 44px; flex: none; border-radius: 9px; background: rgba(240,120,72,.12); color: var(--pf-orange-dark); display: flex; align-items: center; justify-content: center; }
.pf-quiz .pf-resource-thumb svg { width: 22px; height: 22px; }
.pf-quiz .pf-resource-body { flex: 1; min-width: 0; }
.pf-quiz .pf-resource-title { font: 700 14px/1.35 Manrope, sans-serif; overflow-wrap: break-word; word-break: break-word; }
.pf-quiz .pf-resource-blurb { margin-top: 4px; font: 400 12.5px/1.4 Manrope, sans-serif; color: rgba(27,26,29,.6); }
.pf-quiz .pf-resource-kind { font: 600 10px/1 Manrope, sans-serif; letter-spacing: .08em; color: rgba(27,26,29,.45); text-transform: uppercase; }

/* Certificate */
.pf-quiz .pf-cert-wrap { display: flex; gap: 44px; align-items: center; flex-wrap: wrap; justify-content: center; padding: 20px 0; }
.pf-quiz .pf-cert-card { width: 460px; max-width: 100%; padding: 34px 36px; border-radius: 6px; background: var(--pf-paper); box-shadow: 0 18px 44px rgba(27,26,29,.16); border-top: 6px solid var(--pf-orange); }
.pf-quiz .pf-cert-card-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.pf-quiz .pf-cert-wordmark { height: 22px; }
.pf-quiz .pf-cert-logo-mark { height: 34px; }
.pf-quiz .pf-cert-footer { margin-top: 18px; font: 500 9.5px/1.4 Manrope, sans-serif; letter-spacing: .04em; color: rgba(27,26,29,.4); text-align: center; }
.pf-quiz .pf-cert-label { margin-top: 20px; font: 500 11px/1 Manrope, sans-serif; letter-spacing: .14em; color: rgba(27,26,29,.55); text-transform: uppercase; }
.pf-quiz .pf-cert-course { margin-top: 14px; font: 400 28px/1.15 "P22MackinacProBold", Lora, Georgia, serif; }
.pf-quiz .pf-cert-awarded { margin-top: 18px; font: 400 14px/1.6 Manrope, sans-serif; color: rgba(27,26,29,.7); }
.pf-quiz .pf-cert-name { margin-top: 8px; font: 400 24px/1.2 Lora, Georgia, serif; font-style: italic; border-bottom: 1px solid rgba(27,26,29,.2); padding-bottom: 10px; }
.pf-quiz .pf-cert-row { display: flex; gap: 28px; margin-top: 22px; flex-wrap: wrap; }
.pf-quiz .pf-cert-row-label { font: 500 10px/1 Manrope, sans-serif; letter-spacing: .1em; color: rgba(27,26,29,.5); text-transform: uppercase; }
.pf-quiz .pf-cert-row-value { margin-top: 6px; font: 700 14px/1 Manrope, sans-serif; }
.pf-quiz .pf-mono { font-family: ui-monospace, Menlo, monospace; }
.pf-quiz .pf-cert-side { max-width: 320px; }
.pf-quiz .pf-cert-side-img { width: 200px; display: block; margin-bottom: 18px; }
.pf-quiz .pf-cert-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 22px; }

@media (max-width: 768px) {
  .pf-quiz { padding: 16px 10px 40px; }
  .pf-quiz .pf-stage { padding: 22px; border-radius: 0 0 14px 14px; }
  .pf-quiz .pf-topbar { flex-direction: column; align-items: flex-start; gap: 10px; border-radius: 14px 14px 0 0; }
  .pf-quiz .pf-landing-grid { grid-template-columns: 1fr; }
  .pf-quiz .pf-hero-svg { width: 180px; }
  .pf-quiz .pf-h1 { font-size: 30px; }
  .pf-quiz .pf-h2 { font-size: 23px; }
  .pf-quiz .pf-q-grid.pf-revealed { grid-template-columns: 1fr; }
  .pf-quiz .pf-q-grid.pf-revealed .pf-reveal-panel { margin-left: 0; margin-top: 20px; }
  .pf-quiz .pf-results-grid { grid-template-columns: 1fr; }
  .pf-quiz .pf-cert-wrap { flex-direction: column; }
  .pf-quiz .pf-cert-card { width: 100%; padding: 26px; }
  .pf-quiz .pf-video-footer { flex-direction: column; align-items: stretch; }
  .pf-quiz .pf-claim-fields { flex-direction: column; }
}