/* =============================================
   CUSTOMER PORTAL TRAINING VIDEOS (customertraining.html) - rebuilt 2026-10-20
   Owner, 2026-10-20: "make the videos html the same style as the website ... and make it much nicer".

   A standalone page, like the legal ones: it loads Variables.css (tokens, the body fade-in, the
   reduced-motion block, the red focus ring) + Legal.css (the sticky bar - here in the homepage's white -, the
   title band, the navy footer) and nothing else. Components.css is NOT loaded, so the handful of shared rules this
   page needs - the buttons and the screen-reader-only text - are restated below with the file and
   line they came from. Nothing in the shared files was changed.

   The owner's standing rules this file keeps:
     - the pop-up has NO white outline: the card itself is border: 0 / background: transparent, the
       navy header runs to its rounded top edge and only the body below it is white;
     - plain colours and plain gradients only, never a stripe or a pattern;
     - no glow on any button - dark "lift" shadows and focus rings only;
     - neighbouring sections never share a background (white bar / navy band / off-white / white /
       off-white / white / navy footer);
     - --red is the only red, Oxanium is never italic, and chevrons are raised .134em.
   No !important, no id selectors, and nothing is stored in the browser.
   ============================================= */

/* =============================================
   1. RESTATED FROM THE SHARED FILES (this page does not load them)
   ============================================= */

/* .btn / .btn-primary / .btn-secondary / .btn-outline-white / .btn-chevron - Components.css:80-140 */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 32px;
  font-family: var(--heading);
  font-size: .875rem;
  font-weight: 600;
  border-radius: 4px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: background .25s cubic-bezier(.16, 1, .3, 1), color .25s cubic-bezier(.16, 1, .3, 1), transform .25s cubic-bezier(.16, 1, .3, 1), box-shadow .35s cubic-bezier(.16, 1, .3, 1), border-color .25s ease;
  border: none;
  letter-spacing: .5px;
  text-transform: uppercase;
}
.btn-primary {
  background: var(--red);
  color: var(--white);
}
.btn-primary:hover {
  transform: translateY(-2px);
  background: var(--red);
}
.btn-primary:active { transform: translateY(0); transition-duration: .08s; }
.btn-secondary {
  background: transparent;
  color: var(--navy);
  border: 2px solid var(--g200);
}
.btn-secondary:hover {
  border-color: var(--navy);
  background: var(--navy);
  color: var(--white);
  transform: translateY(-2px);
}
/* "outline-white" is SOLID - an opaque white pill with navy text. No glow, not transparent. */
.btn-outline-white {
  background: var(--white);
  color: var(--navy);
  border: 2px solid var(--white);
}
.btn-outline-white:hover {
  background: var(--off-white);
  border-color: var(--off-white);
  transform: translateY(-2px);
}
/* Oxanium's capitals sit higher than the middle of the line, so a chevron centred on that line looks
   .134em low. Raised by the same amount, in em so it holds at any button size (Components.css:116). */
.btn-chevron { flex: 0 0 auto; display: inline-block; position: relative; top: -.134em; }

/* Text for screen readers only - the .visually-hidden rule of Hero.css:349-357, renamed and without
   its !important (nothing on this page competes with it). */
.training-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* The first tab stop - .skip-link of Components.css:11-29. */
.training-skip {
  position: absolute;
  left: 16px;
  top: -100px;
  z-index: 10000;
  padding: 12px 20px;
  background: var(--navy);
  color: var(--white);
  font-family: var(--heading);
  font-weight: 600;
  font-size: .875rem;
  border-radius: 0 0 6px 6px;
  transition: top .2s;
}
.training-skip:focus {
  top: 0;
  outline: 2px solid var(--red);
  outline-offset: 2px;
}

/* =============================================
   2. PAGE SHELL
   ============================================= */

/* Variables.css already fades the body in and sets Oxanium, the navy text colour and the white
   ground; this only says so out loud, because the page's first band is navy and the last is navy too
   and nothing should flash grey between them. */
.training-page { background: var(--white); }

/* Replaces the global .container, and matches .legal-bar (Legal.css:18-24) EXACTLY, because the
   sticky navy bar sits directly above it: the same 60px gutter, the same single step down to 24px at
   768px, and no width cap at all (owner, 2026-10-16: "make the page full width"). Capping the column
   put the cards 20px outside the wordmark between 769 and 1024px and left a visible inset on a wide
   monitor while the bar, the title band and the footer ran edge to edge. */
.training-wrap {
  width: 100%;
  margin: 0;
  padding: 0 60px;
}

/* The skip link lands on the first group, <section id="videos">, and Variables.css:113 already keeps
   an anchor jump clear of the 80px sticky bar for every section[id]. */

/* The top bar in the homepage header's own colours (owner, 2026-10-20: "make sure the header on this page is the same
   as the main website in terms of colour"): SOLID white with a hairline under it, and a soft shadow once the page has
   scrolled - Navbar.css .navbar / .navbar.scrolled (Js/Training.js adds .is-scrolled past 50px, as Js/Main.js does).
   Solid since the same day on both: the homepage bar was see-through glass, and dark things passing under it showed
   as a grey box at its left end. This page only: the legal pages keep Legal.css's navy bar. The red Ersen wordmark is
   unchanged - it is the homepage's. White bar, navy title band below it, so the two never share a colour. */
.training-page .legal-header {
  background: var(--white);
  border-bottom: 1px solid rgba(0, 0, 0, .04);
  transition: box-shadow .4s;
}
.training-page .legal-header.is-scrolled {
  box-shadow: 0 4px 30px rgba(0, 0, 0, .06);
}

/* "Back to site" as a real button (owner, 2026-10-20: "make the back to site button clearer and nicer"): the homepage
   header's outline box - Navbar.css .nav-login: 40px tall, a 2px --g200 edge, navy capitals - with a red arrow in
   front. On hover the edge turns navy and the arrow steps left, like this page's Previous button: no glow, no fill. */
.training-page .legal-back {
  height: 40px;
  padding: 0 18px 0 14px;
  gap: 10px;
  font-size: .875rem;
  letter-spacing: 1px;
  color: var(--navy);
  background: var(--white);
  border: 2px solid var(--g200);
  border-radius: 4px;
  white-space: nowrap;
  text-decoration: none;
  transition: border-color .2s ease, color .2s ease;
}
.training-page .legal-back svg {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  color: var(--red);
  position: relative;
  top: -.134em;            /* Oxanium's capitals sit high: raised to their middle, like every chevron on the site */
  transition: transform .25s cubic-bezier(.16, 1, .3, 1);
}
.training-page .legal-back:hover { color: var(--navy); border-color: var(--navy); }
.training-page .legal-back:hover svg { transform: translateX(-3px); }
.training-page .legal-back:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }

/* =============================================
   3. TITLE BAND (adds to .legal-hero, Legal.css:60-83)
   ============================================= */
/* The band itself is Legal.css's .legal-hero, unchanged. This page adds a row of facts and an intro
   under the title, so the title sits a shade further from them than on a legal page. */
.training-hero h1 { margin-bottom: 16px; }
.training-hero-meta {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 4px 0 0;
  padding: 0;
}
/* The .client-chip shape (Sections.css:1333-1336) recoloured for navy. */
.training-hero-pill {
  font-family: var(--heading);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .82);
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 999px;
  padding: 8px 16px;
}
.training-hero-intro {
  max-width: 70ch;
  margin: 18px auto 0;
  font-size: 1.0625rem;
  line-height: 1.8;
  color: var(--g300);
}

/* =============================================
   4. "HOW TO USE THIS PAGE" STRIP
   ============================================= */
.training-start { padding: 56px 0; background: var(--off-white); }
.training-start-grid {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin: 0;
  padding: 0;
}
/* The .welcome-step card (Components.css:720-740), on white because the strip is off-white. */
.training-step {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  min-width: 0;
  padding: 16px 18px;
  border-radius: 10px;
  background: var(--white);
  border: 1px solid var(--g100);
}
.training-step-icon {
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: var(--navy);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
}
.training-step-body { min-width: 0; }
.training-step-title {
  font-family: var(--heading);
  font-size: .95rem;
  font-weight: 700;
  color: var(--navy);
  line-height: 1.3;
  margin: 0 0 4px;
}
.training-step-text {
  margin: 0;
  font-size: .875rem;
  line-height: 1.6;
  color: var(--g600);
}

/* Two plain notes under the steps, in the .legal-callout shape (Legal.css:150-157) but on white,
   because the strip itself is off-white: what to do with JavaScript switched off, and the fact that
   the guides are narrated and captions are not written yet. */
/* Capped at the width of the player pop-up (1080px, the site's card measure) and centred: run the full
   1320px of a wide window, one sentence left 250px of empty box trailing after it. Below 1080px it is
   simply full width again, so nothing changes on a laptop, a tablet or a phone. */
.training-noscript,
.training-captions {
  max-width: 1080px;
  margin: 20px auto 0;
  padding: 18px 24px;
  background: var(--white);
  border: 1px solid var(--g100);
  border-left: 3px solid var(--red);
  border-radius: 6px;
  font-size: .9375rem;
  line-height: 1.7;
  color: var(--g600);
  overflow-wrap: break-word;
}
.training-noscript a,
.training-captions a {
  color: var(--red);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* =============================================
   5. THE TWO GROUPS
   ============================================= */
.training-group { padding: 80px 0; background: var(--white); }
.training-group--alt { background: var(--off-white); }
/* .tech-header (Sections.css:1237) */
.training-group-head { text-align: center; max-width: 760px; margin: 0 auto 40px; }
/* .section-label's values (Components.css:32-43) without the red dash, as every centred header on the
   site drops it (Sections.css:254). */
.training-group-eyebrow {
  font-family: var(--heading);
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 4px;
  color: var(--red);
  margin: 0 0 14px;
}
/* The mid-size site heading (.tech-shots-title, Sections.css:1284-1285) - .section-title's
   clamp(2.25rem, 4.5vw, 3.5rem) is too big for two group headings on one page. */
.training-group-title {
  font-family: var(--heading);
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  font-weight: 800;
  color: var(--navy);
  letter-spacing: -.02em;
  line-height: 1.2;
  margin: 0;
}
.training-group-num { color: var(--red); margin-right: 12px; }   /* .legal-content h2 .num, Legal.css:110 */
/* --g600, not --g500: this line carries information ("5 videos - about 12 minutes"), and --g500
   (#7A839A) is 3.79:1 on white, under the 4.5:1 normal-size text needs. --g600 is 5.93:1 and is the
   grey every other small line on this page already uses. */
.training-group-meta { margin: 12px 0 0; font-size: .9375rem; color: var(--g600); }

.training-grid {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
  margin: 0;
  padding: 0;
}

/* =============================================
   6. THE VIDEO CARD
   The card is the only tab stop: the play button's ::after covers the whole card, the way
   .sustain-more::after does (Sections.css:1374). That is why the button itself stays
   position: static - a positioned button would anchor its own ::after to the 56px disc.
   ============================================= */
.training-card {
  position: relative;              /* the ::after above is measured against this */
  display: flex;
  flex-direction: column;
  min-width: 0;
  margin: 0;
  background: var(--off-white);    /* Part 1 sits on white */
  border: 1px solid var(--g100);
  border-radius: 12px;
  overflow: hidden;                /* clips the thumbnail to the corners, as .ca-video does */
  box-shadow: 0 14px 36px -26px rgba(11, 22, 40, .45);                               /* .news-card, Sections.css:745 */
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;      /* Sections.css:746 */
}
.training-group--alt .training-card { background: var(--white); }   /* Part 2 sits on off-white */

/* The media box is a ONE-CELL GRID, not a positioned box: the thumbnail, the two chips and the play
   disc all sit in the same cell, all in normal flow, so they paint in document order (thumbnail
   first, disc last) with no z-index anywhere - and, because this box is not positioned, the disc's
   ::after still reaches the whole card. The navy gradient shows through if a thumbnail is slow or
   missing, so the card still looks deliberate (the .ca-video-media recipe, Components.css:587-600). */
.training-card-media {
  display: grid;
  grid-template: 1fr / 1fr;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: linear-gradient(135deg, var(--navy), var(--navy-mid));
}
.training-card-media > * { grid-area: 1 / 1; }
/* The thumbnails are 640x360 - the same 16:9 as the box - so "cover" crops nothing. The four cinema
   videos are letterboxed in the thumbnail itself, not by CSS. */
.training-card-thumb { width: 100%; height: 100%; object-fit: cover; }
/* A plain navy gradient over the thumbnail (no stripe, no pattern). Every frame is a screenshot of the
   portal - eleven different, mostly white, very busy pictures - so without it the grid read as noise and
   the two chips and the red disc had to fight whatever happened to be behind them. Darkest at the top and
   the bottom, where the number and the length sit, and lightest across the middle, where the red disc is.
   It lifts on hover, so the frame itself comes forward as the card does. It is a <span> in the markup
   rather than a pseudo-element because a pseudo-element would come LAST in the media box and paint over
   the disc; as a span it sits between the thumbnail and the three things on top of it, with no z-index. */
.training-card-scrim {
  pointer-events: none;
  background: linear-gradient(180deg, rgba(11, 22, 40, .34) 0%, rgba(11, 22, 40, .10) 38%, rgba(11, 22, 40, .14) 64%, rgba(11, 22, 40, .52) 100%);
  transition: opacity .25s ease;
}
.training-card:hover .training-card-scrim { opacity: .5; }
.training-card-badge {
  place-self: start start;
  margin: 10px;
  min-width: 28px;
  height: 28px;
  padding: 0 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: rgba(11, 22, 40, .78);
  color: var(--white);
  font-family: var(--heading);
  font-size: .8rem;
  font-weight: 700;
  line-height: 1;
}
.training-card-time {
  place-self: end end;
  margin: 10px;
  padding: 4px 8px;
  border-radius: 6px;
  background: rgba(11, 22, 40, .78);
  color: var(--white);
  font-family: var(--heading);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .6px;
  line-height: 1;
}
/* The play disc - .ca-play (Components.css:601-613). The shadow is neutral black, not a red halo. */
.training-card-play {
  place-self: center;
  position: static;
  width: 56px;
  height: 56px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--red);
  color: var(--white);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .3);
  cursor: pointer;
  transition: transform .2s ease, background .2s ease;
}
.training-card-play::after { content: ''; position: absolute; inset: 0; border-radius: 12px; }
.training-card-play-icon { position: relative; left: 1px; }   /* the triangle's optical centre */

.training-card-text {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px 18px 18px;
}
.training-card-title {
  font-family: var(--heading);
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--navy);
  letter-spacing: -.01em;
  line-height: 1.35;
  margin: 0;
}
/* The description takes the spare height, so every "Watch guide" lines up along the bottom of the
   row (the trick .tech-card--popup p uses, Sections.css:1262). */
.training-card-desc {
  flex: 1 1 auto;
  margin: 0;
  font-size: .9rem;
  line-height: 1.7;
  color: var(--g600);
  overflow-wrap: break-word;
}
.training-card-cue {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  font-family: var(--heading);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--red);
  transition: gap .3s;                                      /* .news-card-link, Sections.css:788-803 */
}
.training-card-cue-chevron { position: relative; top: -.134em; transition: transform .3s; }

/* --- Card states (a lift and a ring, never a glow) --- */
.training-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 22px 48px -26px rgba(11, 22, 40, .5);
  border-color: var(--g200);
}
.training-card:hover .training-card-play { transform: scale(1.08); }
.training-card:hover .training-card-cue { gap: 14px; }
.training-card:hover .training-card-cue-chevron { transform: translateX(3px); }
.training-card:focus-within { border-color: var(--g200); }
.training-card-play:focus { outline: none; }
/* The skip link lands on <section id="videos">, which carries tabindex="-1" so WebKit moves focus
   there at all. Without this, Chrome's own :focus-visible rule would draw a ring round the whole
   80px-padded section. No operable control loses its indicator. */
.training-group:focus { outline: none; }
/* An INSET ring, because the card clips what overflows it (.ca-video-media:focus-visible,
   Components.css:615). */
.training-card-play:focus-visible::after { outline: 3px solid var(--red); outline-offset: -3px; }
.training-card-play:active { transform: scale(.96); }
.training-card:has(.training-card-play:active) { transform: translateY(0); transition-duration: .08s; }

/* =============================================
   7. THE PLAYER POP-UP (a native <dialog>)
   ============================================= */
/* The closed state is declared HERE rather than left to the browser's own dialog:not([open]) rule:
   on a browser with no <dialog> (an office iPad on an old iOS) that rule does not exist, <dialog> is
   just an unknown element, and position: fixed + inset: 0 would blockify it - so the empty player
   would cover the whole page from the moment it loaded. [open] below is (0,2,0) against this (0,1,0)
   and comes later, so showModal() and the no-showModal fallback both still show the card. */
.training-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 10001;             /* only matters on a browser with no showModal(), where it is not in the top layer */
  margin: 0;
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  padding: 16px;
  border: 0;
  background: transparent;
  color: inherit;             /* a <dialog> is given the browser's own Canvas colours; take the page's */
  overflow: hidden;           /* the overlay itself never scrolls - only the card's body does */
}
.training-modal[open] { display: flex; align-items: center; justify-content: center; }
/* One light dim for every pop-up on the site, never darker (--popup-dim, Variables.css:55). The
   literal first, so it resolves under the old ::backdrop inheritance rules too. */
.training-modal::backdrop { background: rgba(11, 22, 40, .2); background: var(--popup-dim); }
/* Same dim for a browser with no showModal(), where ::backdrop is never drawn. */
.training-modal--fallback { background: rgba(11, 22, 40, .2); background: var(--popup-dim); }
/* The page behind must not scroll while the player is open. scrollbar-gutter keeps the classic
   desktop scrollbar's width reserved, so the page does not jump ~15px sideways behind a dim that is
   only 20% - an element with overflow: hidden is still a scroll container, so "stable" holds; a
   browser with overlay scrollbars reserves nothing and is unaffected. */
.training-modal-open { scrollbar-gutter: stable; }
/* Both, as Js/Main.js:194-195 does for the mobile menu ("also lock <html> so iOS can't rubber-band
   the page behind the menu") - the root-only lock is not reliable in iOS Safari. */
.training-modal-open,
.training-modal-open body { overflow: hidden; }

/* The card: no border and no background of its own, so the navy head runs to the rounded top edge
   and there is no light outline around it (the Customer Area card, Components.css:516-529). */
.training-modal-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  width: 100%;
  max-width: 1080px;
  max-height: calc(100vh - 32px);
  max-height: calc(100dvh - 32px);
  padding: 0;
  text-align: left;
  border: 0;
  border-radius: 14px;
  background: transparent;
  box-shadow: 0 28px 70px rgba(11, 22, 40, .30), 0 2px 10px rgba(11, 22, 40, .10);
}
/* .ca-head (Components.css:530-549) with the red underline of .login-card-head (Components.css:299). */
.training-modal-head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 16px 14px 28px;
  background: var(--navy);
  color: var(--white);
  border-bottom: 3px solid var(--red);
}
.training-modal-wordmark {
  flex: 0 0 auto;
  font-family: var(--logo);
  font-size: 30px;
  font-weight: 560;
  line-height: 1;
  letter-spacing: .06em;
  color: var(--red);
}
.training-modal-headings {
  min-width: 0;
  padding-left: 16px;
  border-left: 1px solid rgba(255, 255, 255, .25);
}
.training-modal-count {
  font-family: var(--heading);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .7);
  margin: 0;
}
.training-modal-title {
  font-family: var(--heading);
  font-size: clamp(1.1rem, 2.2vw, 1.45rem);
  font-weight: 700;
  color: var(--white);
  line-height: 1.25;
  letter-spacing: 0;
  margin: 2px 0 0;
}
/* Focused on open so it is read first (Js/Training.js then hands focus on to the player): it is a
   heading, not a control, so it is not given a ring of its own (Components.css:580). */
.training-modal-title:focus { outline: none; }
.training-modal-close {
  flex: 0 0 auto;
  margin-left: auto;
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 0;
  border-radius: 6px;
  color: rgba(255, 255, 255, .75);
  cursor: pointer;
  transition: background .2s, color .2s;
}
.training-modal-close:hover { background: rgba(255, 255, 255, .1); color: var(--white); }
.training-modal-close:focus-visible { outline: 2px solid var(--white); outline-offset: 2px; }

/* Only the body scrolls (.ca-body, Components.css:567-579). */
.training-modal-body {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 22px 28px 24px;
  background: var(--white);
  scrollbar-width: thin;
  scrollbar-color: var(--g300) transparent;
}
/* On a phone the card is the full height of the screen, so the body has room to spare: the auto margins
   centre the player and its caption in it instead of leaving them at the top with a tall blank area below.
   Auto margins take up only POSITIVE spare room, so where there is none (every desktop window) they
   resolve to 0 and nothing moves - and nothing is ever pushed out of the top, which is what
   justify-content: center would do in a box that scrolls. */
.training-modal-inner {
  width: 100%;
  min-width: 0;
  margin: auto 0;
}
.training-modal-body::-webkit-scrollbar { width: 8px; }
.training-modal-body::-webkit-scrollbar-thumb { background: var(--g300); border-radius: 8px; }
.training-modal-body::-webkit-scrollbar-track { background: transparent; }

/* The player box is sized from the height that is LEFT, so a 16:9 guide in a short laptop window and
   a 2.1:1 one on a tall phone both fit whole, with the controls always reachable and nothing cropped.
   Js/Training.js sets --training-ratio per video (and refines it from the file's own videoWidth /
   videoHeight), so a future re-encode needs no change here. max(240px, ...) stops the box collapsing
   in a window shorter than the chrome; the body's overflow-y is the backstop. */
.training-player {
  --training-ratio: 16 / 9;
  --training-chrome: 300px;
  width: min(100%, max(240px, calc((100vh - var(--training-chrome)) * var(--training-ratio))));
  width: min(100%, max(240px, calc((100dvh - var(--training-chrome)) * var(--training-ratio))));
  aspect-ratio: var(--training-ratio);
  margin: 0 auto;
  background: #000;
  border-radius: 8px;
  overflow: hidden;
}
.training-video { display: block; width: 100%; height: 100%; object-fit: contain; background: #000; }
/* Focus is handed on to the player once the heading has been read, so the player needs a ring of its
   own. INSET, because the box above clips whatever overflows it - the same shape the Customer Area
   player uses (.ca-video-media:focus-visible, Components.css:615). Not a glow: a plain outline. */
.training-video:focus-visible { outline: 3px solid var(--red); outline-offset: -3px; }

/* While a file is on its way, and if it never arrives. */
.training-status {
  margin: 14px 0 0;
  text-align: center;
  font-family: var(--heading);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--g600);          /* readable grey: --g500 is only 3.79:1 on white, and this line talks */
}
/* It stays in the page as a live region and is simply filled or emptied: a region that is taken out
   of the page and put back is not reliably read out. While it is empty it has no content, so no line
   box and no height - this only drops its margin as well, so it takes up nothing at all. */
.training-status:empty { margin: 0; }
.training-error {
  max-width: 64ch;
  margin: 0 auto;
  padding: 18px 22px;
  background: var(--off-white);
  border: 1px solid var(--g100);
  border-left: 3px solid var(--red);
  border-radius: 8px;
}
.training-error:focus { outline: none; }
.training-error:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
.training-error-title {
  margin: 0 0 6px;
  font-family: var(--heading);
  font-size: 1rem;
  font-weight: 700;
  color: var(--navy);
}
.training-error-text {
  margin: 0;
  font-size: .9375rem;
  line-height: 1.7;
  color: var(--g600);
  overflow-wrap: break-word;
}
.training-error-text a { color: var(--red); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }

/* Centred, like every other caption on this page: the player box above it is centred and runs the full
   width of the body, so a left-aligned block capped at 76ch started a good 180px in from the video's left
   edge on a desktop and read as though it had slipped. */
.training-modal-desc {
  max-width: 76ch;
  margin: 16px auto 0;
  text-align: center;
  font-size: .9375rem;
  line-height: 1.7;
  color: var(--g600);
  overflow-wrap: break-word;
}

/* .ca-foot (Components.css:625-635) */
.training-modal-foot {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 28px;
  background: var(--white);
  border-top: 1px solid var(--g100);
  box-shadow: 0 -12px 30px -22px rgba(11, 22, 40, .4);
}
.training-progress {
  flex: 1 1 auto;
  height: 4px;
  border-radius: 999px;
  background: var(--g200);
  overflow: hidden;
}
.training-progress-fill {
  display: block;
  height: 100%;
  width: 9%;
  background: var(--red);
  border-radius: inherit;
  transition: width .25s ease;
}
.training-progress-text {
  flex: 0 0 auto;
  margin: 0;
  font-family: var(--heading);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: 1.2px;
  color: var(--g600);          /* as above - 12px text needs more than --g500's 3.79:1 */
}
.training-nav-prev,
.training-nav-next { flex: 0 0 auto; padding: 13px 22px; }
/* Greyed at the ends of the list (Sections.css:1200); a disabled button must not answer a hover
   either, or Previous on video 1 fills in navy as though it still did something. */
.training-nav-prev[disabled],
.training-nav-next[disabled] { opacity: .5; cursor: not-allowed; }
.training-nav-prev[disabled]:hover {
  transform: none;
  background: transparent;
  color: var(--navy);
  border-color: var(--g200);
}
.training-nav-next[disabled]:hover { transform: none; background: var(--red); }
.training-nav-next:not([disabled]):hover .btn-chevron { transform: translateX(4px); }
.training-chevron-left { top: -.134em; }
.training-nav-prev:not([disabled]):hover .training-chevron-left { transform: translateX(-4px); }

/* =============================================
   8. HELP STRIP (the Careers pattern: a navy band on white)
   ============================================= */
.training-help { padding: 80px 0; background: var(--white); }
.training-help-band {
  position: relative;
  overflow: hidden;
  background: var(--navy);
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-mid) 100%);
  border-radius: 18px;
  padding: 64px 56px;
  text-align: center;
  box-shadow: 0 24px 60px rgba(11, 22, 40, .28);                     /* .careers-band, Sections.css:819-828 */
}
/* A plain radial gradient in the corner so the band is not a flat block (Sections.css:830-839). */
.training-help-band::before {
  content: '';
  position: absolute;
  top: -120px;
  right: -120px;
  width: 320px;
  height: 320px;
  background: radial-gradient(circle, var(--red-glow) 0%, rgba(237, 28, 36, 0) 70%);
  pointer-events: none;
}
.training-help-band > * { position: relative; z-index: 1; }
.training-help-title {
  font-family: var(--heading);
  font-weight: 700;
  font-size: clamp(1.6rem, 3.2vw, 2.5rem);
  line-height: 1.2;
  letter-spacing: -.01em;
  color: var(--white);
  margin: 0 auto;
  /* 22ch broke "Need a hand with the portal?" after "the" and left "portal?" alone on a second line on
     every screen, including a 1440 desktop. The cap is in ch, so it shrinks with the clamped font size and
     the line still wraps where it has to on a phone. */
  max-width: 30ch;
}
.training-help-text {
  font-family: var(--body);
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--g200);
  margin: 18px auto 0;
  max-width: 60ch;
}
/* The phone number and the email address read as plain links in the sentence, the way they do
   everywhere else on the site - Variables.css sets `a { color: inherit; text-decoration: none }`, so
   without this they would be invisible as links. */
.training-help-text a {
  color: var(--white);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.training-help-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin-top: 32px;
}
.training-help-actions .btn { max-width: 100%; }

/* =============================================
   9. SMALLER SCREENS
   ============================================= */
/* The page is full width, so on a very large monitor the CARDS are capped instead of the column:
   2100px is where three columns would first grow past the 640px thumbnail (3 x 640 + 56 of gaps +
   120 of gutters). Four columns give ~474px each there, and below it three are kept, so a group of
   five stays 3 + 2 instead of being orphaned as a 1600px breakpoint would leave it. */
@media (min-width: 2100px) {
  .training-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 1440px) {
  .training-grid { gap: 24px; }
}
@media (max-width: 1024px) {
  .training-start { padding: 48px 0; }
  .training-group,
  .training-help { padding: 64px 0; }
  .training-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
  .training-help-band { padding: 52px 40px; }
}
/* The three "how to use this page" cards stack a good deal earlier than the videos do. Each one is an icon
   and two sentences, so three across a tablet left about 150px for the words: "Pick a part, then a video"
   came out over three lines and every card ran to six or seven. One under the other they are a single line
   of text each, and the strip is shorter than the cramped version was. */
@media (max-width: 900px) {
  .training-start-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 768px) {
  .training-wrap { padding: 0 24px; }   /* the one step .legal-bar takes, and it keeps it from here down */
  .training-start { padding: 40px 0; }
  .training-group,
  .training-help { padding: 48px 0; }
  .training-grid { gap: 16px; }
  .training-group-head { margin-bottom: 28px; }
  .training-help-band { padding: 44px 28px; }
  .training-player { --training-chrome: 260px; }
}
/* On a phone the player is a full-bleed, full-height card, so it is the one surface on this page that
   meets the notch: the head's padding-top and the foot's padding-bottom are grown to clear the status
   bar and the home indicator. max() is the form the site already uses (Responsive.css:338), and where
   an inset is 0 the values below stand unchanged, so no other device is affected. The page behind
   needs nothing: in portrait the side insets are 0, and in landscape the page is above 768px, so its
   gutter is already 60px - wider than the ~47px a notch takes. */
@media (max-width: 640px) {
  .training-modal { padding: 0; }
  .training-modal-card { width: 100%; height: 100%; max-height: 100%; border-radius: 0; }
  .training-modal-head { padding: 10px 8px 10px 16px; gap: 10px; padding-top: max(10px, env(safe-area-inset-top)); }
  .training-modal-wordmark { display: none; }
  .training-modal-headings { padding-left: 0; border-left: 0; }
  /* Close is the only way out other than the system Back gesture, so it takes the site's 44px tap
     floor (Responsive.css:164, :50, :121). The head centres its items, so the extra 6px is absorbed. */
  .training-modal-close { width: 44px; height: 44px; }
  /* The video runs edge to edge on a phone, the way a phone's own player does: the body keeps its top and
     bottom padding and drops its side padding, and the three things that are text put theirs back. It is
     32px of extra width on a 390px screen - a ninth more picture - and it stops a 358px video floating in
     the middle of a full-screen white sheet. */
  .training-modal-body { padding: 16px 0 20px; }
  .training-player { border-radius: 0; }
  .training-status,
  .training-modal-desc { padding-left: 16px; padding-right: 16px; }
  .training-error { margin-left: 16px; margin-right: 16px; }
  .training-modal-foot { flex-wrap: wrap; padding: 12px 16px; gap: 10px 12px; padding-bottom: max(12px, env(safe-area-inset-bottom)); }
  /* The counter shares the progress row, so row two is all buttons: at 320px that leaves ~276px for
     ~227px of Previous + Next, instead of ~328px of row fighting over 320px and NEXT being clipped by
     the card's overflow: hidden. The counter keeps order: -1 and follows the bar in source order. */
  .training-progress { order: -1; flex-basis: calc(100% - 60px); }
  .training-progress-text { order: -1; }
  .training-nav-prev,
  .training-nav-next { flex: 1 1 0; justify-content: center; padding: 13px 14px; }
}
@media (max-width: 520px) {
  /* Legal.css:261 makes Back to site a 44px arrow here (the label stays its name for screen readers); restated
     because the outline box above outranks that rule. 44px = the site's tap size, as the homepage's menu button. */
  .training-page .legal-back { width: 44px; height: 44px; padding: 0; justify-content: center; }
  .training-page .legal-back svg { width: 20px; height: 20px; top: 0; }
  .training-group,
  .training-help { padding: 40px 0; }
  .training-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .training-hero-pill { font-size: .72rem; padding: 7px 13px; }
  .training-help-band { padding: 36px 22px; border-radius: 14px; }
  /* A long label wraps instead of widening the page (the fix Legal.css:92 makes). Both buttons now
     carry a short Title Case label, so break-word is enough - "anywhere" is for addresses. */
  .training-help-actions .btn { white-space: normal; overflow-wrap: break-word; }
  .training-help-actions .btn-outline-white { padding: 14px 20px; }
  .training-player { --training-chrome: 220px; }
}
@media (max-width: 390px) {
  .training-grid { gap: 14px; }
  .training-card-text { padding: 14px 14px 16px; }
  /* Belt and braces for the narrowest phones, with the footer's buttons sharing one row. */
  .training-nav-prev,
  .training-nav-next { padding: 13px 10px; }
}
/* A landscape phone. The description goes AND the chrome around the player is trimmed, because the
   number on its own was not enough: on an 844x390 device the 640px modal block does not apply, so
   the card is calc(100dvh - 32px) = 318px, of which 32 (dialog padding) + 69 (head) + 77 (foot) + 46
   (body padding) = ~224px is chrome, leaving ~126px - where --training-chrome: 160px was asking the
   formula for 190px and pushing the video's own control bar below the fold, with no visible scrollbar
   on touch to hint that the body could be scrolled. Trimmed, the chrome measures ~182px, so 200px
   leaves ~18px of headroom and the controls are always reachable. The 300px base is deliberately
   left alone: real desktop chrome lands at ~297px and varies by a line of description either way,
   which is what the body's overflow-y: auto is the backstop for. */
@media (max-height: 560px) {
  .training-modal-desc { display: none; }
  /* max() repeated here only because this block comes after the 640px one and would otherwise drop
     its notch clearance on a window that is both narrow and short; where an inset is 0 these are
     exactly the 8px / 8px the measurement above assumes. */
  .training-modal-head { padding: 8px 16px; padding-top: max(8px, env(safe-area-inset-top)); }
  .training-modal-body { padding: 10px 16px 12px; }
  .training-modal-foot { padding: 8px 16px; padding-bottom: max(8px, env(safe-area-inset-bottom)); }
  .training-player { --training-chrome: 200px; }
}
/* A landscape phone or a small tablet turned on its side. The card gives up the 16px it was inset by and
   its rounded corners and becomes the screen, exactly as it does in portrait below 640px - measured, the
   chrome then comes to 150px (head 63 + foot 65 + the body's 22), so 168px leaves ~18px of headroom and
   the picture grows from 338x190 to 395x222 on an 844x390 phone, a sixth more. Scoped to 1024px wide so a
   short DESKTOP window keeps the card it has always had. The head and the foot take the notch, which in
   landscape is at the side the phone is turned to; where an inset is 0 these are the same 16px as above. */
@media (max-height: 560px) and (max-width: 1024px) {
  .training-modal { padding: 0; }
  .training-modal-card { width: 100%; height: 100%; max-height: 100%; border-radius: 0; }
  .training-modal-head {
    padding-left: max(16px, env(safe-area-inset-left));
    padding-right: max(16px, env(safe-area-inset-right));
  }
  .training-modal-body,
  .training-modal-foot {
    padding-left: max(16px, env(safe-area-inset-left));
    padding-right: max(16px, env(safe-area-inset-right));
  }
  .training-player { --training-chrome: 168px; border-radius: 0; }
}

/* =============================================
   10. LESS MOTION
   Variables.css:78-89 already clamps every duration; this also removes the transforms, the way
   Components.css:792-794 does for the Welcome pop-up.
   ============================================= */
@keyframes trainingBackdropIn { from { opacity: 0; } }
@keyframes trainingCardIn {
  from { opacity: 0; transform: translateY(16px) scale(.985); }
  to { opacity: 1; transform: none; }
}
.training-modal[open]::backdrop { animation: trainingBackdropIn .22s ease both; }
.training-modal[open] .training-modal-card { animation: trainingCardIn .32s cubic-bezier(.2, .8, .2, 1) both; }

@media (prefers-reduced-motion: reduce) {
  .training-card,
  .training-card-play,
  .training-card-cue,
  .training-card-cue-chevron,
  .training-progress-fill { transition: none; }
  .training-card:hover { transform: none; }
  .training-card:hover .training-card-play { transform: none; }
  .training-card:hover .training-card-cue-chevron { transform: none; }
  .training-modal[open] .training-modal-card,
  .training-modal[open]::backdrop { animation: none; }
}