/* The CPD landing (home/cpd_landing.html).
 *
 * Built on scroll_landing.css -- its tokens (--ld-*), buttons, section and
 * FAQ styles -- and adds only what this page does differently: a two-column
 * hero whose right half is the try-it exercise, and the course cards.
 */

/* The hero takes the page's tokens too: scroll_landing defines them on
   .reel/.after only. */
.cpd-hero {
  --ld-ground: var(--oa-surface);
  --ld-ink-strong: var(--oa-ink);
  --ld-ink: var(--oa-ink-soft);
  --ld-muted: var(--oa-muted);
  --ld-faint: var(--oa-faint);
  --ld-line: var(--oa-line);
  --ld-border: var(--oa-line);
  --ld-card: var(--oa-surface);
  background: var(--ld-ground);
  color: var(--ld-ink);
}

.page-dark .cpd-hero {
  --ld-ground: var(--oa-stage);
  --ld-ink-strong: #f3f5f9;
  --ld-ink: #e8ecf3;
  --ld-muted: #9aa4b5;
  --ld-faint: #7b8698;
  --ld-line: #222836;
  --ld-border: #2b3240;
  --ld-card: #161a23;
}

/* One measure for every section, so the hero, the courses and the FAQ share
   a left edge instead of each finding its own. */
.cpd-wrap {
  max-width: 1120px;
  margin-inline: auto;
}

.cpd .after { padding-inline: clamp(20px, 5vw, 64px); }

/* --- 1. hero ------------------------------------------------------------- */

.cpd-hero {
  padding: clamp(28px, 6vh, 72px) clamp(20px, 5vw, 64px) clamp(36px, 7vh, 80px);
}

.cpd-hero__grid {
  display: grid;
  gap: clamp(28px, 5vw, 72px);
  align-items: center;
}

.cpd-hero__title {
  margin: 0;
  font-size: clamp(32px, 4vw, 50px);
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--ld-ink-strong);
  text-wrap: balance;
}

.cpd-hero__lede {
  max-width: 52ch;
  margin: var(--oa-space-4) 0 0;
  font-size: clamp(16px, 1.5vw, 18px);
  line-height: 1.6;
  color: var(--ld-muted);
}

.cpd-hero__actions { margin-top: var(--oa-space-5); }

.cpd-hero__visual .feedback-example {
  max-width: 440px;
  margin-inline: auto;
}

/* On desktop the pitch stays in view while the exercise beside it is worked
   through: the card grows by its result and the enrol form, and without this
   the headline and button scrolled away just as the visitor got there. */
@media (min-width: 900px) {
  .cpd-hero__grid {
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    align-items: start;
  }

  .cpd-hero__copy {
    position: sticky;
    top: 110px;
    padding-top: clamp(0px, 4vh, 48px);
  }

  .cpd-hero__visual .feedback-example { margin-inline: auto 0; }
}

/* A scroll container on <body> would make sticky stick to it, not the
   viewport; clip trims the same overflow without creating one. */
body:has(.cpd) { overflow-x: clip; }

/* --- 2. the courses ------------------------------------------------------ */

.cpd-courses__grid {
  display: grid;
  gap: var(--oa-space-5);
  align-items: start;
}

@media (min-width: 860px) {
  .cpd-courses__grid { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
}

.cpd-course {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: clamp(20px, 3vw, 32px);
  border: 1px solid var(--ld-border-strong, var(--ld-border));
  border-radius: var(--oa-radius-lg);
  background: var(--ld-card);
}

.cpd-course__title {
  margin: 0;
  font-size: clamp(22px, 2.4vw, 28px);
  letter-spacing: -0.02em;
  color: var(--ld-ink-strong);
}

.cpd-course__subtitle {
  margin: var(--oa-space-2) 0 0;
  font-size: 16px;
  color: var(--ld-ink);
}

.cpd-course__summary {
  margin: var(--oa-space-3) 0 0;
  max-width: 56ch;
  font-size: 15px;
  line-height: 1.6;
  color: var(--ld-muted);
}

.cpd-course__facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--oa-space-2);
  margin: var(--oa-space-4) 0 0;
  padding: 0;
  list-style: none;
}

.cpd-course__facts li {
  padding: 4px 12px;
  border: 1px solid var(--ld-border);
  border-radius: var(--oa-radius-pill);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ld-ink);
  font-variant-numeric: tabular-nums;
}

.cpd-course__cta { margin-top: var(--oa-space-5); }

.cpd-coming {
  padding: clamp(20px, 3vw, 28px);
  border: 1px dashed var(--ld-border);
  border-radius: var(--oa-radius-lg);
}

.cpd-coming__label {
  margin: 0 0 var(--oa-space-3);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ld-faint);
}

.cpd-coming__list {
  display: grid;
  gap: var(--oa-space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.cpd-coming__list li { display: flex; flex-direction: column; gap: 2px; }
.cpd-coming__list strong { font-size: 15px; font-weight: 600; color: var(--ld-ink); }
.cpd-coming__list span { font-size: 13.5px; color: var(--ld-muted); }

/* --- 4. trust ------------------------------------------------------------ */

.cpd-trust__grid {
  display: grid;
  gap: var(--oa-space-4);
}

@media (min-width: 600px) {
  .cpd-trust__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1000px) {
  .cpd-trust__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.cpd-trust .beat__actions { margin-top: var(--oa-space-6); }

/* --- the hero exercise (try_landmark.js) --------------------------------- */

/* The join form and its button read tokens scoped to the academy pages;
   give the exercise the same ones. */
.try {
  --oa-accent-fill: #6c63ff;
  --oa-accent-fill-hover: #574fd6;
  max-width: 460px;
  margin: 0 auto;
  padding: var(--oa-space-4);
  border: 1px solid var(--ld-border);
  border-radius: var(--oa-radius-lg);
  background: var(--ld-card, var(--oa-surface));
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.28);
}

.page-dark .try {
  --oa-surface: #10141c;
  --oa-ink: #f3f5f9;
  --oa-ink-soft: #e8ecf3;
  --oa-muted: #9aa4b5;
  --oa-faint: #7b8698;
  --oa-line: #2b3240;
}

@media (min-width: 900px) {
  .try { margin-inline: auto 0; }
}

/* A fixed height while tracing: the hint changes length from point to point,
   and a caption that grew or shrank moved the image under the visitor's
   finger between taps. */
.try__caption {
  display: flex;
  flex-direction: column;
  gap: 4px;
  height: 104px;
  overflow: hidden;
  margin-bottom: var(--oa-space-3);
}

.try__prompt { font-size: 17px; color: var(--ld-ink-strong); }
.try__hint { font-size: 13.5px; line-height: 1.5; color: var(--ld-muted); }
.try.is-done .try__caption { height: auto; }

.try__stage { position: relative; }

.try__svg {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--oa-radius-md);
  background: #000;
  cursor: crosshair;
  touch-action: manipulation;
}

.try.is-done .try__svg { cursor: default; }

/* A placed point can be dragged until the tracing is checked. The grab circle
   is invisible but takes the press. touch-action here is for the browsers that
   honour it on SVG; try_landmark.js refuses the pan itself for the rest. */
.try__grab {
  fill: transparent;
  stroke: none;
  cursor: grab;
  touch-action: none;
}

.try.is-dragging .try__svg,
.try.is-dragging .try__grab { cursor: grabbing; }

.try.is-done .try__grab { cursor: default; pointer-events: none; }

.try__check { margin-top: var(--oa-space-4); }
/* .app-button sets display, which would otherwise override [hidden]. */
.try__check[hidden] { display: none; }

/* --- the cue: a hand tapping empty film, until the first touch ---------- */

.try__badge {
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 5px 11px;
  border-radius: var(--oa-radius-pill);
  background: #6c63ff;
  color: #fff;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  pointer-events: none;
  box-shadow: 0 6px 18px rgba(108, 99, 255, 0.45);
}

/* Positioned over the dark space in front of the face -- empty film, never a
   landmark, so the cue shows how to answer without answering. */
.try__tap {
  position: absolute;
  left: 62%;
  top: 58%;
  width: 44px;
  height: 44px;
  pointer-events: none;
  animation: try-hand 2.6s ease-in-out infinite;
}

.try__tap-hand {
  position: absolute;
  left: 14px;
  top: 16px;
  width: 38px;
  height: 38px;
  color: #fff;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.8));
}

.try__tap-ripple {
  position: absolute;
  left: 0;
  top: 0;
  width: 30px;
  height: 30px;
  border: 3px solid #b6b1ff;
  border-radius: 50%;
  opacity: 0;
  animation: try-ripple 2.6s ease-out infinite;
}

/* Drift in, press, hold, lift: the rhythm of a tap, then a pause so it does
   not nag. */
@keyframes try-hand {
  0%   { transform: translate(40px, 36px); opacity: 0; }
  18%  { transform: translate(0, 0); opacity: 1; }
  30%  { transform: translate(0, 0) scale(0.86); }
  40%  { transform: translate(0, 0) scale(1); }
  75%  { transform: translate(0, 0); opacity: 1; }
  100% { transform: translate(0, 0); opacity: 0; }
}

@keyframes try-ripple {
  0%, 28% { transform: scale(0.4); opacity: 0; }
  32%     { transform: scale(0.5); opacity: 0.95; }
  70%     { transform: scale(2.2); opacity: 0; }
  100%    { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .try__tap,
  .try__tap-ripple { animation: none; }
  .try__tap-ripple { opacity: 0.8; transform: scale(1); }
}

/* --- the placements and the reveal ------------------------------------- */

/* Magenta is what a measurement looks like in this product -- the app paints
   a hovered measure #ff00ff, and the reel draws its planes and landmarks in
   it (--oa-measure-hot, scroll_landing.css). The visitor's tracing is a
   measurement, so it is drawn the same way; the reference stays green. */
.try__placed {
  r: 11;
  fill: rgba(8, 10, 14, 0.72);
  stroke: #fff;
  stroke-width: 4;
  filter:
    drop-shadow(0 0 7px rgba(255, 0, 255, 0.9))
    drop-shadow(0 0 16px rgba(255, 0, 255, 0.45));
}

/* The reel's landing ring: one pulse outward as the point goes down. */
.try__halo {
  fill: none;
  stroke: var(--oa-measure-hot, #ff00ff);
  stroke-width: 4;
  opacity: 0;
  animation: lm-land 1.1s ease-out both;
}

.try__label {
  font: 700 40px system-ui, sans-serif;
  fill: #fff;
  stroke: rgba(6, 8, 12, 0.92);
  stroke-width: 8;
  stroke-linejoin: round;
  paint-order: stroke;
}

.try__line,
.try__arc {
  fill: none;
  stroke: var(--oa-measure-hot, #ff00ff);
  stroke-width: 6;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 10px var(--oa-measure-hot-soft, rgba(255, 0, 255, 0.22)));
}

.try__arc { stroke-width: 5; }

.try__angle {
  font: 700 44px system-ui, sans-serif;
  fill: var(--oa-measure-hot, #ff00ff);
  stroke: rgba(6, 8, 12, 0.92);
  stroke-width: 9;
  stroke-linejoin: round;
  paint-order: stroke;
}

.try__ref-line {
  fill: none;
  stroke: #5ec98f;
  stroke-width: 4;
  stroke-dasharray: 14 10;
  opacity: 0.9;
}

.try__link {
  stroke: #fff;
  stroke-width: 3;
  stroke-dasharray: 8 6;
}

.try__reference {
  r: 16;
  fill: none;
  stroke: #5ec98f;
  stroke-width: 5;
}

/* The measurement on the film, styled as the reel's readout. Top left, where
   the tap badge was: that corner is skull vault. Bottom right, it sat on A. */
.try__readout {
  position: absolute;
  left: 10px;
  top: 10px;
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 0;
  padding: 7px 12px;
  border: 1px solid rgba(255, 0, 255, 0.45);
  border-radius: var(--oa-radius-sm);
  background: rgba(10, 13, 18, 0.82);
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.45);
}

.try__readout[hidden] { display: none; }

.try__readout span {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: #9aa4b5;
}

.try__readout b {
  font-size: 20px;
  color: var(--oa-measure-hot, #ff00ff);
  font-variant-numeric: tabular-nums;
}

.try__steps {
  display: flex;
  gap: 6px;
  margin: var(--oa-space-3) 0 0;
  padding: 0;
  list-style: none;
}

.try__steps li {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1px solid var(--ld-border);
  border-radius: 50%;
  font-size: 13px;
  font-weight: 700;
  color: var(--ld-muted);
}

.try__steps li.is-next { border-color: #ff00ff; color: var(--ld-ink-strong); }
.try__steps li.is-done { border-color: #ff00ff; background: rgba(255, 0, 255, 0.18); color: #fff; }
.try.is-done .try__steps { display: none; }

.try__result { margin-top: var(--oa-space-2); }

.try__sna {
  display: flex;
  gap: var(--oa-space-5);
  margin: 0;
}

.try__sna div { display: flex; flex-direction: column; }
.try__sna dt { font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ld-faint); }
.try__sna dd { margin: 0; font-size: 26px; font-weight: 700; color: var(--ld-ink-strong); font-variant-numeric: tabular-nums; }
.try__sna div:first-child dd { color: #ff00ff; }

.try__norm {
  margin: 4px 0 0;
  font-size: 13px;
  color: var(--ld-faint);
}

.try__errors {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: var(--oa-space-3) 0 0;
  padding: 0;
  list-style: none;
}

.try__errors li {
  padding: 3px 10px;
  border-radius: var(--oa-radius-pill);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

.try__errors li b { margin-right: 2px; }
.try__errors .is-within { background: rgba(94, 201, 143, 0.14); color: #5ec98f; }
.try__errors .is-outside { background: rgba(224, 164, 74, 0.14); color: #e0a44a; }

.try__note {
  margin: var(--oa-space-3) 0 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--ld-muted);
}

.try__more {
  margin-top: var(--oa-space-4);
  padding-top: var(--oa-space-4);
  border-top: 1px solid var(--ld-line);
}

.try__more-title {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  color: var(--ld-ink-strong);
}

.try__more .join { margin-top: var(--oa-space-3); }
.try__more .join__title { font-size: 14px; font-weight: 500; color: var(--ld-muted); }

.try__again {
  min-height: 44px;
  margin-top: var(--oa-space-2);
  padding: 0 4px;
  border: 0;
  background: none;
  color: var(--ld-muted);
  font: inherit;
  font-size: 14px;
  text-decoration: underline;
  cursor: pointer;
}

.try__again:focus-visible {
  outline: 2px solid var(--oa-accent);
  outline-offset: 2px;
}

/* Under the switcher the hero needs no top margin of its own: the switcher
   already separates it from the header, and the two gaps stacked read as a
   hole between them. */
.audience-chooser + .cpd-hero {
  padding-top: clamp(12px, 2.5vh, 28px);
}