.exam-catalogue {
  position: relative;
  overflow: hidden;
  background: #f5f7fa;
  border-top: 1px solid #e2e8f0
}

.exam-catalogue::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(rgba(23, 79, 155, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(23, 79, 155, .035) 1px, transparent 1px), radial-gradient(circle at 95% 12%, rgba(214, 163, 43, .12), transparent 23%);
  background-size: 38px 38px, 38px 38px, auto
}

.exam-catalogue>.container {
  position: relative;
  z-index: 1
}

.exam-catalogue__heading {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(280px, .8fr);
  gap: 70px;
  align-items: end;
  margin-bottom: 42px
}

.exam-catalogue__heading h2 {
  max-width: 720px;
  margin: 0;
  color: var(--navy);
  font-size: clamp(2.2rem, 4vw, 4.2rem)
}

.exam-catalogue__heading p {
  margin: 0;
  color: #506581
}

.exam-catalogue__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px
}

.exam-catalogue-card {
  --card-accent: #174f9b;
  position: relative;
  display: grid;
  grid-template-columns: 100px minmax(0, 1fr);
  min-height: 420px;
  overflow: hidden;
  background: rgba(255, 255, 255, .97);
  border: 1px solid #d7e1ed;
  border-top: 4px solid var(--card-accent);
  box-shadow: 0 22px 55px rgba(6, 28, 67, .08);
  transition: transform .3s ease, box-shadow .3s ease
}

.exam-catalogue-card:nth-child(5) {
  grid-column: 1/-1;
  grid-template-columns: 130px minmax(0, 1fr);
  min-height: 370px
}

.exam-catalogue-card--green {
  --card-accent: #2b9c74
}

.exam-catalogue-card--blue {
  --card-accent: #1b5aa8
}

.exam-catalogue-card--wine {
  --card-accent: #7c2947
}

.exam-catalogue-card--pink {
  --card-accent: #d74e88
}

.exam-catalogue-card--gold {
  --card-accent: #c78d13
}

.exam-catalogue-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 28px 65px rgba(6, 28, 67, .14)
}

.exam-catalogue-card__top {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 36px 20px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--card-accent) 9%, white), #fff)
}

.exam-catalogue-card__number {
  position: absolute;
  left: 18px;
  bottom: 18px;
  color: color-mix(in srgb, var(--card-accent) 22%, white);
  font-size: 2.8rem;
  font-weight: 800;
  letter-spacing: -.08em;
  writing-mode: vertical-rl
}

.exam-catalogue-card__icon {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border: 1px solid color-mix(in srgb, var(--card-accent) 28%, white);
  border-radius: 18px;
  background: #fff;
  color: var(--card-accent)
}

.exam-catalogue-card__icon svg {
  width: 38px;
  height: 38px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round
}

.exam-catalogue-card__content {
  padding: 34px 36px 20px
}

.exam-catalogue-card__kicker {
  min-height: auto !important;
  margin: 0 0 4px !important;
  color: var(--card-accent) !important;
  font-size: .68rem !important;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase
}

.exam-catalogue-card__content h2 {
  margin: 0 0 12px;
  color: var(--navy);
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 2.4rem !important
}

.exam-catalogue-card__summary {
  max-width: 590px;
  margin: 0 !important;
  color: #52657e !important;
  font-size: .9rem !important
}

.exam-catalogue-card__features {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 24px 0 0;
  padding: 0;
  list-style: none
}

.exam-catalogue-card__features li {
  position: relative;
  padding-left: 18px;
  color: #334b68;
  font-size: .72rem
}

.exam-catalogue-card__features li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .48em;
  width: 8px;
  height: 8px;
  border: 2px solid var(--card-accent);
  border-radius: 50%
}

.exam-catalogue-card__footer {
  position: relative;
  grid-column: 2;
  display: grid;
  grid-template-columns: minmax(140px, .75fr) minmax(260px, 1.25fr) auto;
  gap: 20px;
  align-items: center;
  margin: 0 36px;
  padding: 22px 0 30px;
  border-top: 1px solid #dce5ef
}

.exam-catalogue-card__price {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 10px;
  align-items: baseline
}

.exam-catalogue-card__price span {
  width: 100%;
  color: #6c7d93;
  font-size: .62rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase
}

.exam-catalogue-card__price strong {
  color: var(--navy);
  font-size: 1.08rem
}

.exam-catalogue-card__price small {
  color: #6d7e94;
  font-size: .68rem
}

.exam-catalogue-card__links {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 16px
}

.exam-catalogue-card__links>a:first-child {
  color: var(--blue);
  font-size: .72rem;
  font-weight: 800
}

.exam-catalogue-card__links .btn {
  padding: 11px 16px;
  font-size: .75rem
}

.exam-catalogue-card__commerce {
  display: flex;
  gap: 8px
}

.catalogue-icon-button {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid #bfcfe2;
  border-radius: 50%;
  background: #fff;
  color: var(--navy);
  cursor: pointer;
  transition: background .2s, color .2s, transform .2s
}

.catalogue-icon-button:hover,
.catalogue-icon-button[aria-pressed=true] {
  background: var(--navy);
  color: #fff;
  transform: translateY(-2px)
}

.catalogue-icon-button svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round
}

.exam-library-workspace {
  grid-template-columns: minmax(250px, 290px) minmax(270px, 310px) minmax(0, 1fr);
  max-width: none;
  min-height: calc(100vh - var(--visible-navbar-height, 72px));
  background: #f3f6fa;
  border-top: 1px solid #dce4ee
}

.exam-directory--professional,
.resource-sidebar--professional {
  top: var(--visible-navbar-height, 72px);
  height: calc(100vh - var(--visible-navbar-height, 72px));
  max-height: none;
  padding: 0;
  background: #fff;
  overflow: auto
}

.exam-directory--professional {
  border-right: 1px solid #d8e2ee
}

.exam-directory__heading,
.resource-sidebar__heading {
  padding: 30px 26px 22px;
  border-bottom: 1px solid #e1e8f1
}

.exam-directory__heading span,
.resource-sidebar__heading span {
  display: block;
  color: var(--blue);
  font-size: .65rem;
  font-weight: 800;
  letter-spacing: .16em
}

.exam-directory__heading small,
.resource-sidebar__heading small {
  display: block;
  margin-top: 5px;
  color: #78879a;
  font-size: .68rem
}

.exam-directory--professional nav {
  padding: 12px
}

.exam-directory--professional nav>a {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  margin: 4px 0;
  padding: 17px 14px;
  border: 0;
  border-left: 3px solid transparent;
  background: #fff;
  color: var(--navy)
}

.exam-directory--professional nav>a:hover {
  background: #f0f5fb
}

.exam-directory--professional nav>a.active {
  border-left-color: var(--gold);
  background: var(--navy);
  color: #fff
}

.exam-directory--professional nav>a i {
  font-style: normal;
  color: var(--gold);
  font-size: .67rem
}

.exam-directory--professional nav>a b {
  font-size: .92rem
}

.exam-directory--professional nav>a small {
  overflow: hidden;
  color: inherit;
  font-size: .58rem;
  opacity: .68;
  text-overflow: ellipsis;
  white-space: nowrap
}

.exam-directory--professional nav>a em {
  font-style: normal;
  opacity: .45
}

.exam-directory__help {
  margin: 18px;
  padding: 20px;
  background: #edf3fb
}

.exam-directory__help span {
  display: block;
  color: #66788e;
  font-size: .65rem
}

.exam-directory__help a {
  color: var(--blue);
  font-size: .72rem;
  font-weight: 800
}

.resource-sidebar--professional {
  border-right: 1px solid #d8e2ee
}

.resource-sidebar--professional>nav {
  padding: 14px
}

.resource-nav-group {
  display: block;
  margin: 0;
  padding: 14px 0;
  border-bottom: 1px solid #e4eaf2
}

.resource-nav-group__label {
  display: block;
  margin: 0 12px 8px;
  color: #8a96a8;
  font-size: .56rem;
  font-weight: 800;
  letter-spacing: .15em
}

.resource-nav-group>a,
.resource-nav-group>div>a {
  display: flex;
  align-items: center;
  gap: 11px;
  margin: 3px 0;
  padding: 11px 12px;
  border: 0;
  border-left: 3px solid transparent;
  color: #314b6b
}

.resource-nav-group>a:hover,
.resource-nav-group>div>a:hover,
.resource-nav-group>a.active,
.resource-nav-group>div>a.active {
  border-left-color: var(--gold);
  background: #edf4fd;
  color: var(--navy)
}

.resource-nav-group a svg {
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round
}

.resource-nav-group a span {
  min-width: 0
}

.resource-nav-group a b,
.resource-nav-group a small {
  display: block
}

.resource-nav-group a b {
  font-size: .75rem
}

.resource-nav-group a small {
  color: #78899e;
  font-size: .59rem;
  font-weight: 500
}

.resource-nav-group a em {
  margin-left: auto;
  font-style: normal
}

.resource-nav-group summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0;
  padding: 8px 12px;
  color: var(--navy);
  cursor: pointer;
  list-style: none
}

.resource-nav-group summary::-webkit-details-marker {
  display: none
}

.resource-nav-group summary b {
  display: block;
  font-size: .76rem
}

.resource-nav-group summary i {
  font-style: normal
}

.resource-nav-group p {
  padding: 0 12px;
  color: #7a899c;
  font-size: .68rem
}

.exam-library-workspace .exam-workspace__main {
  padding: clamp(38px, 5vw, 76px)
}

.exam-library-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 300px);
  gap: 50px;
  align-items: end;
  padding-bottom: 30px;
  border-bottom: 1px solid #ced9e6
}

.exam-library-hero h1,
.library-page-header h1 {
  max-width: 800px;
  margin-bottom: 20px;
  color: var(--navy);
  font-size: clamp(2.5rem, 4.4vw, 4.9rem)
}

.exam-library-hero p,
.library-page-header p {
  max-width: 720px;
  margin: 0;
  color: #536a86
}

.exam-library-hero aside {
  padding: 20px 0 20px 24px;
  border-left: 3px solid var(--gold)
}

.exam-library-hero aside span,
.exam-library-hero aside small {
  display: block;
  color: #6e8097;
  font-size: .62rem
}

.exam-library-hero aside strong {
  display: block;
  margin: 6px 0;
  color: var(--navy);
  font-size: 1.2rem
}

.exam-library-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 22px 0
}

.exam-library-actions form {
  margin: 0
}

.exam-library-buy {
  padding: 11px 4px;
  border: 0;
  background: transparent;
  color: var(--blue);
  font-weight: 800;
  cursor: pointer
}

.section-heading-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(250px, 390px);
  gap: 40px;
  align-items: end;
  margin-bottom: 24px
}

.section-heading-row h2 {
  margin: 0;
  color: var(--navy);
  font-size: clamp(1.9rem, 3.2vw, 3.2rem)
}

.section-heading-row p {
  margin: 0;
  color: #60738c;
  font-size: .82rem
}

.learning-pathways,
.subject-directory,
.published-library {
  margin-top: 58px
}

.learning-pathways__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px
}

.learning-pathways__grid>a,
.learning-pathways__grid>div {
  min-height: 210px;
  padding: 27px;
  border: 1px solid #d5e0ec;
  background: #fff;
  transition: transform .25s, box-shadow .25s
}

.learning-pathways__grid>a:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 40px rgba(6, 28, 67, .09)
}

.learning-pathways__grid span {
  color: var(--gold);
  font-size: .62rem;
  font-weight: 800;
  letter-spacing: .13em
}

.learning-pathways__grid h3 {
  margin: 28px 0 8px;
  color: var(--navy);
  font-size: 1.25rem
}

.learning-pathways__grid p {
  color: #5b6f88;
  font-size: .78rem
}

.learning-pathways__grid b {
  color: var(--blue);
  font-size: .7rem
}

.subject-directory__grid {
  border-top: 1px solid #cfd9e5
}

.subject-directory__grid>a {
  display: grid;
  grid-template-columns: 55px minmax(0, 1fr) auto;
  gap: 22px;
  align-items: center;
  padding: 25px 14px;
  border-bottom: 1px solid #cfd9e5;
  background: transparent;
  transition: padding .2s, background .2s
}

.subject-directory__grid>a:hover {
  padding-left: 22px;
  background: #fff
}

.subject-directory__grid>a>span {
  color: var(--gold);
  font-size: .7rem
}

.subject-directory__grid h3 {
  margin: 0 0 4px;
  color: var(--navy);
  font-size: 1.05rem
}

.subject-directory__grid p {
  max-width: 720px;
  margin: 0;
  color: #60738b;
  font-size: .75rem
}

.subject-directory__grid small {
  color: #7c8b9e;
  font-size: .62rem
}

.subject-directory__grid>a>b {
  color: var(--blue)
}

.material-library-list {
  border-top: 1px solid #cfd9e5
}

.material-library-list>a {
  display: grid;
  grid-template-columns: 125px minmax(0, 1fr) auto;
  gap: 24px;
  align-items: center;
  padding: 24px 14px;
  border-bottom: 1px solid #cfd9e5;
  background: transparent;
  transition: background .2s
}

.material-library-list>a:hover {
  background: #fff
}

.material-type {
  color: var(--blue);
  font-size: .62rem;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase
}

.material-library-list h2,
.material-library-list h3 {
  margin: 0 0 5px;
  color: var(--navy);
  font-size: 1.05rem
}

.material-library-list p {
  max-width: 700px;
  margin: 0;
  color: #60738c;
  font-size: .74rem
}

.material-library-list small {
  color: #7a899b;
  font-size: .62rem
}

.material-library-list--page {
  margin-top: 34px
}

.material-library-list--page>a {
  grid-template-columns: 125px minmax(0, 1fr) auto auto
}

.material-access {
  padding: 5px 9px;
  background: #fff1d1;
  color: #855f08;
  font-size: .57rem;
  font-weight: 800;
  text-transform: uppercase
}

.material-access.is-free {
  background: #e4f5ee;
  color: #14714f
}

.library-page-header {
  padding-bottom: 32px;
  border-bottom: 1px solid #cfd9e5
}

.library-page-header>div {
  display: flex;
  gap: 10px;
  margin-top: 25px
}

.library-page-header>div span,
.library-page-header>div b {
  padding: 6px 9px;
  font-size: .6rem
}

.library-page-header>div span {
  background: #e7eef8;
  color: #516986
}

.library-page-header>div b {
  background: #fff1d1;
  color: #7b590d
}

.library-empty-state {
  grid-column: 1/-1;
  padding: 44px;
  background: #fff;
  border: 1px solid #d6e0eb;
  border-left: 4px solid var(--gold)
}

.library-empty-state--large {
  max-width: 850px;
  margin: 30px 0;
  padding: clamp(35px, 6vw, 70px)
}

.library-empty-state span {
  color: var(--gold);
  font-size: .65rem;
  font-weight: 800;
  letter-spacing: .14em
}

.library-empty-state h1,
.library-empty-state h2,
.library-empty-state h3 {
  margin: 16px 0;
  color: var(--navy)
}

.library-empty-state p {
  color: #5c7089
}

.resource-document-page {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 380px);
  gap: 40px;
  width: min(1240px, calc(100% - 40px));
  min-height: 65vh;
  margin: auto;
  padding: 65px 0
}

.resource-document-header {
  padding-bottom: 28px;
  border-bottom: 1px solid #d2dce8
}

.resource-document-header h1 {
  max-width: 800px;
  color: var(--navy);
  font-size: clamp(2.5rem, 4.4vw, 4.8rem)
}

.resource-document-header p {
  max-width: 720px;
  color: #586d86
}

.resource-document-header>div {
  display: flex;
  gap: 8px
}

.resource-document-header>div span {
  padding: 6px 9px;
  background: #e8eff8;
  color: #506985;
  font-size: .62rem;
  font-weight: 700
}

.resource-document-actions {
  display: flex;
  gap: 10px;
  padding: 24px 0
}

.resource-preview {
  margin-top: 26px
}

.resource-preview>div {
  display: flex;
  justify-content: space-between;
  padding: 13px 16px;
  background: var(--navy);
  color: #fff;
  font-size: .7rem
}

.resource-preview iframe {
  width: 100%;
  height: 720px;
  border: 1px solid #ccd7e4
}

.resource-no-preview {
  margin-top: 28px;
  padding: 24px;
  border-left: 4px solid var(--gold);
  background: #fff
}

.resource-no-preview span {
  color: var(--gold);
  font-size: .63rem;
  font-weight: 800
}

.resource-no-preview p {
  margin: 7px 0;
  color: #60738c
}

.resource-purchase-card {
  position: sticky;
  top: calc(var(--visible-navbar-height, 72px) + 25px);
  align-self: start;
  padding: 32px;
  background: var(--navy);
  color: #fff;
  box-shadow: 0 24px 60px rgba(6, 28, 67, .18)
}

.resource-purchase-card>span {
  color: var(--gold);
  font-size: .62rem;
  font-weight: 800;
  letter-spacing: .14em
}

.resource-purchase-card h2 {
  margin: 18px 0;
  color: #fff;
  font-size: 1.8rem
}

.resource-purchase-card p,
.resource-purchase-card li {
  color: #c7d6ea;
  font-size: .77rem
}

.resource-purchase-card strong {
  display: block;
  margin: 20px 0;
  font-size: 1.5rem
}

.resource-purchase-card ul {
  padding-left: 18px
}

.resource-purchase-card form {
  margin-top: 10px
}

.resource-purchase-card .btn {
  width: 100%
}

.resource-purchase-card .btn--primary {
  background: var(--gold);
  color: var(--navy)
}

.resource-purchase-card .btn--ghost {
  border-color: #7c91b0;
  background: transparent;
  color: #fff
}

.contact-item svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round
}

.contact-success {
  display: flex;
  flex-direction: column;
  margin-top: 28px;
  padding: 18px;
  border-left: 4px solid #2b9c74;
  background: #e8f6f0
}

.contact-success strong {
  color: #145f45
}

.contact-success span {
  color: #4c6d60;
  font-size: .75rem
}

@media(max-width:1200px) {
  .exam-library-workspace {
    grid-template-columns: 220px 250px minmax(0, 1fr)
  }

  .exam-library-workspace .exam-workspace__main {
    padding: 35px
  }

  .exam-catalogue-card__features {
    grid-template-columns: 1fr
  }

  .exam-catalogue-card__footer {
    grid-template-columns: 1fr auto
  }

  .exam-catalogue-card__links {
    justify-content: flex-start
  }

  .exam-catalogue-card__commerce {
    grid-column: 2;
    grid-row: 1/3
  }

  .exam-directory--professional nav>a small {
    display: none
  }
}

@media(max-width:980px) {
  .exam-catalogue__heading {
    grid-template-columns: 1fr;
    gap: 20px
  }

  .exam-catalogue-card,
  .exam-catalogue-card:nth-child(5) {
    grid-column: auto;
    grid-template-columns: 85px minmax(0, 1fr)
  }

  .exam-catalogue-card__footer {
    grid-column: 2;
    grid-template-columns: 1fr
  }

  .exam-catalogue-card__commerce {
    position: absolute;
    right: 24px;
    top: 24px;
    grid-column: auto;
    grid-row: auto
  }

  .exam-catalogue-card__links {
    align-items: flex-start;
    flex-direction: column
  }

  .exam-library-workspace {
    display: grid;
    grid-template-columns: 210px minmax(0, 1fr)
  }

  .exam-directory--professional {
    grid-column: 1;
    grid-row: 1/3
  }

  .resource-sidebar--professional {
    position: relative;
    top: auto;
    grid-column: 2;
    grid-row: 1;
    height: auto;
    max-height: none;
    border-bottom: 1px solid #d8e2ee
  }

  .resource-sidebar--professional>nav {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 15px
  }

  .exam-library-workspace .exam-workspace__main {
    grid-column: 2;
    grid-row: 2
  }

  .exam-library-hero,
  .section-heading-row {
    grid-template-columns: 1fr
  }

  .resource-document-page {
    grid-template-columns: 1fr
  }

  .resource-purchase-card {
    position: relative;
    top: auto
  }
}

@media(max-width:760px) {
  .exam-catalogue__grid {
    grid-template-columns: 1fr
  }

  .exam-catalogue-card,
  .exam-catalogue-card:nth-child(5) {
    grid-template-columns: 72px minmax(0, 1fr);
    min-height: 0
  }

  .exam-catalogue-card__content {
    padding: 28px 22px 18px
  }

  .exam-catalogue-card__footer {
    margin: 0 22px;
    padding-bottom: 24px
  }

  .exam-catalogue-card__icon {
    width: 50px;
    height: 50px
  }

  .exam-catalogue-card__icon svg {
    width: 30px;
    height: 30px
  }

  .exam-catalogue-card__number {
    font-size: 2rem
  }

  .exam-library-workspace {
    display: block
  }

  .exam-directory--professional,
  .resource-sidebar--professional {
    position: relative;
    top: auto;
    height: auto;
    max-height: none
  }

  .exam-directory--professional nav {
    display: flex;
    overflow-x: auto
  }

  .exam-directory--professional nav>a {
    min-width: 125px
  }

  .exam-directory__help {
    display: none
  }

  .resource-sidebar--professional>nav {
    grid-template-columns: 1fr 1fr
  }

  .exam-library-workspace .exam-workspace__main {
    padding: 35px 20px
  }

  .learning-pathways__grid {
    grid-template-columns: 1fr
  }

  .material-library-list--page>a {
    grid-template-columns: 1fr auto
  }

  .material-library-list--page .material-type {
    grid-column: 1
  }

  .material-library-list--page a>div {
    grid-column: 1
  }

  .resource-document-page {
    width: min(100% - 28px, 1240px);
    padding: 40px 0
  }

  .resource-preview iframe {
    height: 500px
  }
}

@media(max-width:520px) {

  .exam-catalogue-card,
  .exam-catalogue-card:nth-child(5) {
    display: block
  }

  .exam-catalogue-card__top {
    justify-content: flex-start;
    padding: 22px
  }

  .exam-catalogue-card__number {
    right: 22px;
    left: auto;
    top: 22px;
    bottom: auto;
    writing-mode: horizontal-tb
  }

  .exam-catalogue-card__footer {
    display: block
  }

  .exam-catalogue-card__commerce {
    top: 23px
  }

  .exam-catalogue-card__features {
    padding-right: 0
  }

  .exam-catalogue-card__price,
  .exam-catalogue-card__links {
    margin-bottom: 15px
  }

  .resource-sidebar--professional>nav {
    grid-template-columns: 1fr
  }

  .subject-directory__grid>a {
    grid-template-columns: 35px minmax(0, 1fr) auto
  }

  .material-library-list>a {
    grid-template-columns: 1fr auto
  }

  .material-library-list .material-type {
    grid-column: 1
  }

  .material-library-list a>div {
    grid-column: 1
  }

  .resource-preview iframe {
    height: 390px
  }
}

@media(prefers-reduced-motion:reduce) {

  .exam-catalogue-card,
  .learning-pathways__grid>a,
  .catalogue-icon-button {
    transition: none
  }
}

.resource-nav-subjects>div {
  display: grid;
  gap: 5px
}

.resource-subject {
  margin: 0;
  border-left: 2px solid #e2e9f2
}

.resource-subject>summary {
  padding: 10px 10px 10px 14px;
  background: #f8fafc
}

.resource-subject>summary:hover {
  background: #eef4fb
}

.resource-subject>summary span {
  min-width: 0
}

.resource-subject>summary b,
.resource-subject>summary small {
  display: block
}

.resource-subject>summary b {
  font-size: .74rem
}

.resource-subject>summary small {
  margin-top: 2px;
  color: #7b8b9e;
  font-size: .57rem;
  font-weight: 500
}

.resource-subject__categories {
  padding: 3px 0 6px 10px
}

.resource-nav-group .resource-subject__categories>a {
  padding: 9px 10px
}

.resource-nav-group .resource-subject__categories>a b {
  font-size: .7rem
}

/* This compact library is intentionally mobile-only; desktop keeps the full workspace. */
.mobile-learning-library {
  display: none
}

@media(max-width:760px) {
  .exam-library-workspace .resource-sidebar--professional {
    display: none
  }

  .mobile-learning-library~.exam-workspace__main {
    display: none
  }

  .mobile-learning-library {
    display: block;
    padding: 25px 20px 44px;
    background: linear-gradient(145deg, #f9fbfe 0%, #edf3fa 48%, #f7f9fc 100%);
    border-top: 1px solid #d9e3ef
  }

  .mobile-learning-library__heading {
    position: relative;
    text-align: center;
    margin: 0 -20px 18px;
    padding: 17px 26px 20px;
    background: #fff;
    border-bottom: 1px solid #dce6f0;
    box-shadow: 0 9px 22px rgba(10, 42, 86, .045)
  }

  .mobile-learning-library__heading::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 44px;
    height: 2px;
    background: var(--gold);
    transform: translateX(-50%)
  }

  .mobile-learning-library__heading>span,
  .mobile-library-panel__intro>span {
    display: block;
    color: var(--blue);
    font-size: .65rem;
    font-weight: 800;
    letter-spacing: .15em
  }

  .mobile-learning-library__heading p {
    margin: 7px 0 0;
    color: #687e9a;
    font-size: .8rem
  }

  .mobile-learning-library__tabs,
  .mobile-subject-selector {
    display: flex;
    gap: 9px;
    overflow-x: auto;
    margin: 0 -20px;
    padding: 0 20px 12px;
    scrollbar-width: thin;
    scrollbar-color: #93a4b8 transparent
  }

  .mobile-learning-library__tabs button,
  .mobile-subject-selector button {
    flex: 0 0 auto;
    border: 1px solid #c9d7e6;
    border-radius: 999px;
    background: #fff;
    color: #294666;
    font: 700 .73rem/1.1 'Plus Jakarta Sans', sans-serif;
    cursor: pointer;
    white-space: nowrap
  }

  .mobile-learning-library__tabs button {
    padding: 11px 15px
  }

  .mobile-subject-selector button {
    padding: 14px 18px;
    font-size: .82rem
  }

  .mobile-learning-library__tabs button.is-active,
  .mobile-subject-selector button.is-active {
    border-color: var(--navy);
    background: var(--navy);
    color: #fff;
    box-shadow: 0 8px 18px rgba(7, 34, 79, .16)
  }

  .mobile-library-panel {
    padding-top: 15px
  }

  .mobile-library-panel__intro {
    padding: 3px 3px 15px
  }

  .mobile-library-panel__intro h2 {
    margin: 7px 0 0;
    color: var(--navy);
    font-size: 1.32rem;
    letter-spacing: -.035em
  }

  .mobile-library-panel__intro p {
    margin: 5px 0 0;
    color: #7488a1;
    font-size: .72rem
  }

  .mobile-resource-group {
    margin: 0 0 11px;
    border: 1px solid #d4e0ed;
    background: #fff;
    box-shadow: 0 8px 20px rgba(10, 42, 86, .045)
  }

  .mobile-resource-group>summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px;
    color: var(--navy);
    font-size: .86rem;
    font-weight: 800;
    cursor: pointer;
    list-style: none
  }

  .mobile-resource-group>summary::-webkit-details-marker {
    display: none
  }

  .mobile-resource-group>summary i {
    font-style: normal;
    color: var(--gold)
  }

  .mobile-resource-list {
    display: grid;
    gap: 8px;
    padding: 0 12px 12px
  }

  .mobile-resource-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px;
    border: 1px solid #dce5ef;
    background: #fff
  }

  .mobile-resource-row strong {
    min-width: 0;
    color: #223c5b;
    font-size: .76rem;
    line-height: 1.45
  }

  .mobile-resource-row>div {
    display: flex;
    flex: 0 0 auto;
    gap: 10px
  }

  .mobile-resource-row a {
    color: var(--blue);
    font-size: .69rem;
    font-weight: 800
  }

  .mobile-resource-row.is-locked {
    border-left: 3px solid var(--gold);
    background: #fffaf0
  }

  .mobile-resource-lock {
    display: block;
    flex: 0 0 auto;
    color: #8a6517 !important;
    text-align: right;
    font-size: .64rem !important;
    line-height: 1.35
  }

  .mobile-resource-empty {
    margin: 0;
    padding: 15px 4px;
    color: #70829a;
    font-size: .73rem
  }

  .mobile-subject-selector {
    gap: 12px;
    margin-bottom: 14px;
    padding-bottom: 14px
  }

  .mobile-subject-selector button {
    padding: 16px 22px;
    border-radius: 10px;
    background: #fff;
    font-size: .83rem;
    box-shadow: 0 8px 18px rgba(10, 42, 86, .05)
  }

  .mobile-subject-selector button.is-active {
    background: var(--navy);
    box-shadow: 0 12px 24px rgba(7, 34, 79, .2)
  }

  .mobile-subject-panel {
    padding-top: 2px
  }
}

/* Final desktop proportion tuning keeps both directories useful without crowding content. */
@media(min-width:1201px) {
  .exam-library-workspace {
    grid-template-columns: minmax(220px, 240px) minmax(240px, 270px) minmax(0, 1fr)
  }

  .exam-library-hero h1,
  .library-page-header h1 {
    font-size: clamp(2.35rem, 3.6vw, 3.9rem)
  }
}

/* Mobile-only card controls stay beside the price instead of covering it. */
@media(max-width:520px) {
  .exam-catalogue-card__footer {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 14px;
    align-items: start
  }

  .exam-catalogue-card__price {
    grid-column: 1;
    margin: 0
  }

  .exam-catalogue-card__commerce {
    position: static;
    top: auto;
    right: auto;
    grid-column: 2;
    grid-row: 1;
    gap: 7px
  }

  .exam-catalogue-card__links {
    grid-column: 1/-1;
    margin: 0
  }

  .catalogue-icon-button {
    width: 42px;
    height: 42px
  }
}