/* GCSE practice-paper navigation, pages and the optional learning-page promotion. */
@view-transition { navigation: auto; }
.practice-promo { view-transition-name: ttm-practice-promo; }
::view-transition-group(ttm-practice-promo) { animation: none; z-index: 2147483647; }
::view-transition-old(ttm-practice-promo) { display: none; }
::view-transition-new(ttm-practice-promo) { animation: none; mix-blend-mode: normal; opacity: 1; }
::view-transition-old(root) { display: none; }
::view-transition-new(root) { animation: none; }
header #gcse-dropdown .dropdown-content a.practice-nav-link,
#gcse-dropdown .dropdown-content a.practice-nav-link {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin: 7px 6px 5px; padding: 11px 14px; border-radius: 10px;
  background: #2563eb; color: #fff; font-weight: 700; text-decoration: none;
}
#gcse-dropdown .dropdown-content a.practice-nav-link:is(:hover, :focus-visible, [aria-current]) {
  background: #1d4ed8; color: #fff;
}
.practice-nav-link svg { width: 17px; height: 17px; flex: 0 0 17px; }
.practice-main { padding: 0 0 60px; }
.practice-main .practice-intro { text-align: center; padding: 48px 0 30px; }
.practice-main h1 { color: #0f172a; font-size: clamp(2rem, 4vw, 2.85rem); line-height: 1.2; margin: 16px 0; }
.practice-main .practice-lead { max-width: 650px; margin: 0 auto; color: #4b5563; font-size: 1.06rem; }
.practice-main .hero-buttons { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; margin-top: 22px; }
.practice-main > .container > .practice-intro + .hero-buttons { margin-top: 0; }
.practice-status { display: inline-flex; align-items: center; gap: 7px; border-radius: 999px; padding: 6px 12px; background: #dbeafe; color: #1e40af; font-size: .8rem; font-weight: 700; line-height: 1.4; }
.practice-status::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #2563eb; flex: 0 0 6px; }
.practice-series { background: #fff; border: 1.5px solid #2563eb; border-radius: 22px; padding: 28px; margin-top: 22px; box-shadow: 0 7px 20px #0f172a04; }
.practice-series h2 { color: #0f172a; font-size: 1.5rem; line-height: 1.3; margin: 0 0 8px; }
.practice-series > p { color: #4b5563; margin: 0 0 20px; }
.practice-pathways { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.practice-pathways .btn { display: flex; justify-content: center; align-items: center; min-height: 60px; padding: 12px; line-height: 1.4; }
.practice-note { color: #64748b; font-size: .9rem; text-align: center; margin: 22px 0 0; }
.practice-main .practice-pathway-title { color: #1d4ed8; font-size: 1.3rem; font-weight: 700; margin-bottom: 12px; }
.practice-coming { max-width: 850px; margin: 0 auto; display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 34px; align-items: center; padding: 30px 38px; border: 1.5px solid #2563eb; border-radius: 22px; background: #fff; }
.practice-coming img { display: block; width: 100%; height: auto; }
.practice-coming h2 { color: #0f172a; font-size: 1.7rem; line-height: 1.25; margin: 12px 0; }
.practice-coming p { color: #4b5563; margin: 0 0 12px; }
.practice-coming .practice-price-note { color: #1e40af; font-size: .9rem; margin-bottom: 0; }
.practice-skip { position: absolute; top: -100px; left: 16px; z-index: 1200; background: #fff; color: #1d4ed8; padding: 12px; border-radius: 10px; }
.practice-skip:focus { top: 8px; }

.practice-promo, .practice-promo * { box-sizing: border-box; }
.practice-promo {
  position: fixed; right: max(18px, env(safe-area-inset-right)); bottom: max(18px, env(safe-area-inset-bottom));
  z-index: 900; width: 460px; max-width: calc(100vw - 32px);
  max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px); overflow-y: auto; overscroll-behavior: contain;
  display: grid; grid-template-columns: 140px minmax(0, 1fr); align-items: center; gap: 16px;
  padding: 20px 18px; border: 1.5px solid #2563eb; border-radius: 22px;
  background: #fff; color: #0f172a; box-shadow: 0 12px 48px #0f172a26;
  font-family: Arial, Helvetica, sans-serif; font-size: 14px; line-height: 1.45;
  animation: practice-promo-arrive .22s ease-out;
}
.practice-promo[hidden] { display: none; }
.practice-promo .practice-promo-media { display: flex; flex-direction: column; align-items: center; gap: 12px; min-width: 0; }
.practice-promo .practice-promo-media .practice-promo-link { width: 100%; white-space: nowrap; }
.practice-promo .practice-promo-covers { display: block; width: 100%; height: auto; }
.practice-promo .practice-promo-copy { min-width: 0; padding-top: 3px; }
.practice-promo h2 { color: #0f172a; font: 700 20px/1.2 Arial, Helvetica, sans-serif; margin: 0 0 8px; padding-right: 28px; }
.practice-promo p { font: 400 14px/1.45 Arial, Helvetica, sans-serif; color: #4b5563; margin: 0 0 12px; }
.practice-promo .practice-promo-link { display: inline-flex; justify-content: center; align-items: center; gap: 9px; max-width: 100%; min-height: 44px; padding: 10px 14px; border: 0; border-radius: 12px; background: #2563eb; color: #fff; text-decoration: none; font: 700 14px/1.4 Arial, Helvetica, sans-serif; }
.practice-promo .practice-promo-link:hover { background: #1d4ed8; color: #fff; }
.practice-promo .practice-promo-link svg { width: 18px; height: 18px; flex: 0 0 18px; }
.practice-promo .practice-promo-close { position: absolute; top: 5px; right: 5px; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid #cbd5e1; border-radius: 50%; background: #fff; color: #475569; cursor: pointer; }
.practice-promo .practice-promo-close:hover { background: #eff6ff; color: #1d4ed8; }
.practice-promo .practice-promo-close svg { width: 18px; height: 18px; }
.practice-promo :is(a, button):focus-visible, .practice-main a:focus-visible, a.practice-nav-link:focus-visible { outline: 3px solid #2563eb; outline-offset: 3px; }
@keyframes practice-promo-arrive { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 950px) { .practice-pathways { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) {
  .practice-main .practice-intro { padding-top: 34px; }
  .practice-series { padding: 22px 18px; }
  .practice-pathways { grid-template-columns: 1fr; gap: 10px; }
  .practice-pathways .btn { min-height: 52px; }
  .practice-coming { grid-template-columns: 1fr; gap: 8px; padding: 22px; text-align: center; }
  .practice-coming img { width: 170px; margin: 0 auto; }
  .practice-promo { right: max(12px, env(safe-area-inset-right)); bottom: max(12px, env(safe-area-inset-bottom)); max-width: calc(100vw - 24px); grid-template-columns: 120px minmax(0, 1fr); padding: 16px 14px; gap: 12px; }
  .practice-promo h2 { font-size: 18px; }
  .practice-promo p { font-size: 13px; }
  .practice-promo .practice-promo-link { padding: 10px 6px; font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) { .practice-promo { animation: none; } }
@media print { .practice-promo { display: none !important; } }
/* V69: choose the exam course first, then its tier and simulation. */
.practice-course-section { margin: 38px 0; }
.practice-course-section > h2, .practice-section-heading h2 { margin: 0; color: #0f172a; }
.practice-course-section > p { margin: 10px 0 20px; color: #475569; }
.practice-course-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 20px; }
.practice-course { display: flex; flex-direction: column; align-items: flex-start; padding: 24px; border: 1.5px solid #2563eb; border-radius: 20px; color: #0f172a; background: #fff; text-decoration: none; transition: box-shadow .18s, background .18s; }
.practice-course:not(.practice-unavailable):has(a):hover { background: #f8fbff; box-shadow: 0 8px 24px #2563eb14; }
.practice-code { background: #eff6ff; color: #1d4ed8; padding: 5px 11px; border-radius: 8px; font-size: .88rem; font-weight: 700; letter-spacing: .035em; }
.practice-course h3 { color: #0f172a; font-size: 1.15rem; line-height: 1.4; margin: 17px 0 8px; }
.practice-course p { margin: 0 0 12px; color: #475569; }
.practice-course-detail { color: #64748b; font-size: .85rem; margin-bottom: 20px; }
.practice-course-cta { margin-top: auto; color: #1d4ed8; font-weight: 700; }
.practice-section-heading { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 14px; }
 .practice-stamp {
  position: absolute; z-index: 2; left: 50%; top: 50%;
  transform: translate(-50%, -50%) rotate(-8deg); pointer-events: none;
  box-sizing: border-box; width: max-content; max-width: calc(100% - 26px);
  padding: 10px 14px; border: 3px solid #1d4ed8; border-radius: 8px;
  background: #ffffffed; color: #1d4ed8; box-shadow: 0 4px 16px #0f172a16;
  font: 800 clamp(.9rem, 1.5vw, 1.08rem)/1.25 Arial, Helvetica, sans-serif;
  text-transform: uppercase; letter-spacing: .08em; white-space: nowrap;
}
.practice-tier-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; max-width: 800px; margin: 0 auto; }
.practice-tier { display: flex; flex-direction: column; padding: 30px; border: 1.5px solid #2563eb; border-radius: 22px; background: #fff; color: #475569; text-decoration: none; gap: 14px; }
.practice-tier h2 { margin: 0; color: #0f172a; }
.practice-tier strong { color: #1d4ed8; }
.practice-tier:not(.practice-unavailable):has(a):hover { background: #eff6ff; }
.practice-products { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.practice-product { display: flex; flex-direction: column; padding: 24px; border: 1px solid #cbd5e1; border-radius: 16px; background: #fff; }
.practice-product-tag { color: #475569; font-size: .78rem; font-weight: 700; }
.practice-product h3 { font-size: 1.17rem; line-height: 1.4; margin: 12px 0; }
.practice-product > p { color: #475569; font-size: .93rem; }
.practice-product .practice-price { color: #0f172a; font-size: 2.2rem; font-weight: 800; line-height: 1.15; margin: 8px 0 16px; }
.practice-price span { display: block; color: #64748b; font-size: .8rem; font-weight: 400; margin-top: 7px; }
.practice-product .btn { width: 100%; margin-top: auto; }
.practice-product .btn:disabled { background: #2563eb; color: #fff; opacity: 1; cursor: default; }
.practice-bundle { background: #eff6ff; border-color: #2563eb; }
.practice-product .practice-saving { color: #1d4ed8; font-size: .82rem; font-weight: 700; margin-top: 0; }
@media (max-width: 950px) { .practice-course-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .practice-products { gap: 12px; } .practice-product { padding: 18px; } }
@media (max-width: 680px) { .practice-course-grid, .practice-tier-grid, .practice-products { grid-template-columns: 1fr; } .practice-product { padding: 22px; } .practice-course { padding: 22px; } }

/* V72: the course frame contains the tier cards; unavailable content sits below its stamp. */
.practice-main { padding-top: 30px; }
.practice-course-frame { padding: 32px; border: 1px solid #bfdbfe; border-radius: 28px; background: linear-gradient(135deg, #fff, #eff6ff); box-shadow: 0 10px 30px #0f172a0f; }
.practice-course-frame .practice-intro { padding: 12px 0 28px; text-align: left; }
.practice-course-frame .practice-lead { margin: 0; }
.practice-course-frame .practice-tier-grid { max-width: none; }
.practice-breadcrumb { margin: 0 0 14px; color: #1d4ed8; font-size: .95rem; font-weight: 600; line-height: 1.6; text-align: left; }
.practice-breadcrumb a { display: inline-block; color: #1d4ed8; font-weight: 600; text-decoration: none; }
.practice-breadcrumb a:hover { text-decoration: underline; }
.practice-course, .practice-tier, .practice-product { position: relative; min-width: 0; }
.practice-card-content { display: flex; flex-direction: column; align-items: flex-start; gap: 0; flex: 1; width: 100%; min-width: 0; }
.practice-tier .practice-card-content { gap: 14px; }
.practice-card-content > p { margin-bottom: 16px; }
body .practice-main .practice-card-content .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  box-sizing: border-box; height: 50px; min-height: 50px; margin-top: auto;
  white-space: nowrap; font-size: .9rem; line-height: 1.4; padding: 0 16px;
}
.practice-card-link::after { content: ''; position: absolute; inset: 0; border-radius: inherit; }
.practice-course:focus-within, .practice-tier:focus-within { outline: 3px solid #2563eb; outline-offset: 3px; }
.practice-unavailable { background: #f1f3f5; border-color: #cbd5e1; box-shadow: none; }
.practice-unavailable .practice-card-content { filter: grayscale(1); opacity: .42; }
.practice-unavailable .btn:disabled { cursor: default; }
.practice-product .practice-card-content > p { color: #475569; font-size: .93rem; }
.practice-product .practice-card-content .practice-price { color: #0f172a; font-size: 2.2rem; font-weight: 800; line-height: 1.15; margin: 8px 0 16px; }
.practice-product .practice-card-content .practice-saving { color: #1d4ed8; font-size: .82rem; font-weight: 700; margin-top: 0; }
@media (max-width: 680px) {
  .practice-course-frame { padding: 22px 16px; border-radius: 22px; }
  .practice-tier { padding: 22px 18px; }
  .practice-breadcrumb { font-size: .88rem; }
}

/* V73: one outer course card contains the heading and every collection. */
.practice-course-frame > .hero-buttons { margin-top: 0; margin-bottom: 28px; }
.practice-course-frame > .practice-series { margin-top: 22px; }
.practice-course-frame .practice-course-section:last-of-type { margin-bottom: 24px; }
.practice-main .practice-card-content .btn { text-align: center; }

/* V105: one continuous blue gradient, with stable digits and subtle separators. */
.practice-launch { box-sizing: border-box; max-width: 650px; margin: 0 auto 26px; padding: 22px; text-align: center; border: 1.5px solid #2563eb; border-radius: 20px; background: #eff6ff; color: #0f172a; }
.practice-launch .practice-launch-date { margin: 0 0 16px; font-size: .95rem; line-height: 1.5; color: #334155; }
.practice-launch-date strong { font-weight: 700; }
.practice-launch time { white-space: normal; }
.practice-countdown-clock { --countdown-size: clamp(1.3rem, 4vw, 2rem); box-sizing: border-box; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr); align-items: start; gap: 4px; max-width: 410px; margin: 0 auto; padding: 16px 12px; border: 1px solid #ffffff42; border-radius: 14px; background: linear-gradient(135deg, #102a70 0%, #2359b5 58%, #3571b1 100%); color: #fff; box-shadow: inset 0 1px 0 #ffffff29, 0 6px 18px #163e8114; }
.practice-countdown-unit { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; color: #fff; }
.practice-countdown-unit strong { font: 800 var(--countdown-size)/1.2 Arial, Helvetica, sans-serif; font-variant-numeric: tabular-nums; color: #fff; }
.practice-countdown-separator { font: 400 var(--countdown-size)/1.2 Arial, Helvetica, sans-serif; color: #fff; opacity: .6; }
.practice-countdown-unit > span { font-size: .72rem; line-height: 1.3; color: #fff; }
.practice-launch .practice-launch-message { margin: 0; color: #334155; line-height: 1.5; }
.practice-launch [hidden], .practice-stamp[hidden] { display: none !important; }
.practice-promo .practice-launch { margin: 0 0 12px; padding: 0; border: 0; border-radius: 0; background: transparent; text-align: left; }
.practice-promo .practice-launch-date { font-size: 11px; line-height: 1.4; margin: 0 0 8px; }
.practice-promo .practice-countdown-clock { --countdown-size: 19px; padding: 11px 8px; gap: 1px; border-radius: 11px; }
.practice-promo .practice-countdown-unit { gap: 3px; }
.practice-promo .practice-countdown-unit > span { font-size: 9px; }
.practice-promo .practice-launch-message { font-size: 12px; }
.practice-main .practice-card-content a[aria-disabled="true"] { cursor: default; color: #fff; }
@media (max-width: 380px) {
  .practice-promo { grid-template-columns: 104px minmax(0, 1fr); gap: 10px; }
  .practice-promo .practice-promo-link { font-size: 11px; }
  .practice-promo .practice-countdown-clock { --countdown-size: 16px; padding: 10px 5px; }
  .practice-promo .practice-countdown-unit > span { font-size: 8px; }
  .practice-launch { padding: 18px 12px; }
  .practice-main .practice-countdown-clock { gap: 2px; }
}