/* Sales Wheel training, v2 layer (2026-09-28 evening, John's held notes). Loaded after polish.css on every training page and
   worksheet page. Wider pages and a larger reading size; the player bar pinned to the bottom of the screen; the coach On/Off
   switch; the "following along" lock chip; the worksheet panel; chapter lists; the 21 competencies board; the two hands. */

/* ================= wider layout, larger type (keeps the warm serif design) ================= */
.training-page { --read: 1.24rem; --read-lh: 1.62; --col: 62rem; --measure: 48rem; }
@media (min-width: 960px) {
  .training-page .wrap { max-width: 78rem; }
  .training-page .post { grid-template-columns: [full-start text-start] minmax(0, var(--col)) [text-end] minmax(0, 1fr) [full-end]; }
  .training-page .post-body { grid-template-columns: [full-start text-start] minmax(0, var(--col)) [text-end] minmax(0, 1fr) [full-end]; }
  .training-page .post.unit > .unit-step, .training-page .transcripts, .training-page .post.unit > .post-body,
  .training-page .page-nav, .training-page .welcome-cta, .training-page .sw-what,
  .training-page .post.unit > .unit-step.wheel-listen, .training-page .post.unit > .unit-step.calc-step { max-width: var(--col); }
  .training-page .post.unit > .ql-hero2 { max-width: 44rem; }
  .training-page .post-header .post-dek { max-width: 52rem; }
}
@media (min-width: 1200px) { .training-page { --read: 1.3rem; } }
.training-page .unit-step p, .training-page .unit-step li, .training-page .key-points li, .training-page .welcome-step p,
.training-page .tx-body p, .training-page .post-body p, .training-page .lesson-try p, .training-page .sw-what p, .training-page .hub-ci-lead {
  font-size: var(--read); line-height: var(--read-lh);
}
.training-page .unit-step p, .training-page .post-body p, .training-page .lesson-try p, .training-page .tx-body,
.training-page .key-points, .training-page .cp-list, .training-page .cp-head, .training-page .steps3, .training-page .ql-hero.ql-slim,
.training-page .ap, .training-page .ci-due-card, .training-page .ci-wheel, .training-page .hub-ci-lead, .training-page .post-dek,
.training-page .step-lead, .training-page .coach-note, .training-page .ws-dictate { max-width: var(--measure); }
.training-page .step-lead { font-size: calc(var(--read) + 0.06rem) !important; }
.training-page .unit-step h3, .training-page .cp-head h3 { font-size: 1.38rem; }
.training-page .coach-note, .training-page .ws-dictate { font-size: 1rem !important; }
.training-page .ap-title, .training-page .ql-title { font-size: 1.22rem; }
@media (max-width: 600px) {
  .training-page { --read: 1.17rem; --read-lh: 1.6; }
  .training-page .wrap { padding: 0 1.1rem; }
  .training-page .unit-step p, .training-page .unit-step li, .training-page .key-points li { font-size: var(--read); }
}
/* the old per-card skip buttons and the mini dock are gone: the bar has them */
.pl-dock, .training-page .pl-skips { display: none !important; }

/* ================= the player bar pinned to the bottom ================= */
html.has-plbar body { padding-bottom: calc(var(--plbar-h, 5.5rem) + 1rem); }
.pl-bar {
  position: fixed; z-index: 72; left: 0; right: 0; bottom: 0;
  padding: 0 max(1rem, env(safe-area-inset-right, 0px)) env(safe-area-inset-bottom, 0px) max(1rem, env(safe-area-inset-left, 0px));
  background: rgba(38, 32, 28, 0.97); color: #f6efe7; box-shadow: 0 -10px 30px -18px rgba(20, 12, 6, 0.6);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); font-family: "Inter", system-ui, sans-serif;
}
.pl-bar-in { max-width: 74rem; margin: 0 auto; padding: 0 9.5rem 0 0; }
.pl-bar-seek { position: relative; height: 1.2rem; cursor: pointer; touch-action: none; }
.pl-bar-seek::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 4px; margin-top: -2px; border-radius: 99px; background: rgba(255, 255, 255, 0.16); }
.pl-bar-fill { position: absolute; left: 0; top: 50%; height: 4px; margin-top: -2px; width: 0; border-radius: 99px; background: #f08a5d; }
.pl-bar-fill::after { content: ""; position: absolute; right: -6px; top: 50%; width: 12px; height: 12px; margin-top: -6px; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4); }
.pl-bar-marks i { position: absolute; top: 50%; width: 2px; height: 10px; margin: -5px 0 0 -1px; background: rgba(255, 255, 255, 0.55); border-radius: 1px; pointer-events: none; }
.pl-bar-seek:focus-visible { outline: 2px solid #f08a5d; outline-offset: 1px; border-radius: 4px; }
.pl-bar-row { display: flex; align-items: center; gap: 1rem; padding: 0 0 0.6rem; min-height: 3.2rem; }
.pl-bar-ctl { display: flex; align-items: center; gap: 0.35rem; flex: none; }
.pl-bar-btn { position: relative; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #efe6dc; cursor: pointer; }
.pl-bar-btn svg { width: 1.55rem; height: 1.55rem; }
.pl-bar-btn span { position: absolute; left: 0; right: 0; top: 50%; margin-top: -0.05rem; font-size: 0.56rem; font-weight: 700; letter-spacing: -0.02em; text-align: center; transform: translateY(-5%); }
.pl-bar-btn:hover { background: rgba(255, 255, 255, 0.09); }
.pl-bar-btn:disabled { opacity: 0.35; cursor: default; background: transparent; }
.pl-bar-play { display: grid; place-items: center; width: 3.1rem; height: 3.1rem; margin: 0 0.15rem; padding: 0; border: 0; border-radius: 50%; background: #d0592b; cursor: pointer; box-shadow: 0 6px 16px -8px rgba(208, 89, 43, 0.9); }
.pl-bar-play:hover { background: #e0693a; }
.pl-bar-icon { display: block; width: 0; height: 0; border-style: solid; border-width: 0.55rem 0 0.55rem 0.9rem; border-color: transparent transparent transparent #fff; margin-left: 0.2rem; }
.pl-bar.is-playing .pl-bar-icon { width: 0.85rem; height: 1rem; border: 0; margin: 0; background: linear-gradient(90deg, #fff 0 34%, transparent 34% 66%, #fff 66% 100%); }
.pl-bar-info { min-width: 0; flex: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 0.1rem; padding: 0; border: 0; background: none; color: inherit; text-align: left; cursor: pointer; }
.pl-bar-title { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: "Newsreader", Georgia, serif; font-size: 1.12rem; line-height: 1.2; color: #fff; }
.pl-bar-sub { display: flex; gap: 0.6rem; max-width: 100%; font-size: 0.8rem; color: #cbbfb2; }
.pl-bar-chap { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-bar-chap:empty { display: none; }
.pl-bar-time { flex: none; font-variant-numeric: tabular-nums; }
@media (max-width: 899px) { .pl-bar-in { padding-right: 0; } }
@media (max-width: 600px) {
  .pl-bar { padding-left: 0.7rem; padding-right: 0.7rem; }
  .pl-bar-row { gap: 0.55rem; padding-bottom: 0.5rem; }
  .pl-bar-ctl { gap: 0.1rem; }
  .pl-bar-btn { width: 2.55rem; height: 2.55rem; }
  .pl-bar-play { width: 2.9rem; height: 2.9rem; }
  .pl-bar-title { font-size: 1rem; }
  .pl-bar-sub { font-size: 0.74rem; flex-direction: column; gap: 0; }
}
@media (max-width: 360px) { .pl-bar-info { display: none; } .pl-bar-row { justify-content: center; } }
body.coach-open .pl-bar { z-index: 81; }
@media (min-width: 900px) { body.coach-open .pl-bar { right: min(28rem, 100vw); } body.coach-open .pl-bar-in { padding-right: 0; } }
@media print { .pl-bar, .pl-guide-chip, .ws-panel, .pl-chaps { display: none !important; } html.has-plbar body { padding-bottom: 0; } }

/* chapters on a recording card */
.training-page .pl-chaps { max-width: var(--measure); margin: 0.2rem 0 var(--s3); padding: 0.2rem 0 0 0.25rem; }
.training-page .pl-chaps-h { margin: 0 0 0.35rem !important; font: 600 0.72rem/1 var(--sans) !important; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted) !important; }
.training-page .pl-chaps ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.training-page .pl-chaps li { margin: 0 !important; font-size: 1rem !important; }
.training-page .pl-chaps button { display: inline-flex; align-items: baseline; gap: 0.45rem; padding: 0.42rem 0.75rem; border: 1px solid var(--rule); border-radius: 999px; background: var(--card); color: var(--ink-2); font: 500 0.9rem/1.2 var(--sans); cursor: pointer; text-align: left; }
.training-page .pl-chaps button:hover { border-color: var(--accent-bright); color: var(--accent); }
.training-page .pl-chap-t { font-variant-numeric: tabular-nums; color: var(--muted); font-size: 0.8rem; }
.training-page .pl-chaps button.is-now { background: var(--accent-tint); border-color: var(--accent-bright); color: var(--accent); }

/* ================= following along: the drawing moves, the page holds still ================= */
html.is-guided, html.is-guided body { overscroll-behavior: none; }
.pl-bar-guide { display: none; align-items: center; gap: 0.45rem; font-size: 0.8rem; font-weight: 600; color: #f6c3aa; }
html.is-guided .pl-bar-guide { display: inline-flex; }
html.is-guided .pl-bar-sub { display: none; }
.pl-guide-dot { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: #f08a5d; animation: guide-pulse 1.4s ease-in-out infinite; }
@keyframes guide-pulse { 50% { box-shadow: 0 0 0 5px rgba(240, 138, 93, 0.25); } }
@media (prefers-reduced-motion: reduce) { .pl-guide-dot { animation: none; } }
/* the zoom label sits in its own strip under the drawing, so it never covers the words being talked about */
.heli-zoom .heli-label { position: relative; z-index: 3; display: block; left: auto; bottom: auto; margin: 0; max-width: none; border-radius: 0;
  padding: 0.5rem 0.8rem; background: #2a2420; color: #fff; font: 600 0.9rem/1.3 "Inter", system-ui, sans-serif; }
.heli-zoom .heli-label[hidden] { display: block; visibility: hidden; }
.heli-zoom .heli-label:empty::before { content: "\00a0"; }

/* ================= the coach switch (On / Off) ================= */
.coach-fab { bottom: calc(var(--plbar-h, 0px) + 0.8rem); gap: 0.6rem; padding: 0 0.55rem 0 0.9rem; height: 3.2rem; }
html:not(.has-plbar) .coach-fab { bottom: calc(1rem + env(safe-area-inset-bottom, 0px)); }
.coach-fab-sw { position: relative; display: inline-flex; align-items: center; justify-content: flex-end; width: 3.6rem; height: 2rem; padding: 0 0.55rem; border-radius: 999px; background: rgba(0, 0, 0, 0.22); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.coach-fab-knob { position: absolute; left: 0.22rem; top: 0.22rem; width: 1.56rem; height: 1.56rem; border-radius: 50%; background: #fff; transition: transform 0.18s ease; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); }
.coach-fab[aria-pressed="true"] .coach-fab-sw { justify-content: flex-start; background: #d0592b; }
.coach-fab[aria-pressed="true"] .coach-fab-knob { transform: translateX(1.6rem); }
.coach-fab[data-state="paused"] .coach-fab-sw { background: #efe2d4; color: #8a3212; }
.coach-fab.coach-fab-note .coach-fab-sw { display: none; }
.coach-fab.coach-fab-note { padding-right: 1.2rem; }
.coach-pop { bottom: calc(var(--plbar-h, 0px) + 4.8rem); }
@media (max-width: 899px) {
  .coach-drawer { bottom: var(--plbar-h, 0px); max-height: calc(92dvh - var(--plbar-h, 0px)); }
  body.coach-open .coach-fab[data-state="idle"] { display: inline-flex; }
  body.coach-open .coach-fab { bottom: calc(var(--plbar-h, 0px) + 0.6rem); z-index: 82; }
  body.coach-open .pl-bar { z-index: 79; }
}
@media (max-width: 600px) { .coach-fab { right: 0.7rem; height: 3rem; } }

/* ================= the worksheet panel ================= */
.ws-panel { position: fixed; z-index: 70; left: 0; right: 0; top: 0; bottom: var(--plbar-h, 0px); display: flex; justify-content: center; align-items: stretch;
  padding: 1.2rem 1rem; background: rgba(38, 32, 28, 0.45); opacity: 0; transition: opacity 0.18s ease; }
.ws-panel.is-in { opacity: 1; }
.ws-panel[hidden] { display: none; }
.ws-panel-card { display: flex; flex-direction: column; width: min(72rem, 100%); background: #f7f3eb; border-radius: 18px; overflow: hidden; box-shadow: 0 30px 80px -30px rgba(20, 12, 6, 0.7); }
.ws-panel-head { flex: none; display: flex; align-items: center; gap: 0.75rem; padding: 0.7rem 0.8rem 0.7rem 1.2rem; background: #fffdf8; border-bottom: 1px solid #e3d9ca; font-family: "Inter", system-ui, sans-serif; }
.ws-panel-t { flex: 1; min-width: 0; margin: 0; font: 500 1.25rem/1.2 "Newsreader", Georgia, serif; color: #1f1b17; }
.ws-panel-t span { display: block; margin-top: 0.15rem; font: 400 0.8rem/1.3 "Inter", system-ui, sans-serif; color: #6a6158; }
.ws-panel-tab { flex: none; font-size: 0.85rem; color: #6a6158; }
.ws-panel-close { flex: none; min-height: 2.75rem; padding: 0 1.1rem; border: 0; border-radius: 999px; background: #b5441c; color: #fff; font: 600 0.95rem/1 "Inter", system-ui, sans-serif; cursor: pointer; }
.ws-panel-close:hover { background: #9c3a17; }
.ws-panel-scroll { flex: 1; min-height: 0; overflow: auto; -webkit-overflow-scrolling: touch; }
.ws-panel-frame { display: block; width: 100%; height: 100%; border: 0; background: #f7f3eb; }
html.ws-open, html.ws-open body { overflow: hidden; }
@media (min-width: 900px) { body.coach-open .ws-panel { right: min(28rem, 100vw); } }
@media (max-width: 600px) {
  .ws-panel { padding: 0; background: #f7f3eb; }
  .ws-panel-card { border-radius: 0; box-shadow: none; }
  .ws-panel-head { padding: calc(0.55rem + env(safe-area-inset-top, 0px)) 0.6rem 0.55rem 0.9rem; }
  .ws-panel-t { font-size: 1.1rem; }
  .ws-panel-t span, .ws-panel-tab { display: none; }
}
/* the worksheet page itself when it's inside the panel */
html.ws-embed .ws-toolbar .ws-back, html.ws-embed .pl-bar { display: none !important; }
html.ws-embed body { padding-bottom: 2rem !important; }

/* ================= the 21 core competencies board (How the Program Works) ================= */
.comp-board { display: grid; grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr)); grid-auto-flow: row dense; gap: 0.6rem; margin: 1.1rem 0 0.4rem; }
.comp-btn { display: flex; align-items: center; gap: 0.7rem; min-height: 3.6rem; padding: 0.65rem 0.9rem; text-align: left; border: 1px solid var(--rule-2); border-radius: var(--radius-sm);
  background: var(--card); color: var(--ink); font: 600 1.02rem/1.25 var(--sans); cursor: pointer; box-shadow: var(--shadow); transition: border-color .15s, background .15s, transform .15s; }
.comp-btn:hover { border-color: var(--accent); transform: translateY(-1px); }
.comp-btn:focus-visible { outline: 3px solid var(--accent-bright); outline-offset: 2px; }
.comp-btn[aria-expanded="true"] { background: var(--night); border-color: var(--night); color: #fbf3ea; }
.comp-n { flex: none; display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--accent-tint); color: var(--accent); font: 700 0.9rem var(--sans); }
.comp-btn[aria-expanded="true"] .comp-n { background: var(--accent-bright); color: #fff; }
.comp-detail { grid-column: 1 / -1; position: relative; padding: 1rem 1.2rem 1.1rem; border-radius: var(--radius); background: var(--accent-wash); border: 1px solid #efd9c8;
  scroll-margin-bottom: calc(var(--plbar-h, 5.5rem) + 1rem); animation: compIn .18s ease-out; }
.comp-detail[hidden] { display: none; }
@keyframes compIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.comp-detail .comp-d-h { display: flex; align-items: center; gap: .6rem; margin: 0 0 .4rem; font: 700 1.1rem var(--sans) !important; color: var(--ink); }
.comp-detail p { max-width: 52rem; margin: 0 0 .5rem; }
.comp-detail .comp-where { font: 500 1rem var(--sans) !important; color: var(--muted); margin: .2rem 0 0; }
.comp-detail .comp-where a { color: var(--accent); font-weight: 700; }
.comp-close { position: absolute; top: .7rem; right: .8rem; border: 0; background: transparent; color: var(--muted); font: 600 .9rem var(--sans); cursor: pointer; padding: .3rem .5rem; border-radius: 6px; }
.comp-close:hover { background: rgba(0,0,0,.05); }
@media (max-width: 600px) {
  .comp-board { grid-template-columns: 1fr; gap: .45rem; }
  .comp-btn { min-height: 3.1rem; font-size: 1rem; }
}

/* ================= the two hands (To Be or Not to Be) ================= */
.hands-fig { margin: 1rem 0 0.4rem; }
.hands-art { cursor: zoom-in; border-radius: var(--radius); overflow: hidden; background: #fcf8f0; box-shadow: var(--shadow); }
.hands-art img { display: block; width: 100%; height: auto; }
.hands-fig figcaption { font: 500 .92rem var(--sans); color: var(--muted); margin-top: .45rem; }
.hands-how { margin: 1.2rem 0 1rem; padding: 1rem 1.2rem; border-left: 4px solid var(--accent); background: var(--accent-wash); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.hands-how h3 { margin: 0 0 .35rem; }
.hands-how p { margin: 0; }
.hands-legend { list-style: none; margin: 0 0 .8rem; padding: 0; display: grid; gap: .5rem; }
.hands-row { display: flex; gap: .8rem; align-items: flex-start; padding: .75rem .9rem; border: 1px solid var(--rule); border-left: 5px solid var(--hc); border-radius: var(--radius-sm); background: var(--card); }
.hands-n { flex: none; display: grid; place-items: center; width: 1.9rem; height: 1.9rem; border-radius: 50%; background: var(--hc); color: #fff; font: 700 .9rem var(--sans); }
.hands-cells { flex: 1; display: grid; grid-template-columns: 6rem 1fr 1fr; gap: .2rem 1rem; align-items: start; }
.hands-cells p { margin: 0 !important; font-size: 1.02rem !important; line-height: 1.4 !important; }
.hands-cells .hands-f { font: 700 .82rem var(--sans) !important; letter-spacing: .08em; text-transform: uppercase; color: var(--hc); padding-top: .2rem; }
.hands-cells .hands-k { font: 600 .72rem var(--sans) !important; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.hands-ex { font-style: italic; color: var(--muted); }
.hands-ask strong { font-family: var(--serif); font-size: 1.1rem; }
@media (min-width: 900px) { .hands-legend { display: none; } }   /* the drawing is big enough to read on a wide screen */
@media (max-width: 600px) { .hands-cells { grid-template-columns: 1fr; } .hands-f { padding: 0; } }

/* ================= getting to the decision maker (John's moat drawing, CSS crops only) ================= */
.moat-grid { list-style: none; margin: 1.2rem 0 .8rem; padding: 0; display: grid; gap: 1.1rem; }
.moat-card { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 1.6rem; align-items: center; margin: 0; padding: 1.2rem 1.4rem;
  border: 1px solid var(--rule); border-radius: var(--radius); background: var(--card); box-shadow: var(--shadow); }
.moat-card:nth-child(even) .moat-view { order: 2; }
.moat-view { cursor: zoom-in; display: flex; justify-content: center; }
.moat-crop { position: relative; overflow: hidden; width: 100%; border-radius: var(--radius-sm); background: #fff; box-shadow: 0 0 0 1px var(--rule), 0 10px 24px -16px rgba(40,25,10,.5); }
.moat-crop img { position: absolute; max-width: none; height: auto; display: block; }
.moat-view:hover .moat-crop { box-shadow: 0 0 0 2px var(--accent), 0 10px 24px -16px rgba(40,25,10,.5); }
.training-page .moat-text .moat-n { display: inline-grid; place-items: center; width: 2rem; height: 2rem; margin: 0 0 .5rem; border-radius: 50%; background: var(--accent); color: #fff; font: 700 .9rem var(--sans); }
.training-page .moat-text h3 { margin: 0 0 .4rem; font-size: 1.32rem; }
.training-page .moat-text p { margin: 0; }
@media (max-width: 760px) {
  .moat-card { grid-template-columns: 1fr; gap: .9rem; padding: 1rem; }
  .moat-card:nth-child(even) .moat-view { order: 0; }
}

/* ================= Doggy: worksheet and coach, together ================= */
.doggy-work .btn-row { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; margin: .9rem 0 .4rem; }

/* ================= training home: numbered sections ================= */
.training-page .hub-num { display: inline-flex; align-items: center; gap: .5rem; }
.hub-n { display: inline-grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--accent); color: #fff; font: 700 .8rem var(--sans); letter-spacing: 0; }
.training-page .hub-title { font-size: 1.35rem; }
.training-page .hub-blurb { font-size: 1.08rem; line-height: 1.5; }

/* ================= Helicopter: skip ahead ================= */
.skip-ahead { margin: 0.4rem 0 1.6rem; max-width: var(--col, 62rem); }
.skip-ahead-btn { display: inline-flex; flex-wrap: wrap; gap: .25rem .4rem; align-items: baseline; padding: .55rem 1rem; border: 1px dashed var(--rule-2); border-radius: 999px;
  font: 500 .95rem/1.35 var(--sans); color: var(--ink-2); text-decoration: none; background: var(--paper); }
.skip-ahead-btn strong { color: var(--accent); }
.skip-ahead-btn:hover { border-style: solid; border-color: var(--accent); }
@media (max-width: 600px) { .skip-ahead-btn { border-radius: var(--radius-sm); } }

/* ================= Changing the Game: three dimensions, and the multi-site map ================= */
.ctg-dims { list-style: none; margin: 1.2rem 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; counter-reset: none; }
.ctg-dim { position: relative; padding: 1.2rem 1.2rem 1.1rem; border: 1px solid var(--rule); border-top: 4px solid var(--accent); border-radius: var(--radius); background: var(--card); box-shadow: var(--shadow); }
.ctg-dim:nth-child(2) { border-top-color: #c7801f; } .ctg-dim:nth-child(3) { border-top-color: #2f6f8f; }
.ctg-dim-n { position: absolute; top: .9rem; right: 1rem; font: 700 2.4rem/1 var(--serif); color: var(--rule-2); }
.training-page .ctg-dim .ctg-dim-k { margin: 0 0 .15rem; font: 700 .72rem var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.training-page .ctg-dim h3 { margin: 0 0 .45rem; font-size: 1.45rem; }
.training-page .ctg-dim p { font-size: 1.04rem; line-height: 1.5; margin: 0 0 .7rem; }
.ctg-tags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .35rem; }
.training-page .ctg-tags li { font: 600 .8rem var(--sans); padding: .25rem .6rem; border-radius: 999px; background: var(--accent-wash); color: var(--ink-2); border: 1px solid #efd9c8; }
.ctg-map { margin: 1.4rem 0 .4rem; padding: 1.3rem 1.4rem; border-radius: var(--radius); background: var(--night); color: #f6efe7; }
.training-page .ctg-map .ctg-map-k { margin: 0; font: 700 .72rem var(--sans); letter-spacing: .12em; text-transform: uppercase; color: #f0a07a; }
.training-page .ctg-map h3 { margin: .2rem 0 .4rem; color: #fff; font-size: 1.4rem; }
.training-page .ctg-map p { color: #e9dfd4; margin: 0 0 1rem; max-width: 46rem; }
.ctg-tiers { list-style: none; margin: 0; padding: 0; display: grid; gap: .9rem; position: relative; }
.ctg-tier { position: relative; display: grid; grid-template-columns: 9rem 1fr; gap: .8rem; align-items: center; }
.ctg-tier + .ctg-tier::before { content: ""; position: absolute; left: 4.5rem; top: -0.9rem; height: .9rem; border-left: 2px dashed rgba(255,255,255,.3); }
.training-page .ctg-tier .ctg-tier-h { margin: 0; font: 700 .9rem var(--sans); color: #fff; padding: .45rem .7rem; border-radius: 8px; background: rgba(255,255,255,.1); text-align: center; }
.ctg-tier ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .45rem; }
.training-page .ctg-tier ul li { font: 600 .92rem var(--sans); padding: .45rem .8rem; border-radius: 8px; background: #fbf3ea; color: var(--ink); }
@media (max-width: 860px) { .ctg-dims { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .ctg-tier { grid-template-columns: 1fr; gap: .4rem; } .ctg-tier + .ctg-tier::before { display: none; } .training-page .ctg-tier .ctg-tier-h { text-align: left; justify-self: start; } }

/* no arrow glyphs anywhere (copy rules): Back and Next say it in words */
.training-page .page-nav .page-next .next-kicker::after, .training-page .page-nav .page-back .next-kicker::before, .ws-back::before { content: none !important; }

/* Sales Wheel: the "Walk the wheel" card sits in the side column above Chapters; give it room so its line doesn't wrap word by word */
@media (min-width: 960px) {
  .training-page .wheel-layout { grid-template-columns: minmax(0, 1fr) 19rem; }
  .training-page .wheel-side .ql-hero2 { max-width: none; padding-right: 1.1rem; }
  .training-page .wheel-side .ql-hero2 .ql-body { min-width: 0; flex: 1 1 auto; }
  .training-page .wheel-side .ql-hero2 .ql-label { flex-wrap: nowrap; white-space: nowrap; }
  .training-page .wheel-side .ql-hero2 .ql-sub { font-size: 0.98rem; line-height: 1.45; }
}

/* Next above Back at every width (John's rule); Back is the quieter card */
.training-page .page-nav { grid-template-columns: 1fr !important; max-width: var(--measure); }
.training-page .page-nav .page-next, .training-page .page-nav .page-back { grid-column: 1 !important; grid-row: auto !important; order: 0 !important; }
.training-page .page-nav .page-next { text-align: left !important; }
.training-page .page-nav .page-back { background: transparent; padding-top: 0.8rem; padding-bottom: 0.85rem; }
.training-page .page-nav .page-back h2 { font-size: 1.1rem !important; }

/* 9/29 batch (John, 12:33 AM ET): Walk the wheel under the drawing; "not a podcast" note; tap-a-card note above Next/Back */
.training-page .wheel-main { min-width: 0; }
.training-page .wheel-main .ql-hero2 { max-width: none; margin-top: 0.9rem; }
.training-page .sw-active-note { border-left: 3px solid var(--accent); padding: 0.1rem 0 0.1rem 0.9rem; margin-top: 1rem; }
.training-page .nav-tap-note { color: var(--muted); max-width: var(--measure); margin: 3rem 0 0.6rem; }
.training-page .nav-tap-note + .page-nav { margin-top: 0; }

/* To Be: the two hands light up pair by pair while the full session plays */
.training-page .tobe-bard { max-width: 17rem; margin-left: auto; margin-right: auto; text-align: center; }
.training-page .tobe-bard img { width: 100%; height: auto; border-radius: 12px; }
.training-page .hands-art { position: relative; }
.training-page .hands-hl { position: absolute; pointer-events: none; opacity: 0; transition: opacity 0.35s ease; border: 3px solid var(--hc); background: color-mix(in srgb, var(--hc) 10%, transparent); border-radius: 12px; }
.training-page .hands-hl-tip { border-radius: 50%; border-width: 4px; box-shadow: 0 0 0 4px color-mix(in srgb, var(--hc) 25%, transparent); }
.training-page .hands-art[data-hl="1"] .hands-hl[data-hl="1"], .training-page .hands-art[data-hl="2"] .hands-hl[data-hl="2"], .training-page .hands-art[data-hl="3"] .hands-hl[data-hl="3"],
.training-page .hands-art[data-hl="4"] .hands-hl[data-hl="4"], .training-page .hands-art[data-hl="5"] .hands-hl[data-hl="5"] { opacity: 1; }
@media print { .training-page .hands-hl { display: none !important; } }

/* 9/29 pictures: one per spot, warm paper, centred; the capstone ends with a stop sign */
.training-page .pic-0929 { margin: 1.5rem auto; text-align: center; }
.training-page .pic-0929 img { width: 100%; height: auto; border-radius: 12px; display: block; margin: 0 auto; }
.training-page .pic-mid { max-width: 26rem; }
.training-page .pic-wheel { max-width: 34rem; }
.training-page .pic-stop { max-width: 18rem; margin-top: 2.5rem; }
.training-page .pic-stop .stop-sign { width: 9rem; height: auto; display: block; margin: 0 auto 0.6rem; }
.training-page .pic-stop figcaption { font-family: var(--serif); font-weight: 600; color: var(--ink, #2a2420); }
.training-page .pic-wheel img { border-radius: 50%; }   /* the round Wheel only, no cut-off corner text */

/* ================= Training menu in the header (round 3, item 2): hover on a computer, tap the arrow on a phone ================= */
.site-nav .nav-dd { position: relative; display: flex; align-items: center; }
.site-nav .nav-dd-link { color: var(--accent); font-weight: 600; }
.nav-dd-btn { background: none; border: 0; cursor: pointer; padding: 0.5rem 0.45rem; margin-left: -0.1rem; display: inline-flex; align-items: center; justify-content: center; min-width: 2.2rem; min-height: 2.2rem; }
.nav-dd-chev { width: 0.5rem; height: 0.5rem; border-right: 2px solid var(--accent); border-bottom: 2px solid var(--accent); transform: rotate(45deg) translate(-2px, -2px); transition: transform .15s ease; }
.nav-dd.is-open .nav-dd-chev { transform: rotate(225deg) translate(-2px, -2px); }
.nav-dd-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
.site-nav .nav-dd-list { list-style: none; margin: 0; padding: 0.4rem 0; display: none; }
.nav-dd.is-open .nav-dd-list { display: block; }
.site-nav .nav-dd-list a { display: block; font-size: 0.92rem; font-weight: 500; color: var(--text, #1a1a1a); }
@media (min-width: 641px) {
  .site-nav .nav-dd-list { position: absolute; top: 100%; left: -0.6rem; z-index: 60; min-width: 19.5rem; background: #fff; border: 1px solid var(--rule); border-radius: 12px; box-shadow: 0 14px 34px rgba(30, 20, 10, 0.16); padding: 0.5rem 0; }
  .site-nav .nav-dd::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 0.6rem; }
  .site-nav .nav-dd-list a { padding: 0.55rem 1.1rem; line-height: 1.3; }
  .site-nav .nav-dd-list a:hover, .site-nav .nav-dd-list a:focus-visible { background: #fbf1ea; color: var(--accent); }
}
@media (max-width: 640px) {
  .has-js .site-nav .nav-dd { flex-wrap: wrap; border-bottom: 1px solid var(--rule); }
  .has-js .site-nav .nav-dd-link { flex: 1 1 auto; border-bottom: 0 !important; font-size: 1.02rem; padding: 0.75rem 0; }
  .nav-dd-btn { min-width: 3rem; min-height: 3rem; }
  .has-js .site-nav .nav-dd-list { flex: 1 0 100%; padding: 0 0 0.5rem 0.9rem; }
  .has-js .site-nav .nav-dd-list a { font-size: 1.02rem; padding: 0.7rem 0; border-bottom: 1px solid var(--rule); min-height: 2.75rem; }
  .has-js .site-nav .nav-dd-list li:last-child a { border-bottom: 0; }
}

/* chapter skip controls (round 3, item 11): bigger, clearer buttons on every screen */
.training-page .pl-chaps { background: var(--accent-tint, #fbf1ea); border: 1px solid var(--rule); border-radius: 14px; padding: 0.8rem 0.9rem 0.9rem; }
.training-page .pl-chaps-skip { display: flex; gap: 0.5rem; margin: 0 0 0.6rem; }
.training-page .pl-skipbtn { font: 700 0.95rem/1 var(--sans); padding: 0.6rem 1rem; border-radius: 999px; border: 2px solid var(--accent); background: #fff; color: var(--accent); cursor: pointer; min-height: 2.6rem; }
.training-page .pl-skipbtn:hover { background: var(--accent); color: #fff; }
.training-page .pl-chaps button:not(.pl-skipbtn) { min-height: 2.4rem; cursor: pointer; background: #fff; }
@media (max-width: 640px) { .training-page .pl-chaps-skip .pl-skipbtn { flex: 1; } }

/* ================= Next and Back buttons (round 3, item 9): bright accent so they read as buttons; Next boldest, Back a step quieter ================= */
.training-page .page-nav .next-module { min-height: 5.5rem; border-radius: 16px; padding: 1.15rem 1.35rem 1.25rem; cursor: pointer; }
.training-page .page-nav .page-next { background: #b5441c; border: 2px solid #b5441c; box-shadow: 0 6px 16px rgba(181, 68, 28, 0.32); }
.training-page .page-nav .page-next:hover { background: #9c3712; border-color: #9c3712; transform: translateY(-2px); }
.training-page .page-nav .page-next .next-kicker { color: #fff; font-size: 0.85rem; font-weight: 800; letter-spacing: 0.16em; }
.training-page .page-nav .page-next h2 a { color: #fff; font-weight: 700 !important; }
.training-page .page-nav .page-next h2 { font-size: 1.4rem !important; }
.training-page .page-nav .page-next p { color: #fff; opacity: 0.95; }
.training-page .page-nav .page-back { background: #fdeadf; border: 2px solid #d0592b; box-shadow: none; }
.training-page .page-nav .page-back:hover { background: #fbdcc9; border-color: #b5441c; }
.training-page .page-nav .page-back .next-kicker { color: #8a3212; font-size: 0.78rem; font-weight: 800; }
.training-page .page-nav .page-back h2 a { color: #7a2c0e; font-weight: 600 !important; }
.training-page .page-nav .page-back p { color: #5a3a2c; }
.training-page .page-nav h2 a:focus-visible { outline: 3px solid #1a1a1a; outline-offset: 4px; }
@media (max-width: 640px) { .training-page .page-nav p { font-size: 1rem; } .training-page .page-nav .next-module { padding: 1.1rem 1.1rem 1.2rem; } }

/* ================= Welcome page (round 3, items 1 and 4) ================= */
.training-page .welcome-head { display: block; }
.training-page .welcome-fig { margin: var(--s4, 1.5rem) 0 var(--s4, 1.5rem); max-width: 64rem; }
.training-page .welcome-fig img { width: 100%; height: auto; display: block; border-radius: 12px; }
@media (min-width: 960px) {
  .training-page .post.hub .welcome-head { grid-column: full; max-width: 64rem; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); grid-template-areas: "kick fig" "title fig" "dek fig"; column-gap: 3rem; row-gap: 0.4rem; align-content: center; align-items: center; margin-bottom: 2rem; }
  .training-page .post.hub .welcome-head .post-kicker { grid-area: kick; align-self: end; }
  .training-page .post.hub .welcome-head .post-title { grid-area: title; font-size: 3rem; line-height: 1.08; margin: 0.2rem 0; }
  .training-page .post.hub .welcome-head .post-dek { grid-area: dek; align-self: start; font-size: 1.3rem; }
  .training-page .post.hub .welcome-head .welcome-fig { grid-area: fig; margin: 0; max-width: none; }
  .training-page .post.hub > .welcome-step, .training-page .post.hub > .welcome-cta { grid-column: full; max-width: 47rem; }
}
.training-page .hub-card-current > div { border: 2px solid var(--accent); background: var(--accent-tint); cursor: default; }
.training-page .hub-card-current .hub-here { color: var(--accent); font-weight: 700; }
.training-page .hub-card-current::before { content: none; }

/* ================= panels from John's journey drawing (round 3, item 20) ================= */
.training-page .pic-panel { margin: 0.4rem 0 1.4rem; max-width: 26rem; }
.training-page .pic-panel img { width: 100%; height: auto; display: block; border-radius: 12px; }

/* ================= coach call to action near the top (round 3, item 8) ================= */
.training-page .coach-cta-top { margin: 1.2rem 0 1.4rem; padding: 1rem 1.2rem 1.1rem; border-left: 5px solid var(--accent-bright); background: var(--accent-wash); border-radius: 0 14px 14px 0; max-width: 47rem; }
.training-page .coach-cta-top .cct-h { font: 700 0.78rem/1 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); margin: 0 0 0.5rem; }
.training-page .coach-cta-top p { margin: 0 0 0.6rem; font-size: 1.08rem; line-height: 1.5; }
.training-page .coach-cta-top .cct-btn { margin: 0.2rem 0 0; }

/* ================= Doggy top sentence: wider column on a computer (round 3, item 19) ================= */
@media (min-width: 960px) { .training-page .doggy-intro { max-width: 64rem; } .training-page .doggy-intro p.doggy-lede { max-width: 60rem; } }

/* ================= round 4 ================= */
.training-page .page-nav .page-seminar { border: 2px solid var(--accent-bright, var(--accent)); border-radius: 14px; padding: 1rem 1.2rem; background: var(--accent-wash); }
.training-page .page-nav .page-seminar h2 { margin: 0.2rem 0 0.4rem; }
.training-page .page-nav .page-seminar a { color: var(--accent); }
.training-page .pic-panel { max-width: 32rem; }
@media (max-width: 600px) { .training-page .pic-panel { max-width: none; } }