/*
 * PMI Early Careers (Level 3)
 * Everything is scoped to .yl so it cannot affect the theme.
 * Brand colours and fonts are the variables at the top of .yl.
 */

.yl {
  /* ---- Brand tokens: swap for exact PMI theme values if they differ ---- */
  --yl-brand: #1E345D;        /* site navy (page background, sampled from the live site) */
  --yl-navy: #1E345D;         /* dark text on orange and white elements */
  --yl-surface: #2A4D7E;      /* cards and panels, as on the course page sidebar */
  --yl-ink: #FFFFFF;          /* headings and body text */
  --yl-ink-2: #D3DCE8;        /* secondary text */
  --yl-accent: #FF8300;       /* site-wide CTA orange: buttons, links, highlights */
  --yl-accent-hover: #E87700;
  --yl-magenta: #B00060;      /* site-wide button hover colour */
  --yl-cta-text: #FFFFFF;     /* white on orange, as on pmi.co.uk */
  --yl-line: #5F799E;         /* borders on cards and lists, as on the course page */
  --yl-rule: rgba(255,255,255,.14); /* hairlines between sections */
  --yl-paper: var(--yl-brand);
  --yl-display: "Work Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --yl-body: "Work Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --yl-wrap: 1510px;          /* the theme's container width ($width_container), lined up with the logo */

  font-family: var(--yl-body);
  font-size: 17px;
  line-height: 1.6;
  color: var(--yl-ink);
  background: var(--yl-paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.yl *, .yl *::before, .yl *::after { box-sizing: border-box; }
.yl h1, .yl h2, .yl h3, .yl h4 {
  font-family: var(--yl-display);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: inherit;
  margin: 0;
  text-transform: none;
}
.yl p { margin: 0 0 1em; max-width: 80ch; }
.yl p:last-child { margin-bottom: 0; }
.yl ul, .yl ol { margin: 0; padding: 0; list-style: none; }
.yl li { margin: 0; }
.yl a { color: inherit; }
.yl img { max-width: 100%; height: auto; display: block; border: 0; }
.yl strong { font-weight: 700; }
.yl .yl-nowrap { white-space: nowrap; }
.yl figure, .yl blockquote, .yl dl { margin: 0; }

.yl .yl-sr {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- Layout ---------- */
.yl .yl-wrap { width: 84%; max-width: var(--yl-wrap); margin: 0 auto; padding: 0; }
.yl .yl-section { padding: clamp(56px, 8vw, 104px) 0; }
.yl .yl-section { border-top: 0; } /* no dividers between sections, as on the rest of pmi.co.uk */
.yl .yl-head { max-width: 1040px; margin-bottom: clamp(32px, 4vw, 52px); }
.yl .yl-head h2 { font-size: clamp(2rem, 3.4vw, 4rem); line-height: 1.05; margin-bottom: 0.45em; }
.yl .yl-head p { font-size: 1.1875rem; color: var(--yl-ink-2); }

/* ---------- Links and buttons ---------- */
.yl .yl-link { color: var(--yl-accent); font-weight: 600; text-decoration: none; }
.yl .yl-link:hover, .yl .yl-link:focus-visible { text-decoration: underline; text-underline-offset: 3px; }

.yl .yl-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 0.8em 1.4em;
  border: 2px solid transparent; border-radius: 3px;
  font-family: var(--yl-body); font-size: 1.0625rem; font-weight: 700; line-height: 1.2;
  text-decoration: none; text-align: center; cursor: pointer;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.yl .yl-btn--primary { background: var(--yl-accent); color: var(--yl-cta-text); }
.yl .yl-btn--primary:hover, .yl .yl-btn--primary:focus-visible { background: var(--yl-magenta, #B00060); color: #fff; }
/* Secondary call to action: plain text beside the main button that becomes a magenta button on hover, as on pmi.co.uk */
.yl .yl-btn--text { background: transparent; border-color: transparent; color: #fff; }
.yl .yl-btn--text:hover, .yl .yl-btn--text:focus-visible { background: var(--yl-magenta, #B00060); color: #fff; }
.yl .yl-btn--outline { border-color: rgba(255,255,255,.75); color: #fff; background: transparent; }
.yl .yl-btn--outline:hover { background: rgba(255,255,255,.12); }
.yl .yl-btn--ghost { border-color: rgba(255,255,255,.75); color: #fff; background: transparent; }
.yl .yl-btn--ghost:hover { background: rgba(255,255,255,.12); }

.yl a:focus-visible, .yl summary:focus-visible {
  outline: 3px solid var(--yl-ink); outline-offset: 3px; border-radius: 4px;
}
.yl .yl-dark a:focus-visible { outline-color: var(--yl-accent); }

.yl .yl-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

/* ---------- Hero ---------- */
.yl.yl-top { background: var(--yl-brand); color: #fff; overflow: hidden; }
.yl .yl-hero { position: relative; padding: clamp(48px, 6vw, 112px) 0 0; min-height: calc(27.9vw + clamp(40px, 5.7vw, 106px)); }
.yl .yl-hero__art { position: absolute; top: 0; right: 0; width: 37.2vw; }
.yl .yl-hero__art img { display: block; width: 100%; height: auto; }
.yl .yl-hero__grid { display: block; }
.yl .yl-hero h1 { position: relative; z-index: 1; max-width: 52vw; margin: 0; font-size: clamp(1.9rem, 4.8vw, 6.25rem); font-weight: 800; line-height: .9; letter-spacing: -0.01em; text-transform: uppercase; }
.yl .yl-hero__tagline { font-family: var(--yl-display); font-size: clamp(1.35rem, 2.2vw, 1.75rem); font-weight: 600; line-height: 1.25; color: #fff; margin-bottom: .7em; }
.yl .yl-hero__lede { font-size: clamp(1.125rem, 1.6vw, 1.3125rem); line-height: 1.55; color: rgba(255,255,255,.9); max-width: 34em; }
.yl .yl-hero__note { margin: 14px 0 0; font-size: .9375rem; color: rgba(255,255,255,.75); }
.yl .yl-doors { margin-top: 36px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.2); display: flex; flex-wrap: wrap; gap: 10px 36px; font-size: 1rem; }
.yl .yl-doors p { margin: 0; color: rgba(255,255,255,.8); }
.yl .yl-ofsted { display: flex; align-items: center; gap: 14px; margin-top: 28px; font-size: .9375rem; color: rgba(255,255,255,.85); }
.yl .yl-ofsted img { width: 64px; height: auto; }

/* ---------- The level staircase (hero + pathways) ---------- */
.yl .yl-stairs { display: flex; flex-direction: column-reverse; gap: 10px; }
.yl .yl-step {
  position: relative;
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 18px;
  width: 78%; padding: 18px 22px; border-radius: 6px;
  animation: yl-rise .6s cubic-bezier(.2, .7, .2, 1) both;
}
.yl .yl-step--l3 { margin-left: 0;   background: var(--yl-accent); color: var(--yl-navy); animation-delay: .1s; }
.yl .yl-step--l4 { margin-left: 11%; background: #fff;  color: var(--yl-navy);          animation-delay: .28s; }
.yl .yl-step--dest { margin-left: 22%; background: transparent; color: #fff; border: 2px dashed rgba(255,255,255,.7); animation-delay: .46s; }
.yl .yl-hero .yl-step--l4 { background: #fff; color: var(--yl-ink); }
.yl .yl-hero .yl-step--dest { color: #fff; border-color: rgba(255,255,255,.7); }
.yl .yl-hero .yl-step { width: 84%; padding: 22px 26px; }
.yl .yl-hero .yl-step--l4 { margin-left: 8%; }
.yl .yl-hero .yl-step--dest { margin-left: 16%; }
.yl .yl-hero .yl-step__num { font-size: 3rem; }
.yl .yl-hero .yl-step__title { font-size: 1.1875rem; }
.yl .yl-step__num { font-family: var(--yl-display); font-weight: 700; font-size: 2.6rem; line-height: .9; letter-spacing: -0.03em; text-align: center; min-width: 2.2ch; }
.yl .yl-step__num small { display: block; font-family: var(--yl-body); font-size: .75rem; font-weight: 700; letter-spacing: .02em; line-height: 1.3; }
.yl .yl-step__title { display: block; font-weight: 700; font-size: 1.0625rem; line-height: 1.3; }
.yl .yl-step__meta { display: block; font-size: .9375rem; line-height: 1.4; opacity: .9; margin-top: 2px; }
.yl .yl-step__tag {
  position: absolute; right: 14px; top: -12px;
  background: #fff; color: var(--yl-navy); border: 2px solid var(--yl-navy);
  font-size: .8125rem; font-weight: 700; line-height: 1; padding: 5px 10px; border-radius: 999px;
}
.yl a.yl-step { text-decoration: none; transition: transform .15s ease, box-shadow .15s ease; }
.yl a.yl-step:hover { transform: translateX(6px); box-shadow: 0 10px 30px rgba(0,0,0,.2); }
.yl a.yl-step:focus-visible { outline: 3px solid var(--yl-accent); outline-offset: 3px; }
.yl a.yl-step--dest:hover { border-color: var(--yl-accent); }
.yl a.yl-step { min-height: var(--yl-step-h, 96px); }
@keyframes yl-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .yl .yl-step { animation: none; } .yl .yl-btn { transition: none; } }

/* ---------- Trust strip ---------- */
.yl .yl-trust { padding: clamp(44px, 6vw, 72px) 0; }
.yl .yl-trust__title { font-size: clamp(1.5rem, 2.6vw, 2rem); text-align: center; margin-bottom: clamp(24px, 3vw, 36px); }
.yl .yl-logos { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px 24px; justify-items: center; align-items: center; }
.yl .yl-logos img { width: 100%; max-width: 140px; height: auto; aspect-ratio: 1; object-fit: contain; border-radius: 4px; }

/* ---------- Programmes ---------- */
.yl .yl-progs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.yl .yl-prog {
  display: flex; flex-direction: column;
  background: #fff; border: 2px solid var(--yl-ink); border-top: 12px solid var(--yl-accent); border-radius: 8px;
  padding: clamp(24px, 3vw, 36px);
}
.yl .yl-prog__q { font-size: 1.125rem; font-weight: 600; color: var(--yl-ink-2); margin-bottom: 6px; }
.yl .yl-prog h3 { font-size: clamp(1.8rem, 2.8vw, 2.3rem); margin-bottom: 14px; }
.yl .yl-facts { display: grid; grid-template-columns: 8.5em minmax(0, 1fr); gap: 12px 18px; margin: 22px 0 28px; padding-top: 22px; border-top: 1px solid var(--yl-line); font-size: 1rem; }
.yl .yl-facts dt { font-weight: 700; }
.yl .yl-facts dd { margin: 0; }
.yl .yl-prog .yl-btn { margin-top: auto; align-self: flex-start; }
.yl .yl-progs__foot { margin-top: 28px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; font-size: 1.0625rem; }
.yl .yl-progs__foot p { margin: 0; max-width: none; }

/* ---------- Comparison ---------- */
.yl .yl-table-wrap { overflow-x: auto; }
.yl .yl-compare { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--yl-surface); border: 1px solid var(--yl-line); border-radius: 8px; font-size: 1rem; }
.yl .yl-compare th, .yl .yl-compare td { padding: 18px 22px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--yl-line); }
.yl .yl-compare tr:last-child th, .yl .yl-compare tr:last-child td { border-bottom: 0; }
.yl .yl-compare thead th { font-family: var(--yl-display); font-size: 1.25rem; font-weight: 700; letter-spacing: -0.01em; }
.yl .yl-compare thead th.yl-compare__ours { color: var(--yl-navy); background: var(--yl-accent); border-radius: 0; }
.yl .yl-compare thead th:first-child { width: 20%; }
.yl .yl-compare tbody th { font-weight: 700; }
.yl .yl-compare td.yl-compare__ours { font-weight: 600; border-left: 3px solid var(--yl-accent); border-right: 3px solid var(--yl-accent); }
.yl .yl-compare__note { margin-top: 18px; font-size: .9375rem; color: var(--yl-ink-2); }

/* ---------- Promise ---------- */
.yl .yl-promise { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.yl .yl-promise .yl-head { margin-bottom: 0; }
.yl .yl-promise__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 28px; }
@media (min-width: 1280px) { .yl .yl-promise__list { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.yl .yl-promise__item { padding: 22px 20px 24px; background: var(--yl-surface); border-radius: 3px; box-shadow: 0 5px 25px rgba(0,0,0,.1); }
.yl .yl-promise__icon { display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: 16px; border-radius: 50%; background: #00B2E2; color: var(--yl-navy); }
.yl .yl-promise__item h3 { font-size: 1.125rem; letter-spacing: -0.01em; margin-bottom: 6px; }
.yl .yl-promise__item p { font-size: .9375rem; line-height: 1.55; color: var(--yl-ink-2); }

/* ---------- Journey (a real sequence, so numbered) ---------- */
.yl .yl-journey { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; counter-reset: yl-stage; max-width: 680px; }
.yl .yl-journey li { position: relative; padding: 0 0 26px 64px; counter-increment: yl-stage; }
.yl .yl-journey li::before {
  content: counter(yl-stage);
  position: absolute; left: 0; top: 0; width: 42px; height: 42px; border-radius: 50%;
  display: grid; place-items: center;
  background: #fff; color: var(--yl-navy); font-family: var(--yl-display); font-weight: 800; font-size: 1.25rem;
}
.yl .yl-journey li::after { content: ""; position: absolute; left: 20px; top: 50px; bottom: 6px; width: 2px; background: var(--yl-ink); opacity: .25; }
.yl .yl-journey li:last-child::after { display: none; }
.yl .yl-journey h3 { font-size: 1.25rem; letter-spacing: -0.01em; margin-bottom: 8px; }
.yl .yl-journey p { font-size: .975rem; color: var(--yl-ink-2); }
.yl .yl-extras { --yl-tick-bg: var(--yl-surface); margin-top: clamp(36px, 5vw, 56px); background: var(--yl-surface); border: 1px solid var(--yl-line); border-radius: 8px; padding: clamp(22px, 3vw, 32px); display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); gap: 16px 40px; }
.yl .yl-extras h3 { font-size: 1.375rem; }
.yl .yl-extras ul { display: grid; gap: 10px; }

/* ---------- Pathways ---------- */
.yl .yl-paths { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(36px, 5vw, 72px); }
@media (min-width: 1500px) { .yl .yl-paths { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.yl .yl-path h3 { font-size: 1.625rem; margin-bottom: 26px; }
.yl .yl-path .yl-step { width: 82%; }
.yl .yl-path .yl-step--l4 { margin-left: 9%; }
.yl .yl-path .yl-step--dest { margin-left: 18%; }
.yl .yl-path { display: flex; flex-direction: column; }
.yl .yl-path .yl-stairs { margin-top: auto; }
.yl .yl-paths__foot { margin-top: 40px; display: flex; flex-wrap: wrap; gap: 10px 32px; }

/* ---------- Stories (placeholders until real stories exist) ---------- */
.yl .yl-stories { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.yl .yl-story { background: var(--yl-surface); border: 1px solid var(--yl-line); border-radius: 8px; padding: clamp(24px, 3vw, 36px); }
.yl .yl-story--placeholder { border: 3px dashed #B54708; }
.yl .yl-story__flag { display: inline-block; background: #B54708; color: #fff; font-weight: 700; font-size: .875rem; padding: 4px 10px; border-radius: 4px; margin-bottom: 16px; }
.yl .yl-story blockquote { margin: 0 0 18px; font-family: var(--yl-display); font-weight: 600; font-size: 1.375rem; line-height: 1.3; letter-spacing: -0.01em; }
.yl .yl-story figcaption { font-size: .9375rem; color: var(--yl-ink-2); }
.yl .yl-story figcaption strong { color: var(--yl-ink); display: block; font-size: 1rem; }
.yl .yl-stories__foot { margin-top: 28px; }

/* ---------- Parents ---------- */
.yl .yl-statement { font-family: var(--yl-display); font-weight: 700; font-size: clamp(1.6rem, 3vw, 2.25rem); line-height: 1.15; letter-spacing: -0.02em; max-width: 30ch;  margin: 0 0 clamp(40px, 5vw, 64px); }
.yl .yl-parents__two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(28px, 4vw, 56px); margin-bottom: clamp(40px, 5vw, 64px); }
.yl .yl-parents h3 { font-size: 1.5rem; margin-bottom: 16px; }
.yl .yl-ticks, .yl .yl-plain { display: grid; gap: 12px; list-style: none; }
.yl .yl-ticks { margin: 24px 0 30px; font-weight: 800; }
.yl .yl-ticks li, .yl .yl-plain li, .yl .yl-extras li, .yl .yl-funding li, .yl .yl-care__group li { position: relative; padding-left: calc(var(--yl-tick-size, 26px) + 12px); min-height: var(--yl-tick-size, 26px); }
.yl .yl-ticks li::before, .yl .yl-plain li::before, .yl .yl-extras li::before, .yl .yl-funding li::before, .yl .yl-care__group li::before {
  /* The theme's own tick (assets/orange-tick.svg): a circle with the tick cut out, so the tick shows the block colour behind it. */
  content: ""; position: absolute; left: 0; top: 0; width: var(--yl-tick-size, 26px); height: var(--yl-tick-size, 26px);
  background: var(--yl-tick-circle, var(--yl-accent));
  -webkit-mask: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cg id='Tick'%3E %3Cpath id='Vector' d='M14.1337 22.1333L23.5337 12.7333L21.667 10.8667L14.1337 18.4L10.3337 14.6L8.46699 16.4667L14.1337 22.1333ZM16.0003 29.3333C14.1559 29.3333 12.4225 28.9831 10.8003 28.2827C9.1781 27.5822 7.76699 26.6325 6.56699 25.4333C5.36699 24.2333 4.41721 22.8222 3.71766 21.2C3.0181 19.5778 2.66788 17.8444 2.66699 16C2.66699 14.1556 3.01721 12.4222 3.71766 10.8C4.4181 9.17778 5.36788 7.76667 6.56699 6.56667C7.76699 5.36667 9.1781 4.41689 10.8003 3.71734C12.4225 3.01778 14.1559 2.66756 16.0003 2.66667C17.8448 2.66667 19.5781 3.01689 21.2003 3.71734C22.8225 4.41778 24.2337 5.36756 25.4337 6.56667C26.6337 7.76667 27.5839 9.17778 28.2843 10.8C28.9848 12.4222 29.3345 14.1556 29.3337 16C29.3337 17.8444 28.9834 19.5778 28.283 21.2C27.5825 22.8222 26.6328 24.2333 25.4337 25.4333C24.2337 26.6333 22.8225 27.5836 21.2003 28.284C19.5781 28.9844 17.8448 29.3342 16.0003 29.3333Z' fill='%23000'/%3E %3C/g%3E %3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cg id='Tick'%3E %3Cpath id='Vector' d='M14.1337 22.1333L23.5337 12.7333L21.667 10.8667L14.1337 18.4L10.3337 14.6L8.46699 16.4667L14.1337 22.1333ZM16.0003 29.3333C14.1559 29.3333 12.4225 28.9831 10.8003 28.2827C9.1781 27.5822 7.76699 26.6325 6.56699 25.4333C5.36699 24.2333 4.41721 22.8222 3.71766 21.2C3.0181 19.5778 2.66788 17.8444 2.66699 16C2.66699 14.1556 3.01721 12.4222 3.71766 10.8C4.4181 9.17778 5.36788 7.76667 6.56699 6.56667C7.76699 5.36667 9.1781 4.41689 10.8003 3.71734C12.4225 3.01778 14.1559 2.66756 16.0003 2.66667C17.8448 2.66667 19.5781 3.01689 21.2003 3.71734C22.8225 4.41778 24.2337 5.36756 25.4337 6.56667C26.6337 7.76667 27.5839 9.17778 28.2843 10.8C28.9848 12.4222 29.3345 14.1556 29.3337 16C29.3337 17.8444 28.9834 19.5778 28.283 21.2C27.5825 22.8222 26.6328 24.2333 25.4337 25.4333C24.2337 26.6333 22.8225 27.5836 21.2003 28.284C19.5781 28.9844 17.8448 29.3342 16.0003 29.3333Z' fill='%23000'/%3E %3C/g%3E %3C/svg%3E") center / contain no-repeat;
}
.yl .yl-ticks li, .yl .yl-plain li, .yl .yl-extras li, .yl .yl-funding li, .yl .yl-care__group li { font-weight: 800; }
.yl .yl-care { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 8px; }
@media (min-width: 1280px) { .yl .yl-care { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.yl .yl-care__group { --yl-tick-bg: #00B2E2; --yl-tick-circle: var(--yl-brand); --yl-tick-size: 22px; background: #00B2E2; border-radius: 3px; padding: 22px 20px 24px; box-shadow: 0 5px 25px rgba(0,0,0,.1); color: #fff; }
.yl .yl-care__group h4 { font-size: 1.1875rem; letter-spacing: -0.01em; margin-bottom: 10px; }
.yl .yl-care__group ul { display: grid; gap: 10px; font-size: .975rem; }
.yl .yl-parents__cta { margin-top: clamp(36px, 5vw, 52px); display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
.yl .yl-parents__cta p { margin: 0; }

/* ---------- FAQ ---------- */
.yl .yl-faq { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; }
.yl .yl-faq .yl-head { margin-bottom: 0; }
.yl .yl-faq .yl-head h2 { font-size: clamp(1.9rem, 3vw, 2.75rem); }
.yl .yl-faq__prompt { font-weight: 800; margin: 18px 0 18px; }
.yl .yl-faqlist { display: grid; gap: 10px; align-content: start; }
.yl .yl-faqlist details { background: var(--yl-surface); border-radius: 3px; }
.yl .yl-faqlist summary h3, .yl .yl-faqlist summary h4 { display: inline; font: inherit; letter-spacing: 0; margin: 0; }
.yl .yl-faqlist summary {
  list-style: none; cursor: pointer; position: relative;
  padding: 16px 52px 16px 16px; font-family: var(--yl-display); font-size: 1rem; font-weight: 800; line-height: 1.4;
}
.yl .yl-faqlist summary::-webkit-details-marker { display: none; }
.yl .yl-faqlist summary::after {
  content: ""; position: absolute; right: 18px; top: 50%; width: 0; height: 0;
  border-left: 9px solid transparent; border-right: 9px solid transparent; border-top: 11px solid #00B2E2;
  transform: translateY(-50%); transition: transform .15s ease;
}
.yl .yl-faqlist details[open] summary::after { transform: translateY(-50%) rotate(180deg); }
.yl .yl-faqlist summary:hover { color: var(--yl-accent); }
.yl .yl-faq__a { padding: 0 16px 18px; color: var(--yl-ink-2); }
.yl .yl-faq__a p { max-width: 62ch; }

@media (min-width: 1280px) {
  .yl .yl-faq { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(32px, 4vw, 72px); align-items: start; }
}

/* ---------- Get started ---------- */
.yl .yl-start .yl-head p { color: var(--yl-ink-2); }
.yl .yl-routes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px; }
.yl .yl-route { display: flex; flex-direction: column; background: var(--yl-surface); border-radius: 3px; padding: clamp(26px, 2.6vw, 36px) clamp(24px, 2.4vw, 32px); box-shadow: 0 5px 25px rgba(0,0,0,.1); }
.yl .yl-route--cyan { background: #00B2E2; }
.yl .yl-route h3 { font-size: clamp(1.5rem, 2.1vw, 2.1rem); font-weight: 900; line-height: 1.12; margin-bottom: 14px; }
.yl .yl-route p { color: #fff; font-size: 1rem; line-height: 1.75; margin-bottom: 24px; }
.yl .yl-route .yl-actions { margin-top: auto; }
.yl .yl-route .yl-btn { align-self: flex-start; }

/* ---------- Employers ---------- */
.yl .yl-employers__sub { font-size: 1.5rem; margin-bottom: 18px; }
.yl .yl-insights { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.yl .yl-insights li { display: flex; }
.yl .yl-insight__title { font-family: var(--yl-display); font-size: 1.375rem; font-weight: 900; line-height: 1.2; letter-spacing: -0.01em; color: #00B2E2; margin: 0 0 12px; }
.yl .yl-insights { margin-bottom: clamp(40px, 5vw, 64px); }
.yl .yl-employers__two { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
.yl .yl-funding { display: grid; gap: 12px; }
.yl .yl-funding__note { margin-top: 18px; font-size: .9375rem; color: var(--yl-ink-2); }
.yl .yl-employers__cta { margin-top: clamp(36px, 5vw, 52px); }

/* ---------- Key facts ---------- */
.yl .yl-keyfacts { padding-top: clamp(40px, 5vw, 64px); padding-bottom: clamp(24px, 3vw, 40px); }
.yl .yl-keyfacts__title { font-size: clamp(1.75rem, 3vw, 2.75rem); margin-bottom: 24px; }
.yl .yl-facts-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 0; list-style: none; }
.yl .yl-facts-grid li { display: flex; }
.yl .yl-fact { display: flex; flex-direction: column; width: 100%; padding: 22px 20px 22px; background: var(--yl-surface); border-radius: 3px; color: #fff; text-decoration: none; box-shadow: 0 5px 25px rgba(0,0,0,.1); transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease; }
.yl .yl-fact:hover, .yl .yl-fact:focus-visible { transform: translateY(-4px); background: var(--yl-accent); box-shadow: 0 10px 30px rgba(0,0,0,.2); }
.yl .yl-fact:hover *, .yl .yl-fact:focus-visible * { color: #fff; }
.yl .yl-fact:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.yl .yl-fact__value { font-family: var(--yl-display); font-size: clamp(2rem, 2.8vw, 3rem); font-weight: 900; line-height: 1; letter-spacing: -0.02em; color: #00B2E2; margin-bottom: 14px; }
.yl .yl-fact__text { font-size: .9375rem; line-height: 1.55; color: var(--yl-ink-2); margin: 0; }
.yl .yl-fact__more { margin-top: auto; color: var(--yl-accent); font-weight: 700; font-size: .9375rem; }
.yl .yl-fact:hover .yl-fact__more { text-decoration: underline; text-underline-offset: 3px; }
@media (min-width: 1280px) { .yl .yl-facts-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ---------- Responsive ---------- */
@media (max-width: 1000px) {
  .yl .yl-promise, .yl .yl-faq { grid-template-columns: minmax(0, 1fr); }
  .yl .yl-journey { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .yl .yl-journey li { padding: 0 0 28px 64px; }
  .yl .yl-journey li::after { left: 20px; right: auto; top: 50px; bottom: 6px; width: 2px; height: auto; }
  .yl .yl-care { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .yl .yl-routes { grid-template-columns: minmax(0, 1fr); }
  .yl .yl-employers__two { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
  .yl { font-size: 16.5px; }
  .yl .yl-progs, .yl .yl-paths, .yl .yl-stories, .yl .yl-parents__two, .yl .yl-care { grid-template-columns: minmax(0, 1fr); }
  .yl .yl-extras { grid-template-columns: minmax(0, 1fr); }
  .yl .yl-step, .yl .yl-path .yl-step, .yl .yl-hero .yl-step { width: 88%; }
  .yl .yl-step--l4, .yl .yl-path .yl-step--l4, .yl .yl-hero .yl-step--l4 { margin-left: 6%; }
  .yl .yl-step--dest, .yl .yl-path .yl-step--dest, .yl .yl-hero .yl-step--dest { margin-left: 12%; }
  .yl .yl-logos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .yl .yl-facts-grid { grid-template-columns: minmax(0, 1fr); }
  .yl .yl-evidence__list { grid-template-columns: minmax(0, 1fr); }
  .yl .yl-facts { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .yl .yl-facts dd { margin-bottom: 10px; }
  .yl .yl-actions .yl-btn { width: 100%; }

  .yl .yl-compare, .yl .yl-compare tbody, .yl .yl-compare tr, .yl .yl-compare th, .yl .yl-compare td { display: block; width: 100%; }
  .yl .yl-compare thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .yl .yl-compare tbody tr { border-bottom: 1px solid var(--yl-line); }
  .yl .yl-compare tbody tr:last-child { border-bottom: 0; }
  .yl .yl-compare tbody th { border-bottom: 0; padding: 14px 18px 4px; font-size: 1.0625rem; }
  .yl .yl-compare td.yl-compare__ours { border-right: 0; }
  .yl .yl-compare td { border-bottom: 0; padding: 12px 18px; }
  .yl .yl-compare td::before { content: attr(data-label); display: block; font-size: .8125rem; font-weight: 700; color: var(--yl-ink-2); margin-bottom: 2px; }
}

/* ---------- Parents: UK survey evidence ---------- */
.yl .yl-evidence { margin: 0 0 clamp(40px, 5vw, 64px); }
.yl .yl-evidence h3 { font-size: 1.25rem; margin-bottom: 16px; }
.yl .yl-evidence__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 32px; }
.yl .yl-evidence__list li { padding-top: 0; font-size: 1rem; color: var(--yl-ink-2); }
.yl .yl-evidence__list strong { display: block; font-family: var(--yl-display); font-size: 2.25rem; font-weight: 700; line-height: 1.1; letter-spacing: -0.02em; color: #00B2E2; }
.yl .yl-evidence__source { margin-top: 14px; font-size: .875rem; font-style: italic; color: var(--yl-ink-2); }

/* ---------- Plugin additions ---------- */
.yl [id] { scroll-margin-top: 120px; } /* keeps anchor jumps clear of a sticky site header */
.yl .yl-story__person { display: flex; align-items: center; gap: 14px; }
.yl .yl-story__photo { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; flex: none; }
.yl .yl-editor-note { padding: 24px; border: 2px dashed var(--yl-line); border-radius: 8px; color: var(--yl-ink-2); font-size: 1rem; }

/* ---------- Overview (opening section under the header) ---------- */
.yl .yl-intro { border-top: 0; padding-top: 0; padding-bottom: clamp(40px, 5vw, 72px); }
.yl .yl-intro h2 { max-width: none; font-size: clamp(2rem, 3.8vw, 4.4rem); line-height: 1.05; letter-spacing: -0.02em; margin-bottom: .45em; color: #fff; }
.yl .yl-intro__lede { font-size: clamp(1.125rem, 1.3vw, 1.3125rem); color: rgba(255,255,255,.9); }
.yl.yl-top a:focus-visible { outline-color: var(--yl-accent); }

/* ---------- Layout: main column + fixed "On this page" menu ---------- */
.pmi-ec-layout { display: grid; grid-template-columns: minmax(0, 1fr) clamp(280px, 23vw, 430px); grid-template-areas: "main toc"; column-gap: clamp(32px, 4vw, 72px); box-sizing: border-box; width: 100%; padding: 0 max(8%, calc((100% - 1510px) / 2)); background: #1E345D; }
.pmi-ec-layout > .pmi-ec-main { grid-area: main; min-width: 0; }
.pmi-ec-layout > .yl-toc { grid-area: toc; }
.pmi-ec-main .yl .yl-wrap { width: 100%; max-width: none; padding-left: 0; padding-right: 0; }
.yl.yl-toc { position: sticky; top: var(--yl-toc-top, 120px); align-self: start; max-height: calc(100vh - var(--yl-toc-top, 120px) - 24px); overflow-y: auto; margin-top: 0; padding: 20px; border-radius: 4px; background: var(--yl-surface); box-shadow: 0 0 0 4px rgba(0,0,0,.08); }
.yl.yl-toc .yl-toc__dropdown { display: none; }
.yl.yl-toc .yl-toc__list { display: grid; gap: 8px; margin: 0; }
.yl.yl-toc .yl-toc__list a { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; padding: 8px 16px; border: 1px solid var(--yl-line); border-radius: 3px; color: #fff; font-family: var(--yl-display); font-size: 1.0625rem; font-weight: 800; line-height: 1.25; text-decoration: none; transition: color .15s ease, background-color .15s ease, border-color .15s ease; }
.yl.yl-toc .yl-toc__list a:hover { color: var(--yl-accent); }
.yl.yl-toc .yl-toc__list a[aria-current], .yl.yl-toc .yl-toc__list a[aria-current]:hover { background: var(--yl-accent); border-color: var(--yl-accent); color: var(--yl-navy); }

/* ---------- Course tiles (match the Apprenticeships page) ---------- */
.yl .yl-courses__group { font-size: 1.25rem; margin: 8px 0 16px; }
.yl .yl-courses { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 24px; margin-bottom: clamp(32px, 4vw, 48px); }
.yl .yl-course { display: flex; flex-direction: column; }
.yl .yl-course__img { display: block; border-radius: 4px; overflow: hidden; background: var(--yl-surface); }
.yl .yl-course__img img { width: 100%; height: auto; aspect-ratio: 478 / 260; object-fit: cover; }
.yl .yl-course__body { display: flex; flex-direction: column; flex: 1; padding-top: 16px; }
.yl .yl-course__meta { font-size: .875rem; color: var(--yl-ink-2); margin-bottom: 6px; }
.yl .yl-course__level { display: inline-block; margin-right: 6px; padding: 2px 8px; border-radius: 3px; background: var(--yl-accent); color: var(--yl-navy); font-size: .75rem; font-weight: 700; }
.yl .yl-course h4 { font-size: 1.25rem; line-height: 1.25; margin-bottom: 8px; }
.yl .yl-course h4 a { color: var(--yl-ink); text-decoration: none; }
.yl .yl-course h4 a:hover { color: var(--yl-accent); }
.yl .yl-course__body > p:not(.yl-course__meta) { font-size: 1rem; color: var(--yl-ink-2); margin-bottom: 16px; }
.yl .yl-course .yl-btn { margin-top: auto; align-self: flex-start; }
.yl .yl-paths__note { margin-top: 28px; }

@media (max-width: 1000px) {
  .pmi-ec-layout { grid-template-columns: minmax(0, 1fr); grid-template-areas: "toc" "main"; }
  .yl.yl-toc { position: sticky; top: var(--yl-toc-top-mobile, 0px); z-index: 30; max-height: none; overflow: visible; margin: 0 -8vw 36px; padding: 0; border-radius: 0; box-shadow: 0 6px 16px rgba(0,0,0,.28); }
  .yl.yl-toc .yl-toc__list { display: none; }
  .yl.yl-toc .yl-toc__dropdown { display: block; }
  .yl.yl-toc .yl-toc__dropdown summary { list-style: none; display: flex; align-items: center; gap: 12px; padding: 14px 52px 14px 8vw; position: relative; cursor: pointer; }
  .yl.yl-toc .yl-toc__dropdown summary::-webkit-details-marker { display: none; }
  .yl.yl-toc .yl-toc__dropdown summary::after { content: ""; position: absolute; right: 8vw; top: 50%; width: 0; height: 0; border-left: 9px solid transparent; border-right: 9px solid transparent; border-top: 11px solid #00B2E2; transform: translateY(-50%); transition: transform .15s ease; }
  .yl.yl-toc .yl-toc__dropdown[open] summary::after { transform: translateY(-50%) rotate(180deg); }
  .yl.yl-toc .yl-toc__label { flex: none; font-size: .8125rem; font-weight: 600; color: var(--yl-ink-2); }
  .yl.yl-toc .yl-toc__current { font-family: var(--yl-display); font-size: 1rem; font-weight: 800; color: #fff; }
  .yl.yl-toc .yl-toc__dropdown ul { display: grid; margin: 0; padding: 0 8vw 12px; max-height: 60vh; overflow-y: auto; }
  .yl.yl-toc .yl-toc__dropdown a { display: block; padding: 12px 0; border-top: 1px solid var(--yl-line); color: #fff; font-weight: 700; text-decoration: none; }
  .yl.yl-toc .yl-toc__dropdown a[aria-current] { color: var(--yl-accent); }

}
@media (max-width: 720px) {
  .yl .yl-courses, .yl .yl-routes, .yl .yl-care { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Mobile header: matches the live site ----------
   The triangle graphic fills most of the width, flush right, and the H1
   sits over it, vertically centred, in smaller uppercase type. */
@media (max-width: 720px) {
  .yl .yl-hero { min-height: 0; padding: 9vw 0 14vw; }
  .yl .yl-hero__art { top: 9vw; width: 74vw; }
  .yl .yl-hero .yl-wrap { width: 91%; display: flex; align-items: center; min-height: 55.5vw; }
  .yl .yl-hero h1 { max-width: 58vw; font-size: max(1.4rem, 6vw); line-height: 1.45; letter-spacing: 0; }
  .pmi-ec-layout { padding: 0 6.5%; }
  .yl .yl-intro h2 { max-width: none; font-size: 1.6rem; line-height: 1.2; }
  .yl .yl-intro__lede { font-size: 1rem; line-height: 1.8; }
}
@media (max-width: 720px) {
  .yl.yl-toc { margin: 0 -6.5vw 32px; }
  .yl.yl-toc .yl-toc__dropdown summary { padding-left: 6.5vw; }
  .yl.yl-toc .yl-toc__dropdown summary::after { right: 6.5vw; }
  .yl.yl-toc .yl-toc__dropdown ul { padding: 0 6.5vw 12px; }
}
/* Pathway steps share one depth at every screen size */
@media (min-width: 1500px) { .yl a.yl-step { --yl-step-h: 128px; } }
@media (max-width: 720px) { .yl a.yl-step { --yl-step-h: 150px; } }

/* ---------- Course tiles: one grid of six ---------- */
.yl .yl-course h3 { font-size: 1.25rem; line-height: 1.25; margin-bottom: 8px; }
.yl .yl-course h3 a { color: #fff; text-decoration: none; }
.yl .yl-course h3 a:hover { color: var(--yl-accent); }
@media (min-width: 1500px) { .yl .yl-courses { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.yl .yl-courses__fit { font-weight: 600; margin: 0; }

/* ---------- At a glance: number plus a short unit ---------- */
.yl .yl-fact__unit { display: block; margin-top: 6px; font-size: 1.25rem; font-weight: 800; line-height: 1.2; letter-spacing: 0; color: #00B2E2; }
.yl .yl-fact__unit:first-child { margin: 0 0 6px; }

/* ---------- Career pathway explorer ---------- */
.yl .yl-explorer__label { font-family: var(--yl-display); font-weight: 800; font-size: 1.125rem; margin: 0 0 12px; }
.yl .yl-explorer__tabs { display: none; flex-wrap: wrap; gap: 10px; margin-bottom: 28px; }
.yl .yl-explorer.is-enhanced .yl-explorer__tabs { display: flex; }
.yl .yl-explorer__tabs button {
  appearance: none; cursor: pointer; min-height: 48px; padding: 10px 18px;
  border: 1px solid var(--yl-line); border-radius: 3px; background: var(--yl-surface); color: #fff;
  font-family: var(--yl-display); font-size: 1rem; font-weight: 800; line-height: 1.2;
  transition: color .15s ease, background-color .15s ease, border-color .15s ease;
}
.yl .yl-explorer__tabs button:hover { color: var(--yl-accent); }
.yl .yl-explorer__tabs button[aria-selected="true"], .yl .yl-explorer__tabs button[aria-selected="true"]:hover { background: var(--yl-accent); border-color: var(--yl-accent); color: var(--yl-navy); }
.yl .yl-explorer__tabs button:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.yl .yl-explorer__panel { max-width: 760px; }
.yl .yl-explorer__panel:focus-visible { outline: 3px solid var(--yl-accent); outline-offset: 6px; }
.yl .yl-explorer__panel + .yl-explorer__panel { margin-top: 48px; }
.yl .yl-explorer.is-enhanced .yl-explorer__panel + .yl-explorer__panel { margin-top: 0; }
.yl .yl-explorer__panel h3 { font-size: 1.5rem; margin-bottom: 6px; }
.yl .yl-explorer.is-enhanced .yl-explorer__panel h3 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.yl .yl-explorer__intro { color: var(--yl-ink-2); margin-bottom: 22px; }
.yl .yl-explorer .yl-step { width: 82%; }
.yl .yl-explorer .yl-step--l4 { margin-left: 9%; }
.yl .yl-explorer .yl-step--dest { margin-left: 18%; }
.yl .yl-explorer a.yl-step { min-height: 96px; }
@media (max-width: 720px) {
  .yl .yl-explorer__tabs { gap: 8px; }
  .yl .yl-explorer__tabs button { flex: 1 1 calc(50% - 8px); padding: 10px 12px; font-size: .9375rem; }
  .yl .yl-explorer .yl-step { width: 88%; }
  .yl .yl-explorer .yl-step--l4 { margin-left: 6%; }
  .yl .yl-explorer .yl-step--dest { margin-left: 12%; }
  .yl .yl-explorer a.yl-step { min-height: 128px; }
}
@media (max-width: 380px) { .yl .yl-explorer a.yl-step { min-height: 150px; } }

/* ---------- "On this page" label and jump arrows ---------- */
.yl.yl-toc .yl-toc__heading { margin: 0 0 12px; font-size: .875rem; font-weight: 700; color: var(--yl-ink-2); }
.yl.yl-toc .yl-toc__icon { flex: none; color: #00B2E2; transition: transform .2s ease, color .15s ease, opacity .15s ease; }
.yl.yl-toc a[data-dir="up"] .yl-toc__icon { transform: rotate(180deg); }
.yl.yl-toc a:hover .yl-toc__icon { color: var(--yl-accent); }
.yl.yl-toc a[aria-current] .yl-toc__icon, .yl.yl-toc a[data-dir="here"] .yl-toc__icon { opacity: 0; }
.yl.yl-toc .yl-toc__dropdown a { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
@media (max-width: 1000px) { .yl.yl-toc .yl-toc__heading { display: none; } }
@media (prefers-reduced-motion: reduce) { .yl.yl-toc .yl-toc__icon { transition: none; } }

/* ---------- Hear from Kacie: one video at a time, chosen from a playlist ---------- */
.yl .yl-player__list { display: none; }
.yl .yl-player__panel + .yl-player__panel { margin-top: 40px; }
.yl .yl-player__panel { max-width: 340px; }
.yl .yl-player__panel-title { font-size: 1.125rem; font-weight: 900; line-height: 1.25; margin: 0 0 12px; }
.yl .yl-player.is-enhanced { display: grid; grid-template-columns: minmax(260px, 340px) minmax(0, 1fr); gap: clamp(24px, 3vw, 48px); align-items: start; }
.yl .yl-player.is-enhanced .yl-player__list { display: block; }
.yl .yl-player.is-enhanced .yl-player__panel + .yl-player__panel { margin-top: 0; }
.yl .yl-player.is-enhanced .yl-player__panel-title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.yl .yl-player__panel:focus-visible { outline: 3px solid var(--yl-accent); outline-offset: 4px; }
.yl .yl-short__media { position: relative; aspect-ratio: 9 / 16; border-radius: 4px; overflow: hidden; background: var(--yl-surface); box-shadow: 0 5px 25px rgba(0,0,0,.1); }
.yl .yl-short__media video { display: block; width: 100%; height: 100%; object-fit: cover; background: var(--yl-surface); }
.yl .yl-short__play { display: none; }
.yl .yl-shorts.is-enhanced .yl-short__play {
  display: grid; place-items: center; position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; cursor: pointer;
  background: linear-gradient(to top, rgba(30,52,93,.55), rgba(30,52,93,0) 45%);
}
.yl .yl-shorts.is-enhanced .yl-short__play::before { content: ""; width: 72px; height: 72px; border-radius: 50%; background: var(--yl-accent); box-shadow: 0 6px 18px rgba(0,0,0,.25); transition: background-color .15s ease, transform .15s ease; }
.yl .yl-shorts.is-enhanced .yl-short__play::after { content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-35%, -50%); border-style: solid; border-width: 14px 0 14px 22px; border-color: transparent transparent transparent #fff; }
.yl .yl-shorts.is-enhanced .yl-short__play:hover::before, .yl .yl-shorts.is-enhanced .yl-short__play:focus-visible::before { background: var(--yl-magenta, #B00060); transform: scale(1.05); }
.yl .yl-short__play:focus-visible { outline: 3px solid #fff; outline-offset: -6px; }
.yl .yl-short.is-playing .yl-short__play, .yl .yl-short.is-playing .yl-short__time { display: none; }
.yl .yl-short__time { position: absolute; left: 10px; bottom: 10px; padding: 3px 8px; border-radius: 3px; background: rgba(30,52,93,.85); color: #fff; font-size: .8125rem; font-weight: 700; pointer-events: none; }
.yl .yl-short__transcript { margin-top: 14px; background: var(--yl-surface); border-radius: 3px; }
.yl .yl-short__transcript summary { list-style: none; cursor: pointer; position: relative; padding: 12px 44px 12px 14px; font-family: var(--yl-display); font-size: .9375rem; font-weight: 800; }
.yl .yl-short__transcript summary::-webkit-details-marker { display: none; }
.yl .yl-short__transcript summary::after { content: ""; position: absolute; right: 14px; top: 50%; border-left: 7px solid transparent; border-right: 7px solid transparent; border-top: 9px solid #00B2E2; transform: translateY(-50%); transition: transform .15s ease; }
.yl .yl-short__transcript[open] summary::after { transform: translateY(-50%) rotate(180deg); }
.yl .yl-short__transcript summary:hover { color: var(--yl-accent); }
.yl .yl-short__transcript > div { padding: 0 14px 14px; font-size: .875rem; line-height: 1.6; color: var(--yl-ink-2); }
.yl .yl-short__transcript > div p { margin: 0 0 .8em; }
/* Playlist */
.yl .yl-player__label { font-family: var(--yl-display); font-size: 1.125rem; font-weight: 800; margin: 0 0 12px; }
.yl .yl-player__tabs { display: grid; grid-auto-rows: 1fr; gap: 10px; }
.yl .yl-player__tabs button {
  appearance: none; display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 14px; align-items: center; width: 100%; height: 100%; padding: 16px; text-align: left; cursor: pointer;
  border: 1px solid var(--yl-line); border-radius: 3px; background: var(--yl-surface); color: #fff; font-family: inherit;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.yl .yl-player__num { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #00B2E2; color: var(--yl-navy); font-family: var(--yl-display); font-weight: 900; }
.yl .yl-player__title { display: block; font-family: var(--yl-display); font-size: 1.0625rem; font-weight: 800; line-height: 1.3; }
.yl .yl-player__summary { display: block; margin-top: 4px; font-size: .9375rem; line-height: 1.5; color: var(--yl-ink-2); }
.yl .yl-player__len { font-size: .8125rem; font-weight: 700; color: var(--yl-ink-2); }
.yl .yl-player__tabs button:hover .yl-player__title { color: var(--yl-accent); }
.yl .yl-player__tabs button[aria-selected="true"], .yl .yl-player__tabs button[aria-selected="true"]:hover { background: var(--yl-accent); border-color: var(--yl-accent); }
.yl .yl-player__tabs button[aria-selected="true"] .yl-player__title, .yl .yl-player__tabs button[aria-selected="true"] .yl-player__summary, .yl .yl-player__tabs button[aria-selected="true"] .yl-player__len { color: var(--yl-navy); }
.yl .yl-player__tabs button[aria-selected="true"] .yl-player__num { background: var(--yl-navy); color: #fff; }
.yl .yl-player__tabs button:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
/* The intro sits beside the video on wide screens and under the heading everywhere else (only one shows) */
.yl .yl-player__intro { display: none; margin: 0 0 28px; font-size: 1.1875rem; line-height: 1.6; color: var(--yl-ink-2); }
@container voices (min-width: 761px) {
  .yl .yl-voices.has-player .yl-voices__intro { display: none; }
  .yl .yl-player.is-enhanced .yl-player__intro { display: block; }
}
@media (max-width: 720px) {
  .yl .yl-voices.has-player .yl-voices__intro { display: block; }
  .yl .yl-player.is-enhanced .yl-player__intro { display: none; }
}
/* When the space beside the video gets narrow (tablets, laptops with the menu open), the playlist moves under the video so the boxes stay short */
.yl .yl-voices .yl-wrap { container-type: inline-size; container-name: voices; }
@container voices (max-width: 760px) {
  .yl .yl-player.is-enhanced { grid-template-columns: minmax(0, 1fr); }
  .yl .yl-player.is-enhanced .yl-player__stage { max-width: 320px; width: 100%; margin: 0 auto; }
  .yl .yl-player__panel { scroll-margin-top: 80px; }
}
@container voices (max-width: 480px) {
  .yl .yl-player__summary { display: none; }
  .yl .yl-player__tabs button { padding: 12px 14px; }
}
@media (max-width: 720px) {
  .yl .yl-player.is-enhanced { grid-template-columns: minmax(0, 1fr); }
  .yl .yl-player__panel, .yl .yl-player.is-enhanced .yl-player__stage { max-width: 320px; width: 100%; margin: 0 auto; }
  .yl .yl-player__panel { scroll-margin-top: 80px; }
  .yl .yl-player__summary { display: none; }
  .yl .yl-player__tabs button { padding: 12px 14px; }
}
@media (prefers-reduced-motion: reduce) { .yl .yl-shorts.is-enhanced .yl-short__play::before, .yl .yl-player__tabs button { transition: none; } }