/* PilotTrain licence pages (RPL first). Additions to pt-hero.css (.pthx) and
   pt-home.css (.pthm); those two files must be loaded as well. */

/* =============================================================
   HERO: no toggle, the mini exam floats in the sky band
   ============================================================= */
.pthx .pthx-grad{background:linear-gradient(90deg,var(--a),var(--b)); -webkit-background-clip:text; background-clip:text; color:transparent;}
/* a second headline line that must stay whole, shrinking a little on phones to do so */
.pthx .pthx-l2{display:block; white-space:nowrap; font-size:min(1em,6.4vw);}
.pthx .pthx-band--float{padding-bottom:76px;}
.pthx .pthx-live{position:relative; z-index:1; max-width:760px; margin:0 auto; text-align:left;}
.pthx .pthx-live .ptlp{padding-bottom:0;}
.pthx .pthx-hint{
  position:relative; z-index:1; display:inline-flex; align-items:center; gap:8px; margin:0 0 18px;
  font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:#dbe7f3;
}
.pthx .pthx-hint svg{width:15px; height:15px;}

/* =============================================================
   HERO WITH A CATEGORY SWITCH (PPL: aeroplane or helicopter)
   The switch reuses the home hero's markup and script. The rotating
   border stays SmartKDR's alone, so it is switched off here.
   ============================================================= */
.pthx.pthx--cat h1{font-size:clamp(22px,5.9vw,60px);}
.pthx.pthx--cat .pthx-row{gap:.32em;}
.pthx.pthx--cat.is-kdr .pthx-win{
  animation:none;
  background:linear-gradient(var(--card),var(--card)) padding-box, linear-gradient(180deg,rgba(255,255,255,.28),rgba(255,255,255,.08)) border-box;
}
.pthx .pthx-bar-r{margin-left:auto;}
.pthx .pthx-cat-top{display:grid; grid-template-columns:auto 1fr auto; gap:14px; align-items:center;}
.pthx .pthx-cat-ic{
  width:52px; height:52px; border-radius:14px; display:grid; place-items:center; color:#fff;
  background:linear-gradient(135deg,#2a6fe0,#5d8ce6); box-shadow:0 10px 24px rgba(47,123,240,.35);
}
.pthx .pthx-cat-ic svg{width:29px; height:29px;}
.pthx .pthx-cat-t{font-size:14px; line-height:1.4; color:var(--mut);}
.pthx .pthx-cat-t b{display:block; font-size:22px; font-weight:800; letter-spacing:-.02em; line-height:1.2; color:#fff;}
.pthx .pthx-cat-chip{
  font-size:11px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; white-space:nowrap;
  color:#4ade80; background:rgba(74,222,128,.14); border-radius:999px; padding:5px 11px;
}
.pthx .pthx-cat-list{display:grid; gap:0; margin:18px 0 0; padding:0; list-style:none;}
.pthx .pthx-cat-list li{display:flex; gap:11px; align-items:flex-start; margin:0; padding:11px 0; border-top:1px solid var(--line); font-size:15px; line-height:1.45; color:#d5e2ef; list-style:none;}
.pthx .pthx-cat-list svg{flex:none; width:17px; height:17px; margin-top:2px; color:#4ade80;}
.pthx .pthx-cat-partner{display:flex; align-items:center; gap:14px; margin:6px 0 0; padding:14px 0 0; border-top:1px solid var(--line); font-size:14px; color:#d5e2ef;}
.pthx .pthx-cat-logo{flex:none; display:grid; place-items:center; background:#fff; border-radius:10px; padding:8px 12px;}
.pthx .pthx-cat-logo img{display:block; height:34px; width:auto; max-width:none;}
.pthx .pthx-cat-foot{margin:16px 0 0; font-size:13px; line-height:1.5; color:var(--mut);}

/* =============================================================
   ONE SAMPLE QUESTION (pages without a mini exam)
   Self-contained, so it can sit in the hero's sky band or in a section.
   ============================================================= */
.pthm-quiz, .pthm-quiz *, .pthm-quiz *::before, .pthm-quiz *::after{box-sizing:border-box;}
.pthm-quiz{
  text-align:left; border-radius:18px; overflow:hidden; color:#e9f1f8; border:1px solid rgba(255,255,255,.1);
  font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif; line-height:1.5;
  background:linear-gradient(180deg,#0c1e2f 0%,#071320 100%); box-shadow:0 18px 44px rgba(3,12,24,.4);
}
.pthm-quiz .pthm-quiz-body p, .pthm-quiz .pthm-quiz-body figure{margin:0; padding:0; max-width:none;}
.pthm-quiz .pthm-quiz-bar{display:flex; align-items:center; gap:10px; padding:11px 16px; background:rgba(0,0,0,.22); border-bottom:1px solid rgba(255,255,255,.12); font-size:12.5px; color:#9fb3c8;}
.pthm-quiz .pthm-quiz-bar i{width:9px; height:9px; border-radius:50%; display:block;}
.pthm-quiz .pthm-quiz-bar strong{color:#fff; font-weight:600; margin-left:2px;}
.pthm-quiz .pthm-quiz-body{padding:18px 18px 20px;}
.pthm-quiz .pthm-quiz-body p.pthm-quiz-n{font-size:11px; font-weight:800; letter-spacing:.11em; text-transform:uppercase; color:#4da3ff; margin:0 0 8px;}
.pthm-quiz .pthm-quiz-body p.pthm-quiz-q{font-size:16.5px; font-weight:600; line-height:1.45; color:#fff;}
.pthm-quiz .pthm-quiz-body .pthm-quiz-fig{margin:14px 0 0; padding:10px; border:1px solid rgba(255,255,255,.12); border-radius:12px; background:rgba(255,255,255,.04);}
.pthm-quiz .pthm-quiz-fig img{display:block; width:100%; height:auto; max-height:200px; object-fit:contain;}
.pthm-quiz .pthm-quiz-ans{display:grid; gap:9px; margin:14px 0 0;}
.pthm-quiz .pthm-quiz-ans button, .pthm-quiz .pthm-quiz-ans button:hover, .pthm-quiz .pthm-quiz-ans button:focus{
  display:flex; align-items:center; gap:12px; width:100%; margin:0; text-align:left; padding:13px 15px; border-radius:11px;
  border:1px solid rgba(255,255,255,.16); background:rgba(255,255,255,.04); color:#e9f1f8;
  font:500 15px/1.4 inherit; font-family:inherit; cursor:pointer; -webkit-appearance:none; appearance:none; box-shadow:none;
  transition:border-color .16s ease, background .16s ease;
}
.pthm-quiz .pthm-quiz-ans button:hover{border-color:#4da3ff; background:rgba(77,163,255,.1);}
.pthm-quiz .pthm-quiz-ans button:focus-visible{outline:3px solid rgba(77,163,255,.6); outline-offset:2px;}
.pthm-quiz .pthm-quiz-ans button i{flex:none; width:18px; height:18px; border-radius:50%; border:2px solid #6b7f95;}
.pthm-quiz.answered .pthm-quiz-ans button{cursor:default;}
.pthm-quiz.answered .pthm-quiz-ans button.is-right{border-color:#4ade80; background:rgba(74,222,128,.12); color:#fff;}
.pthm-quiz.answered .pthm-quiz-ans button.is-right i{border-color:#4ade80; background:#4ade80;}
.pthm-quiz.answered .pthm-quiz-ans button.is-wrong{opacity:.6;}
.pthm-quiz.answered .pthm-quiz-ans button.is-picked.is-wrong{opacity:1; border-color:#f87171; background:rgba(248,113,113,.1);}
.pthm-quiz.answered .pthm-quiz-ans button.is-picked.is-wrong i{border-color:#f87171; background:#f87171;}
.pthm-quiz .pthm-quiz-why{margin:14px 0 0; padding:13px 15px; border-left:3px solid #4da3ff; border-radius:0 10px 10px 0; background:rgba(77,163,255,.1);}
.pthm-quiz .pthm-quiz-why b{display:block; font-size:11px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:#4da3ff; margin:0 0 5px;}
.pthm-quiz .pthm-quiz-body .pthm-quiz-why p{font-size:14.5px; line-height:1.55; color:#d5e2ef;}
.pthm-quiz .pthm-quiz-body p.pthm-quiz-msg{margin:14px 0 0; font-size:13.5px; color:#9fb3c8;}
.pthm-quiz.answered .pthm-quiz-body p.pthm-quiz-msg{color:#4ade80;}

/* =============================================================
   TWO CATEGORIES SIDE BY SIDE (PPL: aeroplane and helicopter)
   ============================================================= */
.pthm .pthm-cats{grid-template-columns:1fr 1fr;}
.pthm .pthm-cat{padding:36px 36px 34px;}
.pthm .pthm-cat-top{display:grid; grid-template-columns:auto 1fr auto; gap:14px; align-items:center;}
.pthm .pthm-cat-top .pthm-ic{width:52px; height:52px; border-radius:14px;}
.pthm .pthm-cat-top .pthm-ic svg{width:27px; height:27px;}
.pthm .pthm-cat h3{font-size:22px; font-weight:800; letter-spacing:-.02em; color:var(--ink); margin:0;}
.pthm .pthm-cat-sub{display:block; font-size:14.5px; color:var(--muted); margin-top:2px;}
.pthm .pthm-inc{
  font-size:11px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; white-space:nowrap;
  color:#15803d; background:rgba(22,163,74,.12); border-radius:999px; padding:5px 11px;
}
.pthm .pthm-partner{display:flex; align-items:center; gap:14px; margin-top:20px; padding-top:18px; border-top:1px solid var(--line); font-size:14px; color:var(--text);}
.pthm .pthm-partner img{display:block; height:38px; width:auto; max-width:none;}

/* the SmartKDR cell on its own row */
.pthm .pthm-one{grid-template-columns:1fr;}
.pthm .pthm-one > .pthm-cell--kdr{grid-column:auto;}

/* =============================================================
   WHAT'S INCLUDED: six plain cells
   ============================================================= */
.pthm .pthm-six{grid-template-columns:repeat(3,1fr);}
.pthm .pthm-box{display:flex; flex-direction:column; padding:30px 30px 28px;}
.pthm .pthm-box .pthm-ic{margin:0 0 18px;}
.pthm .pthm-box h3{font-size:19px; font-weight:700; letter-spacing:-.012em; color:var(--ink); margin:0 0 7px;}
.pthm .pthm-box p{font-size:15px; line-height:1.55; color:var(--text);}
.pthm .pthm-box .pthm-meta{padding-top:18px;}

/* =============================================================
   SPLIT ROWS: copy one side, something to look at on the other
   ============================================================= */
.pthm .pthm-split{grid-template-columns:1fr 1fr;}
.pthm .pthm-split > div{display:flex; flex-direction:column; justify-content:center; padding:52px 44px; min-width:0;}
.pthm .pthm-split h3{font-size:clamp(24px,2.6vw,31px); font-weight:800; letter-spacing:-.025em; line-height:1.15; color:var(--ink); margin:0 0 12px;}
.pthm .pthm-split p{font-size:15.5px; line-height:1.6; color:var(--text); max-width:52ch;}
.pthm .pthm-split .pthm-tag{margin-bottom:14px;}
.pthm .pthm-grid > .pthm-dark{
  color:var(--dtext);
  background:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px) 0 0/36px 36px,
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px) 0 0/36px 36px,
    radial-gradient(520px 300px at 85% 10%, rgba(93,140,230,.32), transparent 70%),
    var(--navy);
}
.pthm .pthm-dark h3{color:#fff;}
.pthm .pthm-dark p{color:var(--dtext);}
.pthm .pthm-dark .pthm-tag{color:var(--b);}
.pthm .pthm-dark .pthm-fine{max-width:52ch;}
.pthm .pthm-list{display:grid; gap:11px; margin:20px 0 0;}
.pthm .pthm-list li{display:flex; gap:10px; align-items:flex-start; font-size:15px; line-height:1.45; color:var(--text);}
.pthm .pthm-list svg{flex:none; width:18px; height:18px; margin-top:2px; color:var(--ok);}

/* the sample against the real thing */
.pthm .pthm-vs{
  display:grid; grid-template-columns:1fr 1fr; border:1px solid var(--line); border-radius:16px; overflow:hidden;
  background:#fff; box-shadow:0 12px 34px rgba(10,26,43,.07);
}
.pthm .pthm-vs > span{padding:13px 16px; font-size:14.5px; line-height:1.4; border-top:1px solid var(--line);}
.pthm .pthm-vs .pthm-vs-h{
  border-top:0; background:#f2f5f9; font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--muted);
}
.pthm .pthm-vs .pthm-vs-h.is-real{background:#e9f1ff; color:var(--blue-dk);}
.pthm .pthm-vs .pthm-vs-a{color:var(--muted);}
.pthm .pthm-vs .pthm-vs-b{display:flex; gap:8px; align-items:flex-start; background:#f7faff; color:var(--ink); font-weight:600;}
.pthm .pthm-vs .pthm-vs-b svg{flex:none; width:16px; height:16px; margin-top:2px; color:var(--blue);}
.pthm .pthm-vs-foot{margin:14px 2px 0; font-size:13.5px; color:var(--muted);}

/* the flashcard deck keeps its own styles; this only gives it room */
.pthm .pthm-deck{max-width:460px; width:100%; margin:0 auto;}

/* =============================================================
   OTHER LICENCES: compact tiles
   ============================================================= */
.pthm .pthm-also{grid-template-columns:repeat(3,1fr);}
.pthm .pthm-also a.pthm-lic{flex-direction:row; align-items:center; justify-content:space-between; gap:14px; min-height:0; padding:22px 26px;}
.pthm .pthm-also .pthm-code{font-size:19px;}
.pthm .pthm-also .pthm-name{font-size:13.5px; margin-top:2px;}

/* =============================================================
   RESPONSIVE
   ============================================================= */
@media (max-width:1024px){
  .pthm .pthm-six{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:900px){
  .pthm .pthm-split{grid-template-columns:1fr;}
  .pthm .pthm-cats{grid-template-columns:1fr;}
  .pthm .pthm-cat{padding:30px 22px 28px;}
  .pthm .pthm-split > div{padding:40px 22px;}
  .pthm .pthm-also{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:640px){
  .pthx .pthx-band--float{padding-bottom:48px;}
  .pthm .pthm-six{grid-template-columns:1fr;}
  /* phones: icon beside the heading, so six cells do not run to six screens */
  .pthm .pthm-box{display:grid; grid-template-columns:auto 1fr; column-gap:14px; align-items:center; padding:24px 22px 22px;}
  .pthm .pthm-box .pthm-ic{margin:0;}
  .pthm .pthm-box h3{margin:0;}
  .pthm .pthm-box p{grid-column:1 / -1; margin-top:12px;}
  .pthm .pthm-box .pthm-meta{grid-column:1 / -1; padding-top:12px;}
  .pthm .pthm-vs > span{padding:11px 12px; font-size:13.5px;}
  /* phones: the Included chip drops under the title so the title stays on one line */
  .pthm .pthm-cat-top{grid-template-columns:auto 1fr; row-gap:10px;}
  .pthm .pthm-cat-top .pthm-inc{grid-column:1 / -1; justify-self:start;}
  .pthm .pthm-also{grid-template-columns:1fr;}
  .pthm .pthm-also a.pthm-lic{padding:18px 22px;}
}

/* =============================================================
   CPL PAGE (added with theme 1.15.0)
   Everything from here down answers to a class the RPL and PPL pages do not
   use, so those pages are untouched by it. It carries its own responsive rules.
   ============================================================= */

/* =============================================================
   SEVEN SAMPLE QUESTIONS, ONE AT A TIME (one from each subject)
   The card and its answers are the single sample question's. This adds the
   track of seven, the step to the next question and the tally at the end.
   ============================================================= */
.pthm-quiz .pthm-quiz-bar .pthm-quiz-count{margin-left:auto; font-weight:600; color:#9fb3c8; font-variant-numeric:tabular-nums;}
.pthm-quiz ol.pthm-quiz-track{display:grid; grid-auto-flow:column; grid-auto-columns:minmax(0,1fr); gap:5px; margin:0; padding:15px 18px 0; list-style:none;}
.pthm-quiz ol.pthm-quiz-track li{
  margin:0; padding:0; list-style:none; text-align:center; font-size:9.5px; font-weight:700; letter-spacing:.07em; line-height:1;
  color:#63788f; transition:color .2s ease;
}
.pthm-quiz ol.pthm-quiz-track li::before{content:""; display:block; height:4px; border-radius:4px; margin:0 0 7px; background:rgba(255,255,255,.14); transition:background .2s ease;}
.pthm-quiz ol.pthm-quiz-track li.is-now{color:#dbe9f8;}
.pthm-quiz ol.pthm-quiz-track li.is-now::before{background:#4da3ff;}
.pthm-quiz ol.pthm-quiz-track li.is-ok{color:#8fb0a0;}
.pthm-quiz ol.pthm-quiz-track li.is-ok::before{background:#4ade80;}
.pthm-quiz ol.pthm-quiz-track li.is-bad{color:#b99a9a;}
.pthm-quiz ol.pthm-quiz-track li.is-bad::before{background:#f87171;}

@keyframes pthm-quiz-in{from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:none;}}
.pthm-quiz--run .pthm-quiz-step, .pthm-quiz--run .pthm-quiz-end{animation:pthm-quiz-in .3s ease both;}
.pthm-quiz--run .pthm-quiz-step[hidden], .pthm-quiz--run .pthm-quiz-end[hidden]{display:none;}
.pthm-quiz .pthm-quiz-q:focus{outline:0;}

.pthm-quiz .pthm-quiz-foot{display:flex; align-items:center; justify-content:space-between; gap:14px; margin:16px 0 0; scroll-margin-bottom:22px;}
.pthm-quiz .pthm-quiz-foot[hidden]{display:none;}
.pthm-quiz .pthm-quiz-body .pthm-quiz-foot p.pthm-quiz-msg{margin:0;}
.pthm-quiz.answered.is-miss .pthm-quiz-body p.pthm-quiz-msg{color:#fbbf24;}
.pthm-quiz .pthm-quiz-next, .pthm-quiz .pthm-quiz-next:hover, .pthm-quiz .pthm-quiz-next:focus{
  flex:none; display:inline-flex; align-items:center; justify-content:center; gap:8px; height:46px; margin:0; padding:0 18px;
  border:0; border-radius:11px; color:#fff; background:linear-gradient(180deg,#3b86f5,#2a6fe0);
  font-family:inherit; font-size:15px; font-weight:700; line-height:1; letter-spacing:0; text-transform:none; white-space:nowrap; cursor:pointer;
  -webkit-appearance:none; appearance:none; box-shadow:0 8px 22px rgba(47,123,240,.38);
  transition:transform .16s ease, box-shadow .16s ease;
}
.pthm-quiz .pthm-quiz-next:hover{transform:translateY(-1px); box-shadow:0 12px 26px rgba(47,123,240,.5);}
.pthm-quiz .pthm-quiz-next:focus-visible{outline:3px solid rgba(77,163,255,.6); outline-offset:2px;}
.pthm-quiz .pthm-quiz-next[hidden]{display:none;}
.pthm-quiz .pthm-quiz-next svg{width:15px; height:15px;}

/* the tally */
.pthm-quiz .pthm-quiz-end:focus{outline:0;}
.pthm-quiz .pthm-quiz-score{display:flex; align-items:center; gap:16px;}
.pthm-quiz .pthm-quiz-score b{
  flex:none; font-size:46px; font-weight:800; letter-spacing:-.045em; line-height:1;
  background:linear-gradient(90deg,#5d8ce6,#a9c8f5); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.pthm-quiz .pthm-quiz-score b small{font-size:.42em; font-weight:700; letter-spacing:-.01em;}
.pthm-quiz .pthm-quiz-score span{font-size:15.5px; font-weight:600; line-height:1.4; color:#e9f1f8;}
.pthm-quiz .pthm-quiz-lab{margin:18px 0 9px; font-size:10.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:#a9c8f5;}
.pthm-quiz .pthm-quiz-tags{display:flex; flex-wrap:wrap; gap:7px;}
.pthm-quiz .pthm-quiz-tags span{
  display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border-radius:9px; font-size:13.5px; font-weight:600; line-height:1.2;
  color:#e3ecf5; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12);
}
.pthm-quiz .pthm-quiz-tags span::before{content:""; flex:none; width:7px; height:7px; border-radius:50%; background:#4ade80;}
.pthm-quiz .pthm-quiz-tags span.is-bad{border-color:rgba(248,113,113,.4); background:rgba(248,113,113,.08);}
.pthm-quiz .pthm-quiz-tags span.is-bad::before{background:#f87171;}
.pthm-quiz .pthm-quiz-endfoot{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:14px 20px;
  margin:20px 0 0; padding:16px 0 0; border-top:1px solid rgba(255,255,255,.12); font-size:13.5px; line-height:1.5; color:#9fb3c8;
}
.pthm-quiz .pthm-quiz-endfoot > span:first-child{flex:1 1 260px;}
.pthm-quiz .pthm-quiz-endbtns{display:flex; align-items:center; gap:10px;}
.pthm-quiz a.pthm-quiz-go, .pthm-quiz a.pthm-quiz-go:hover, .pthm-quiz a.pthm-quiz-go:focus, .pthm-quiz a.pthm-quiz-go:visited{
  display:inline-flex; align-items:center; justify-content:center; height:46px; padding:0 20px; border-radius:11px;
  color:#fff; text-decoration:none; background:linear-gradient(180deg,#3b86f5,#2a6fe0); font-size:15px; font-weight:700; line-height:1; white-space:nowrap;
  box-shadow:0 8px 22px rgba(47,123,240,.38);
}
.pthm-quiz .pthm-quiz-again, .pthm-quiz .pthm-quiz-again:hover, .pthm-quiz .pthm-quiz-again:focus{
  display:inline-flex; align-items:center; justify-content:center; height:46px; margin:0; padding:0 16px; border-radius:11px;
  border:1px solid rgba(255,255,255,.22); background:rgba(255,255,255,.06); color:#fff;
  font-family:inherit; font-size:15px; font-weight:600; line-height:1; letter-spacing:0; text-transform:none; white-space:nowrap; cursor:pointer;
  -webkit-appearance:none; appearance:none; box-shadow:none;
}
.pthm-quiz .pthm-quiz-again:hover{background:rgba(255,255,255,.12);}

/* =============================================================
   THE SUBJECTS OF A LICENCE, ONE ROW EACH (CPL: seven)
   A schedule on a wide screen, a stack of short cards on a phone.
   ============================================================= */
.pthm .pthm-subs{grid-template-columns:1fr;}
.pthm .pthm-subs-cols, .pthm .pthm-sub{
  display:grid; grid-template-columns:42px minmax(0,1.15fr) 215px minmax(0,1.2fr) 108px; column-gap:22px; align-items:center;
  padding-left:32px; padding-right:32px;
}
.pthm .pthm-grid > .pthm-subs-cols{
  padding-top:13px; padding-bottom:13px; background:#eef2f7;
  font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--muted);
}
.pthm .pthm-sub{padding-top:20px; padding-bottom:20px; transition:background .18s ease;}
.pthm .pthm-sub:hover{background:#fff;}
.pthm .pthm-sub h3{font-size:18.5px; font-weight:700; letter-spacing:-.012em; line-height:1.25; color:var(--ink); margin:0;}
.pthm .pthm-sub-code{display:block; margin-top:3px; font-size:12.5px; font-weight:600; letter-spacing:.03em; line-height:1.3; color:var(--muted);}
.pthm .pthm-sub-n{display:flex; align-items:center; gap:12px; font-size:14.5px; line-height:1.3; color:var(--text);}
.pthm .pthm-sub-n b{font-weight:800; color:var(--ink);}
/* the count, then one pip for each exam; the count keeps a set width so the pips line up */
.pthm .pthm-sub-c{flex:none; min-width:137px;}
.pthm .pthm-pips{flex:none; display:flex; gap:4px;}
.pthm .pthm-pips i{width:10px; height:10px; border-radius:3px; background:linear-gradient(135deg,#2a6fe0,#5d8ce6);}
.pthm ul.pthm-sub-x{display:flex; flex-wrap:wrap; gap:2px 0; margin:0; padding:0; font-size:14px; line-height:1.4; color:var(--muted);}
.pthm ul.pthm-sub-x li{margin:0; padding:0;}
.pthm ul.pthm-sub-x li + li::before{content:"·"; margin:0 8px; color:#a9b6c6;}
.pthm .pthm-sub .pthm-inc{justify-self:end;}
.pthm .pthm-inc--new{color:var(--blue-dk); background:rgba(47,123,240,.12);}
.pthm .pthm-inc--soon{color:#a15c07; background:rgba(245,158,11,.16);}

/* a link at the foot of a cell */
.pthm a.pthm-more, .pthm a.pthm-more:visited{
  display:flex; align-items:center; gap:7px; margin-top:20px; padding-top:18px; border-top:1px solid var(--line);
  font-size:14.5px; font-weight:600; color:var(--blue-dk);
}
.pthm a.pthm-more svg{width:15px; height:15px; transition:transform .18s ease;}
.pthm a.pthm-more:hover{color:var(--blue);}
.pthm a.pthm-more:hover svg{transform:translateX(3px);}
/* two cells whose last line (a link, a partner) sits on the same level */
.pthm .pthm-cats--foot .pthm-cat{display:flex; flex-direction:column;}
.pthm .pthm-cats--foot .pthm-partner, .pthm .pthm-cats--foot a.pthm-more{margin-top:auto;}
.pthm .pthm-cats--foot .pthm-list{margin-bottom:20px;}

/* three such cells in a row */
.pthm .pthm-cats--3{grid-template-columns:repeat(3,1fr);}
.pthm .pthm-cats--3 .pthm-cat{padding:32px 28px 30px;}
.pthm .pthm-cats--3 .pthm-cat-top{grid-template-columns:auto 1fr; row-gap:12px;}
.pthm .pthm-cats--3 .pthm-cat-top .pthm-inc{grid-column:1 / -1; justify-self:start;}
.pthm .pthm-cats--3 .pthm-cat h3{font-size:20px;}

/* a line of small print that closes a block */
.pthm .pthm-ladder--note{gap:10px; text-align:left; flex-wrap:nowrap; align-items:flex-start; justify-content:center;}
.pthm .pthm-ladder--note svg{flex:none; width:17px; height:17px; margin-top:2px; color:var(--blue);}
.pthm .pthm-ladder--note b{color:var(--ink); font-weight:700;}
.pthm .pthm-ladder--note span{max-width:78ch;}

/* =============================================================
   A VIDEO THAT ONLY LOADS WHEN IT IS ASKED FOR
   A still and a play button; the player replaces them on a click.
   ============================================================= */
.pthm button.pthm-film, .pthm button.pthm-film:hover, .pthm button.pthm-film:focus, .pthm div.pthm-film{
  position:relative; display:block; width:100%; height:0; padding:0 0 56.25%; margin:0; overflow:hidden; cursor:pointer;
  border:1px solid rgba(255,255,255,.16); border-radius:14px; background:#0d2033; box-shadow:0 20px 60px rgba(3,12,24,.5);
}
.pthm div.pthm-film{cursor:default;}
.pthm button.pthm-film:focus-visible{outline:3px solid rgba(77,163,255,.7); outline-offset:3px;}
.pthm .pthm-film picture, .pthm .pthm-film img, .pthm .pthm-film iframe{position:absolute; left:0; top:0; width:100%; height:100%; max-width:none; margin:0; border:0; display:block;}
.pthm .pthm-film img{object-fit:cover;}
.pthm .pthm-film::after{content:""; position:absolute; left:0; top:0; right:0; bottom:0; background:linear-gradient(180deg,rgba(7,19,32,.2),rgba(7,19,32,.46)); pointer-events:none;}
.pthm div.pthm-film::after{display:none;}
.pthm .pthm-film-play{
  position:absolute; z-index:1; left:50%; top:50%; width:70px; height:70px; margin:-35px 0 0 -35px; border-radius:50%;
  display:grid; place-items:center; color:#fff; background:linear-gradient(180deg,#3b86f5,#2a6fe0);
  box-shadow:0 0 0 8px rgba(255,255,255,.22), 0 14px 36px rgba(3,12,24,.55);
  transition:transform .18s ease;
}
.pthm .pthm-film-play svg{width:24px; height:24px; margin-left:4px;}
.pthm button.pthm-film:hover .pthm-film-play{transform:scale(1.07);}
.pthm .pthm-film-tag{
  position:absolute; z-index:1; right:12px; bottom:12px; padding:7px 12px; border-radius:999px; background:rgba(7,19,32,.78);
  font-size:11px; font-weight:700; letter-spacing:.1em; line-height:1; text-transform:uppercase; color:#fff;
}
.pthm .pthm-dark p.pthm-film-cap{margin:16px 0 0; font-size:13.5px; line-height:1.5; color:var(--ddim); max-width:none;}

/* =============================================================
   RESPONSIVE (CPL page)
   ============================================================= */
@media (max-width:900px){
  .pthm .pthm-cats--3{grid-template-columns:1fr;}
  .pthm .pthm-cats--3 .pthm-cat{padding:28px 22px 26px;}
  .pthm .pthm-grid > .pthm-subs-cols{display:none;}
  .pthm .pthm-sub{grid-template-columns:42px minmax(0,1fr) auto; column-gap:14px; row-gap:9px; padding:20px 22px;}
  .pthm .pthm-sub .pthm-inc{grid-column:3; grid-row:1; align-self:start; margin-top:2px;}
  .pthm .pthm-sub-n{grid-column:2 / -1; grid-row:2;}
  .pthm .pthm-sub-c{min-width:0;}
  /* stacked: the extras become a short ticked list, and only what is new keeps its label */
  .pthm ul.pthm-sub-x{grid-column:2 / -1; grid-row:3; display:grid; gap:5px;}
  .pthm ul.pthm-sub-x li{position:relative; padding-left:21px;}
  .pthm ul.pthm-sub-x li::before, .pthm ul.pthm-sub-x li + li::before{
    content:""; position:absolute; left:4px; top:4px; width:5px; height:9px; margin:0;
    border:solid var(--ok); border-width:0 2px 2px 0; transform:rotate(45deg);
  }
  .pthm .pthm-sub .pthm-inc:not(.pthm-inc--new){display:none;}
}
@media (max-width:640px){
  .pthm .pthm-sub h3{font-size:17px;}
  .pthm .pthm-ladder--note{padding:20px 22px; font-size:14px;}
  .pthm .pthm-film-play{width:58px; height:58px; margin:-29px 0 0 -29px;}
  .pthm .pthm-film-play svg{width:20px; height:20px;}
}
@media (max-width:520px){
  .pthm-quiz ol.pthm-quiz-track{gap:4px; padding:14px 16px 0;}
  .pthm-quiz ol.pthm-quiz-track li{font-size:8.5px; letter-spacing:.04em;}
  .pthm-quiz .pthm-quiz-foot{flex-direction:column; align-items:stretch; gap:12px;}
  .pthm-quiz .pthm-quiz-next{width:100%;}
  .pthm-quiz .pthm-quiz-score b{font-size:40px;}
  .pthm-quiz .pthm-quiz-endbtns{width:100%;}
  .pthm-quiz a.pthm-quiz-go{flex:1 1 auto;}
}
@media (prefers-reduced-motion:reduce){
  .pthm-quiz--run .pthm-quiz-step, .pthm-quiz--run .pthm-quiz-end{animation:none;}
}

/* >>> question figures: written by build-quiz-figs.py from picker-mockup/anim/quizfig.css, edit it there */
/* =============================================================
   THE FIGURE THAT EXPLAINS A SAMPLE QUESTION
   A still picture in the "Why" that becomes the live PilotTrain Animations figure while it is
   on screen. pt-home.js plays it (see the note at the head of its picker covers part); the
   box takes its shape from the padding its markup gives it.
   ============================================================= */

/* The faces the figures' labels are drawn in, beyond the two pt-home.css declares for the covers.
   A browser fetches one only when a figure first asks for it. */
@font-face{
  font-family:'IBM Plex Sans'; font-style:normal; font-weight:400; font-display:swap;
  src:url("fonts/IBMPlexSans-Regular.woff2?v=1") format('woff2');
}
@font-face{
  font-family:'IBM Plex Sans'; font-style:normal; font-weight:600; font-display:swap;
  src:url("fonts/IBMPlexSans-SemiBold.woff2?v=1") format('woff2');
}
@font-face{
  font-family:'IBM Plex Sans Condensed'; font-style:normal; font-weight:600; font-display:swap;
  src:url("fonts/IBMPlexSansCondensed-600.woff2?v=1") format('woff2');
}

.pthm-quiz .pthm-quiz-anim{position:relative; display:block; overflow:hidden; height:0; margin:2px 0 12px; border-radius:10px; background:#fff; isolation:isolate;}
.pthm-quiz .pthm-quiz-anim picture{display:block; margin:0; padding:0;}
.pthm-quiz .pthm-quiz-anim .ptf-poster{position:absolute; left:0; top:0; width:100%; height:100%; max-width:none; max-height:none; object-fit:cover; display:block; border:0; border-radius:0; margin:0; pointer-events:none;}
/* the live figure over the still */
.pthm-quiz .ptf-live{position:absolute; left:0; top:0; right:0; bottom:0; overflow:hidden; opacity:0; transition:opacity .22s ease; pointer-events:none; background:#fff;}
.pthm-quiz .is-live > .ptf-live{opacity:1;}
.pthm-quiz .ptf-cam{display:block; transform-origin:0 0;}
/* The figure alone, whatever stylesheet for the animations is or is not on the page: only its
   stage and canvas show, and none of the player's own frame, heading, notes or controls. */
.pthm-quiz .ptf-live .pta-animation, .pthm-quiz .ptf-live .pta-figure{
  display:block !important; position:static !important; width:100% !important; max-width:none !important; min-width:0 !important;
  margin:0 !important; padding:0 !important; border:0 !important; border-radius:0 !important; background:none !important; box-shadow:none !important; overflow:visible !important;
}
.pthm-quiz .ptf-live .pta-animation > :not(.pta-figure), .pthm-quiz .ptf-live .pta-figure > :not(.pta-stage), .pthm-quiz .ptf-live .pta-stage > :not(canvas){display:none !important;}
.pthm-quiz .ptf-live .pta-stage{
  display:block !important; position:relative !important; width:100% !important; min-width:0 !important; max-width:none !important;
  margin:0 !important; padding:0 !important; border:0 !important; border-radius:0 !important; background:transparent !important; box-shadow:none !important; outline:0 !important;
}
.pthm-quiz .ptf-live .pta-canvas{display:block !important; width:100% !important; height:100% !important; margin:0 !important; border:0 !important; border-radius:0 !important; background:transparent !important;}

/* on a wide card the figure sits beside the words */
@media (min-width:700px){
  .pthm-quiz .pthm-quiz-why--fig{display:grid; grid-template-columns:minmax(0,310px) minmax(0,1fr); column-gap:18px; align-items:start;}
  .pthm-quiz .pthm-quiz-why--fig[hidden]{display:none;}
  .pthm-quiz .pthm-quiz-why--fig > b{grid-column:1 / -1;}
  .pthm-quiz .pthm-quiz-why--fig .pthm-quiz-anim{margin:2px 0 0;}
}
@media (prefers-reduced-motion:reduce){
  .pthm-quiz .ptf-live{transition:none;}
}
/* <<< question figures */