/*
  deck.css. Extends brand.css. Owns every visual decision for the slide;
  reveal.js (loaded with no theme) only owns navigation.

  Canvas is a fixed 1920x1080 (16:9), matching the native resolution of the
  GiANT assets so the native-resolution build check has real headroom.
*/

/* A real browser window is almost never exactly 16:9 (toolbars and tabs eat
   vertical space), so reveal letterboxes/pillarboxes around the canvas.
   Match that surrounding area to the deck's own navy so it reads as a frame,
   not a mismatched cutoff bar. */
html, body {
  background: var(--lt-navy);
}

.reveal-viewport {
  background-color: var(--lt-navy);
}

.reveal {
  font-family: var(--lt-body);
  color: var(--lt-white);
}

.reveal .slides section {
  width: 1920px;
  height: 1080px;
  padding: 0;
  text-align: left;
  box-sizing: border-box;
  overflow: hidden;
}

/*
  Named lt-slide, not slide: reveal.js adds a literal class "slide" to its
  own .reveal root element (naming its default transition style), so a
  bare .slide selector here would also match .reveal itself and silently
  apply this rule (background, flex layout, the logo pseudo-element) to
  the whole page. Collision confirmed, not hypothetical.
*/
.lt-slide {
  position: relative;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  background: var(--lt-navy);
}

.lt-slide * {
  box-sizing: border-box;
}

/* Long Table logo, lower-left, every slide except giant-asset (white
   background there, and it's meant to read as GiANT's own material,
   quoted rather than Long Table-branded). A real element (appended by
   the inline script at the bottom of every session page), not a ::after
   pseudo-element, so it can double as a link back to the table of
   contents. */
a.lt-slide__home {
  position: absolute;
  left: 48px;
  bottom: 40px;
  width: 170px;
  height: 67px;
  background: url('/assets/img/brand/long-table-logo-white.webp') left center / contain no-repeat;
  cursor: pointer;
  opacity: 1;
  transition: opacity 0.15s ease;
}

a.lt-slide__home:hover {
  opacity: 0.75;
}

.slide--giant-asset a.lt-slide__home {
  display: none;
}

/* ---------- shared primitives ---------- */

.slide__kicker {
  font-family: var(--lt-display);
  font-weight: 700;
  font-size: 28px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--lt-teal-bright);
  margin: 0 0 24px;
}

.slide__title {
  font-family: var(--lt-display);
  font-weight: 800;
  font-size: 64px;
  line-height: 1.08;
  color: var(--lt-white);
  margin: 0;
}

.slide__rule {
  width: 96px;
  height: 6px;
  background: var(--lt-red);
  border-radius: 3px;
  margin: 32px 0;
}

.slide__body {
  font-family: var(--lt-body);
  font-weight: 400;
  font-size: 32px;
  line-height: 1.5;
  color: var(--lt-tint);
  max-width: 60ch;
  /* our text: never break mid-word */
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}

/* ================================================================
   1. title-card. Opens every session
   Navy field, ridge-line image at low opacity, session number huge & light.
   ================================================================ */

.slide--title-card {
  background:
    linear-gradient(180deg, rgba(4,39,62,0.55) 0%, rgba(4,39,62,0.92) 100%),
    var(--lt-navy) url('/assets/img/altitude/ridge-line.jpg') center 38% / cover no-repeat;
  justify-content: center;
  /* Bottom padding reserves clearance for the logo/home-link, in case
     a long topic and a two-line subtitle push the centered block low
     enough to otherwise reach it (e.g. Session 3, section_subtitle
     "Know Yourself to Lead Yourself" wraps to two lines). */
  padding: 0 160px 160px;
}

.slide--title-card .title-card__kicker {
  font-family: var(--lt-display);
  font-weight: 700;
  font-size: 32px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--lt-teal-bright);
  margin: 0 0 8px;
  display: flex;
  align-items: center;
  gap: 16px;
}

.title-card__divider {
  width: 29px;
  height: 23px;
  flex: none;
  fill: currentColor;
  opacity: 0.85;
}

.slide--title-card .title-card__topic {
  font-family: var(--lt-display);
  font-weight: 800;
  font-size: 96px;
  line-height: 1.06;
  color: var(--lt-white);
  margin: 0;
  max-width: 14ch;
  letter-spacing: -0.01em;
}

.slide--title-card .slide__rule {
  margin: 40px 0 32px;
}

.slide--title-card .title-card__subtitle {
  font-family: var(--lt-display);
  font-weight: 600;
  font-size: 40px;
  color: var(--lt-tint);
  margin: 0;
  max-width: 20ch;
}

/* ================================================================
   2. topic-card. Quiet signpost, always shows title
   ================================================================ */

.slide--topic-card {
  background:
    linear-gradient(rgba(4,39,62,0.6), rgba(4,39,62,0.6)),
    var(--lt-navy) url('/assets/img/altitude/mountain-face.jpg') center 45% / cover no-repeat;
  justify-content: center;
  padding: 0 160px;
}

.slide--topic-card .slide__kicker {
  margin-bottom: 20px;
}

.slide--topic-card .slide__title {
  font-size: 88px;
  max-width: 20ch;
}

/* ================================================================
   2b. tool-review. A second, quieter divider partway through a
   session (e.g. "GiANT Leadership Tool Review" ahead of a run of
   GiANT recap slides) - deliberately close to title-card's shape so
   it still reads as a real break, but distinguished by topic-card's
   own background image, no "Altitude Groups" breadcrumb, a smaller
   title, and no rule/subtitle, so it doesn't read as a new session.
   ================================================================ */

.slide--tool-review {
  background:
    linear-gradient(180deg, rgba(4,39,62,0.55) 0%, rgba(4,39,62,0.92) 100%),
    var(--lt-navy) url('/assets/img/altitude/mountain-face.jpg') center 45% / cover no-repeat;
  justify-content: center;
  padding: 0 160px;
}

.slide--tool-review .tool-review__kicker {
  font-family: var(--lt-display);
  font-weight: 700;
  font-size: 28px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--lt-teal-bright);
  margin: 0 0 16px;
}

.slide--tool-review .tool-review__title {
  font-family: var(--lt-display);
  font-weight: 800;
  font-size: 72px;
  line-height: 1.1;
  color: var(--lt-white);
  margin: 0;
  max-width: 16ch;
  letter-spacing: -0.01em;
}

/* ================================================================
   3. celebrate. The one wrapper slide that is not full-bleed navy.
   Split layout: navy text field left (30%), photo panel right (70%).
   Panel widened from the original 60% to fit the full "EVEREST BASE
   CAMP 5364m." text and the climber's raised arms with no cropping.
   ================================================================ */

.slide--celebrate {
  flex-direction: row;
  background: var(--lt-navy);
}

.slide--celebrate .celebrate__text {
  width: 30%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 96px;
  box-sizing: border-box;
}

.slide--celebrate .celebrate__panel {
  width: 70%;
  height: 100%;
  position: relative;
  overflow: hidden;
}

.slide--celebrate .celebrate__panel img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  /* desaturate ~40%, blend with navy at ~55% via overlay below */
  filter: saturate(0.4);
  display: block;
}

.slide--celebrate .celebrate__panel::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--lt-navy);
  opacity: 0.55;
  mix-blend-mode: multiply;
}

.slide--celebrate .celebrate__headline {
  font-family: var(--lt-display);
  font-weight: 800;
  font-size: 72px;
  line-height: 1.1;
  color: var(--lt-white);
  margin: 0;
}

/* ================================================================
   4 & 5. exercise / challenge. Same construction, accent swaps
   teal <-> red. Field color carries the accent per visual-direction.md.
   Composition centered top-to-bottom, matching the source deck: big
   mark, role label, prompt, stacked rather than left-aligned with a
   corner watermark.
   ================================================================ */

.slide--exercise,
.slide--challenge {
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 220px;
}

.slide--exercise {
  background:
    linear-gradient(rgba(15,126,150,0.6), rgba(15,126,150,0.6)),
    var(--lt-teal) url('/assets/img/altitude/climber-exercise.jpg') center / cover no-repeat;
}

.slide--challenge {
  background:
    linear-gradient(rgba(232,69,79,0.6), rgba(232,69,79,0.6)),
    var(--lt-red) url('/assets/img/altitude/trekker.jpg') center / cover no-repeat;
}

.slide--exercise .wrap-mark,
.slide--challenge .wrap-mark {
  font-family: var(--lt-display);
  font-weight: 900;
  font-size: 160px;
  line-height: 1;
  color: var(--lt-white);
  margin: 0;
}

.slide--exercise .slide__kicker,
.slide--challenge .slide__kicker {
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--lt-white);
  opacity: 0.95;
  margin: 4px 0 56px;
}

.slide--exercise .slide__prompt,
.slide--challenge .slide__prompt {
  font-family: var(--lt-body);
  font-weight: 400;
  font-size: 40px;
  line-height: 1.5;
  color: var(--lt-white);
  max-width: 34ch;
  margin: 0;
  overflow-wrap: normal;
  word-break: normal;
}

.slide--exercise .slide__prompt + .slide__prompt,
.slide--challenge .slide__prompt + .slide__prompt {
  margin-top: 32px;
}

/* ================================================================
   6. questions. A pause, not a slide. Minimal, navy, large type.
   ================================================================ */

.slide--questions {
  background:
    linear-gradient(rgba(4,39,62,0.6), rgba(4,39,62,0.6)),
    var(--lt-navy) url('/assets/img/altitude/village.jpg') center / cover no-repeat;
  justify-content: center;
  align-items: center;
  text-align: center;
  position: relative;
}

.slide--questions .questions__watermark {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 900px;
  transform: translate(-50%, -50%);
  opacity: 0.08;
  pointer-events: none;
}

.slide--questions .slide__title {
  font-size: 120px;
  position: relative;
}

.slide--questions .questions__subtitle {
  font-family: var(--lt-body);
  font-weight: 400;
  font-size: 36px;
  color: var(--lt-tint);
  margin: 24px 0 0;
  position: relative;
}

/* ================================================================
   leave-behind. Closes a section (not a session) - the reflective
   slide that follows the section's final Questions slide, so it's
   genuinely the last thing shown. Distinct summit image from
   questions' village.jpg, marking it as a bigger moment.
   ================================================================ */

.slide--leave-behind {
  background:
    linear-gradient(rgba(4,39,62,0.65), rgba(4,39,62,0.65)),
    var(--lt-navy) url('/assets/img/altitude/alpenglow.jpg') center / cover no-repeat;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.slide--leave-behind .slide__kicker {
  position: relative;
}

.slide--leave-behind .slide__title {
  font-size: 90px;
  margin: 8px 0 0;
}

.slide--leave-behind .slide__rule {
  margin: 28px auto;
}

.slide--leave-behind .leave-behind__prompt {
  font-family: var(--lt-body);
  font-weight: 400;
  font-size: 34px;
  line-height: 1.4;
  color: var(--lt-tint);
  max-width: 30ch;
  margin: 0;
}

/* ================================================================
   giant-asset. A GiANT diagram reproduced unaltered, given the full
   slide. Their tools are white-background artwork with the tool's own
   title baked in, so the slide matches that white rather than framing
   it in navy, and carries no title of its own. The image gets as much
   of the 1920x1080 canvas as it can, only bounded by the asset's own
   native resolution (never upscaled past it) and a small margin.
   ================================================================ */

.slide--giant-asset {
  background: var(--lt-white);
  justify-content: center;
  align-items: center;
  padding: 48px;
}

.slide--giant-asset .giant-asset__panel {
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  flex: 1;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* A click-to-reveal label placed over the image itself (source slide
   94's Purposed/Responsive/Reactive spectrum, built one word at a
   time). Position/color per-word, measured off the source slide's own
   shape coordinates and font color. */
.giant-asset__spectrum-label {
  position: absolute;
  transform: translate(-50%, -50%);
  font-family: var(--lt-display);
  font-weight: 700;
  font-size: 37px;
  text-transform: uppercase;
  text-shadow: 0 1px 3px rgba(255, 255, 255, 0.8);
}

/* kyly/patterns-to-actions (source slide 109): the same KYLY loop as
   giant/know-yourself-to-lead-yourself, with two icons + connecting
   arrows overlaid near Patterns/Actions. Positions are the source
   shapes' own left/top/width/height (pptx inches), normalized against
   the *cropped* image (24.4in wide - the 26.667in canvas at the
   0.915 RIGHT_KEEP crop - by 15in tall), not the full slide.

   .kyg-pa-stage is a dedicated aspect-ratio box (the same proven
   pattern as .kyg-image elsewhere in this file) sized to the image's
   own exact native ratio (1757/1080), so it never letterboxes and
   every percentage below lands exactly on the image content. This
   replaced an earlier attempt that instead overrode .giant-asset__
   panel's width/height to force its own aspect-ratio - fighting the
   base rule's explicit width:100%/height:100% at equal CSS
   specificity is fragile (relies on declaration order and full,
   consistent aspect-ratio support to win out), and produced a real
   cross-browser difference: correct in this session's own Chromium
   browser tool, but the icons still overlapped the arrows for the
   user testing in their own browser even after a hard refresh ruled
   out caching. A dedicated wrapper with its own aspect-ratio and no
   competing width/height declaration has no such fight to lose. */
.kyg-pa-stage {
  position: relative;
  height: 100%;
  aspect-ratio: 1757 / 1080;
  margin: 0 auto;
}

.kyg-pa-stage img {
  width: 100%;
  height: 100%;
  display: block;
}

.kyg-pa-icon {
  position: absolute;
  transform: translate(-50%, -50%);
}

.kyg-pa-icon img {
  width: 100%;
  height: auto;
  display: block;
}

/* Actual source icons (extracted from the same slide's own embedded
   pictures, not redrawn) - kyly-icon-actions.png is square (1662x1662),
   kyly-icon-patterns.png is a tall lightbulb-with-person (1020x1602,
   ~0.637 aspect) - width set per-icon, height follows naturally from
   the image's own intrinsic ratio rather than a forced aspect-ratio. */
.kyg-pa-icon--actions {
  left: 90.6%;
  top: 32%;
  width: 10%;
}

.kyg-pa-icon--patterns {
  left: 90.6%;
  top: 73%;
  width: 8%;
}

.kyg-pa-arrow {
  position: absolute;
  color: var(--lt-teal-bright);
}

/* Root cause of the overlap the user kept seeing: an inline <svg>
   with no explicit width/height (only a viewBox) does not size itself
   to match its positioned parent span - it renders at the browser's
   own SVG default size instead, several times larger than the span's
   own box. Every earlier "fix" here shrank the *span*, which the
   actually-painted SVG content ignored entirely. Confirmed via
   getBoundingClientRect on the svg element itself (186px tall vs. the
   61px-tall span meant to contain it) and elementFromPoint hit-
   testing, which found the arrow painting well past its own span's
   bottom edge, into the icon below. */
.kyg-pa-arrow svg {
  width: 100%;
  height: 100%;
  display: block;
}

.kyg-pa-arrow--vertical {
  left: 90.6%;
  top: 44%;
  width: 3%;
  height: 15%;
  transform: translateX(-50%);
}

.kyg-pa-arrow--horizontal {
  left: 79%;
  top: 76.5%;
  width: 6%;
  height: 4%;
}

/* ================================================================
   kyly-comparison. Source slide 110: a small KYLY loop above 5
   parallel columns (Tendencies/Patterns/Actions/Consequences/
   Reality), each with its own question and two stacked answer cards -
   unhealthy (red, top) over healthy (green, bottom) in every column,
   including Tendencies/Patterns even though their text is identical
   top-to-bottom (the trigger doesn't change, only the response does)
   - the user asked directly for the row-based color rule to stay
   consistent across all five columns rather than special-casing
   those two. The icons from kyly/patterns-to-actions repeat here,
   once each, only on the unhealthy row, exactly as the source shows
   them.
   ================================================================ */

.slide--kyly-comparison {
  background: var(--lt-white);
  padding: 32px 56px 40px;
  justify-content: center;
}

.slide--kyly-comparison a.lt-slide__home {
  background-image: url('/assets/img/brand/long-table-logo-teal.png');
}

.kyly-comparison__loop {
  flex: none;
  height: 400px;
  display: block;
  margin: 0 auto 48px;
}

.kyly-comparison__columns {
  flex: none;
  min-height: 0;
  display: flex;
  gap: 20px;
}

.kyly-comparison__col {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  text-align: center;
}

.kyly-comparison__label {
  font-family: var(--lt-display);
  font-weight: 800;
  font-size: 23px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--lt-navy);
  margin: 0;
  white-space: nowrap;
}

.kyly-comparison__question {
  font-family: var(--lt-body);
  font-weight: 500;
  font-style: italic;
  font-size: 15px;
  color: var(--lt-slate);
  margin: 6px 0 16px;
  white-space: nowrap;
}

/* Fixed height, not content-sized: without it, the two boxes with an
   icon (Patterns/Actions row 1) render taller than the other three
   columns' equivalent boxes, breaking row alignment across the
   table - sized to comfortably fit the tallest case (icon + a
   two-line answer). */
.kyly-comparison__box {
  background: #F0F0F0;
  border-radius: 16px;
  box-shadow: 0 1px 3px rgba(4, 39, 62, 0.08);
  padding: 16px 16px;
  flex: none;
  height: 130px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.kyly-comparison__box + .kyly-comparison__box {
  margin-top: 6px;
}

/* Patterns/Actions wrap their box pair in this instead of leaving the
   two boxes as direct children of the column, so the icon can be
   positioned once, independent of either box, straddling the seam
   between them (per the user's mockup) rather than sitting inside
   the top box alone. Seam sits at 130px (box height) + half the 6px
   gap = 133px from the pair's own top edge. */
.kyly-comparison__box-pair {
  position: relative;
  display: flex;
  flex-direction: column;
}

.kyly-comparison__text {
  font-family: var(--lt-body);
  font-weight: 700;
  font-size: 20px;
  line-height: 1.3;
  margin: 0;
}

.kyly-comparison__text--unhealthy {
  color: var(--lt-red);
}

.kyly-comparison__text--healthy {
  color: #3DBF8A;
}

/* Actual source icons again (see kyly/patterns-to-actions) - sized by
   whichever dimension matches their own aspect best, height following
   naturally for the tall lightbulb-with-person icon, width for the
   square decision-path icon. Positioned absolutely against
   .kyly-comparison__box-pair (not inside either box), straddling the
   seam between the two stacked boxes per the user's mockup. */
.kyly-comparison__icon {
  position: absolute;
  left: 50%;
  top: 133px;
  transform: translate(-50%, -50%);
  display: block;
}

.kyly-comparison__icon--patterns {
  height: 60px;
  width: auto;
}

.kyly-comparison__icon--actions {
  width: 46px;
  height: auto;
}

/* ================================================================
   circles-matrix. One composition: the 5 Circles of Influence image
   (unaltered, same asset as giant/5-circles-of-influence) centered at
   the crossing point of a custom-built Support Challenge Matrix cross
   axis (full-width arrows, quadrant labels out in the four corners) -
   matching Linnea's own reference layout. Everything is absolutely
   positioned inside one fixed-size stage rather than a CSS grid, so
   each piece's position is exact and independent of the others.
   ================================================================ */

.slide--circles-matrix {
  background: var(--lt-white);
  padding: 40px 64px;
  align-items: center;
}

.circles-matrix__title {
  align-self: flex-start;
  font-family: var(--lt-display);
  font-weight: 500;
  font-size: 36px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--lt-navy);
  margin: 0 0 16px;
}

.circles-matrix__stage {
  position: relative;
  flex: 1;
  width: 1700px;
  max-width: 100%;
  margin: 0 auto;
}

.circles-matrix__stage svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.circles-matrix__circles {
  /* Width matched so the rings render at the same diameter as they do
     on slide 5 (giant/5-circles-of-influence, at its natural
     giant-asset-panel scale): that image renders ~522px of ring
     diameter in canvas units; 5-circles-icon.png's own circle fills
     573/581 of its crop, so 522 * (581/573) / 1700 (this stage's
     width) = ~31%. */
  /* aspect-ratio (not just width) because the inline SVG on the rings-
     build slide has no explicit width/height attribute - some browsers
     don't propagate its viewBox-derived intrinsic height up to this
     absolutely-positioned parent's own auto-height, collapsing it to
     0 and throwing off the centering transform below. */
  position: absolute;
  left: 50%;
  top: 50%;
  width: 31%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
}

.circles-matrix__circles img,
.circles-matrix__circles .cm-rings {
  width: 100%;
  height: auto;
  display: block;
}

/* Rings build (influence/circles-and-matrix-build only): plain SVG
   circles standing in for the GiANT image so each ring's fill can
   change per click, painted largest-to-smallest so only each ring's
   own band shows. White until its own fragment is revealed, then the
   matching Support/Challenge quadrant color, staying colored. Each
   label shares its ring's fragment index so the two flip together:
   black-on-white by default, white once the ring behind it colors in. */
.cm-ring {
  fill: #FFFFFF;
  stroke: #C9CDD1;
  stroke-width: 2;
  transition: fill 0.4s ease;
}

.cm-ring--self.fragment.visible       { fill: #8B1E1E; }
.cm-ring--family.fragment.visible     { fill: #8B8F94; }
.cm-ring--team.fragment.visible       { fill: #D9A426; }
.cm-ring--organization.fragment.visible { fill: #D9A426; }
.cm-ring--community.fragment.visible  { fill: #1E9E4A; }

.cm-ring-label {
  font-family: var(--lt-body);
  font-weight: 700;
  font-size: 26px;
  letter-spacing: 0.03em;
  fill: #000000;
  transition: fill 0.4s ease;
}

.cm-ring-label.fragment.visible {
  fill: #FFFFFF;
}

.cm-ring-label--self {
  font-size: 24px;
}

.cm-axis-label {
  position: absolute;
  font-family: var(--lt-display);
  font-weight: 700;
  font-size: 30px;
  color: #333F48;
  white-space: nowrap;
  text-align: center;
}

.cm-axis-label--top    { top: 4%;    left: 50%; transform: translateX(-50%); }
.cm-axis-label--bottom { bottom: 2%; left: 50%; transform: translateX(-50%); }
.cm-axis-label--left   { left: 2%;   top: 50%;  transform: translateY(-50%); }
.cm-axis-label--right  { right: 2%;  top: 50%;  transform: translateY(-50%); }

.cm-quadrant {
  position: absolute;
  width: 30%;
}

.cm-quadrant--protect  { --quadrant-color: #D9A426; left: 3%;  top: 20%; text-align: left; }
.cm-quadrant--liberate { --quadrant-color: #1E9E4A; right: 3%; top: 20%; text-align: right; }
.cm-quadrant--abdicate { --quadrant-color: #8B8F94; left: 3%;  bottom: 15%; text-align: left; }
.cm-quadrant--dominate { --quadrant-color: #8B1E1E; right: 3%; bottom: 15%; text-align: right; }

.cm-quadrant__label {
  font-family: var(--lt-display);
  font-weight: 800;
  font-size: 48px;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--quadrant-color);
  margin: 0 0 10px;
}

.cm-quadrant__desc {
  font-family: var(--lt-body);
  font-size: 24px;
  line-height: 1.35;
  color: #4A4A4A;
  margin: 0;
}

/* On the rings build only (influence/circles-and-matrix-build): every
   quadrant dims to light gray except the one matching whichever ring
   is the *current* fragment (not "revealed so far" - only the ring
   just clicked to, using reveal.js's .current-fragment rather than
   .visible, so the spotlight moves instead of accumulating). Team and
   Organization both spotlight Protect, since both share that color. */
.circles-matrix--rings-linked .cm-quadrant__label,
.circles-matrix--rings-linked .cm-quadrant__desc {
  color: #C9CDD1;
  transition: color 0.4s ease;
}

.circles-matrix--rings-linked:has(.cm-ring--self.current-fragment) .cm-quadrant--dominate .cm-quadrant__label,
.circles-matrix--rings-linked:has(.cm-ring--family.current-fragment) .cm-quadrant--abdicate .cm-quadrant__label,
.circles-matrix--rings-linked:has(.cm-ring--team.current-fragment) .cm-quadrant--protect .cm-quadrant__label,
.circles-matrix--rings-linked:has(.cm-ring--organization.current-fragment) .cm-quadrant--protect .cm-quadrant__label,
.circles-matrix--rings-linked:has(.cm-ring--community.current-fragment) .cm-quadrant--liberate .cm-quadrant__label {
  color: var(--quadrant-color);
}

.circles-matrix--rings-linked:has(.cm-ring--self.current-fragment) .cm-quadrant--dominate .cm-quadrant__desc,
.circles-matrix--rings-linked:has(.cm-ring--family.current-fragment) .cm-quadrant--abdicate .cm-quadrant__desc,
.circles-matrix--rings-linked:has(.cm-ring--team.current-fragment) .cm-quadrant--protect .cm-quadrant__desc,
.circles-matrix--rings-linked:has(.cm-ring--organization.current-fragment) .cm-quadrant--protect .cm-quadrant__desc,
.circles-matrix--rings-linked:has(.cm-ring--community.current-fragment) .cm-quadrant--liberate .cm-quadrant__desc {
  color: #4A4A4A;
}

.slide--giant-asset .giant-asset__panel img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
}

/* A row of reflection questions added below the image on slides that
   pair the tool with explainer prompts (source slide 105). Kept as a
   separate list below the art rather than positioned over it, so the
   art stays untouched and the layout stays responsive. */
.slide--giant-asset .giant-asset__questions {
  flex: 0 0 auto;
  list-style: none;
  display: flex;
  gap: 56px;
  justify-content: center;
  margin: 28px 0 0;
  padding: 0;
}

.slide--giant-asset .giant-asset__questions li {
  font-family: var(--lt-body);
  font-weight: 600;
  font-style: italic;
  font-size: 24px;
  line-height: 1.3;
  color: var(--lt-slate);
  text-align: center;
  max-width: 260px;
}

.slide--giant-asset .giant-asset__caption {
  position: absolute;
  left: 48px;
  bottom: 20px;
}

.slide--giant-asset .giant-asset__caption span {
  font-family: var(--lt-body);
  font-size: 18px;
  color: var(--lt-slate);
  opacity: 0.7;
}

/* A labeled progression added under a giant-asset image (source slide
   94's Purposed/Responsive/Reactive spectrum, overlaid on the same 5
   Circles of Influence page as slide 93/giant/5-circles-of-influence).
   Pill styling adapted from .matrix-progression for a white panel. */
.slide--giant-asset .giant-asset__progression {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin: 28px 0 0;
}

.slide--giant-asset .giant-asset__progression-step {
  font-family: var(--lt-body);
  font-weight: 700;
  font-size: 22px;
  color: var(--lt-navy);
  background: var(--lt-tint);
  border-radius: 999px;
  padding: 10px 26px;
}

.slide--giant-asset .giant-asset__progression-arrow {
  color: var(--lt-teal);
  font-size: 22px;
}

/* ================================================================
   leader-mindset-page. Same white-panel convention as giant-asset -
   the icon is GiANT's own artwork (cropped from the Leader Mindset
   toolkit page, per Linnea's direct request), paired with the
   quadrant-preview axis diagram this content leads into, reusing
   --quadrant-color from .slide--quadrant.
   ================================================================ */

.slide--leader-mindset-page {
  background: var(--lt-white);
  padding: 64px 80px;
  justify-content: flex-start;
  align-items: stretch;
}

/* This slide carries real Long Table authorship (the axis diagram),
   unlike an unaltered giant-asset page, so the logo comes back - in
   the teal mark made for light backgrounds, not the navy-slide white
   mark .lt-slide::after normally draws. */
.slide--leader-mindset-page a.lt-slide__home,
.slide--circles-matrix a.lt-slide__home {
  display: block;
  background-image: url('/assets/img/brand/long-table-logo-teal.png');
}

/* Position and size matched to the baked-in title on giant/leader-mindset
   (source slide 65's toolkit page), so the two slides read as one pair:
   measured off that PNG at its displayed scale inside the giant-asset
   panel (48px padding, object-fit: contain against a 1920x1080 canvas). */
.leader-mindset-page__title {
  font-family: var(--lt-display);
  font-weight: 500;
  font-size: 36px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--lt-navy);
  margin: 61px 0 32px 140px;
}

.leader-mindset-page__row {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 120px;
}

.leader-mindset-page__icon-col {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 380px;
}

.leader-mindset-page__icon {
  width: 300px;
  height: auto;
  margin: 0 0 28px;
}

.leader-mindset-page__quote {
  font-family: var(--lt-display);
  font-weight: 700;
  font-size: 26px;
  line-height: 1.4;
  color: var(--quadrant-color, #3DBF8A);
  text-align: center;
  margin: 0;
}

.leader-mindset-page__axes {
  flex: none;
  width: 460px;
}

/* Session 4's variant of this composite (source slide 80) swaps the
   axis diagram for its own three self-directed reflection questions -
   same numbered-badge pattern as .numbered-list, but dark-on-white to
   match this layout's giant-asset panel instead of a navy field. */
.leader-mindset-page__questions-col {
  flex: none;
  width: 760px;
}

/* Sizes matched to giant/leader-mindset's own baked-in quote and list
   text, measured off that PNG the same way as the title above. */
.leader-mindset-page__questions-col .leader-mindset-page__quote {
  text-align: left;
  font-size: 38px;
  margin: 0 0 28px;
}

.leader-mindset-page__questions {
  list-style: none;
  margin: 0;
  padding: 0;
}

.leader-mindset-page__questions li {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  margin-bottom: 26px;
  font-family: var(--lt-body);
  font-weight: 400;
  font-size: 36px;
  line-height: 1.4;
  color: var(--lt-navy);
}

.leader-mindset-page__questions .num {
  flex: none;
  width: 32px;
  height: 32px;
  /* li uses align-items: flex-start (badge stays put as text wraps to
     a second/third line) - this centers it on line 1 specifically:
     half the gap between the 36px/1.4 line box and the 32px badge. */
  margin-top: 9px;
  border-radius: 50%;
  background: var(--lt-navy);
  color: var(--lt-white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--lt-display);
  font-weight: 800;
  font-size: 15px;
}

/* ================================================================
   framework. A multi-step model being taught. Used here for the
   CORE Process explainer, with fragments (accumulate + dim).
   ================================================================ */

.slide--framework {
  background:
    linear-gradient(rgba(4,39,62,0.72), rgba(4,39,62,0.72)),
    var(--lt-navy) url('/assets/img/altitude/ridge-line.jpg') center / cover no-repeat;
  padding: 88px 160px;
  justify-content: flex-start;
}

.slide--framework .slide__title {
  font-size: 56px;
  max-width: 28ch;
}

.core-steps {
  list-style: none;
  margin: 48px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.core-steps li {
  display: flex;
  align-items: baseline;
  gap: 28px;
  padding-bottom: 28px;
  border-bottom: 1px solid rgba(214, 238, 244, 0.16);
}

.core-steps li:last-child {
  border-bottom: none;
}

.core-steps__label {
  flex: 0 0 260px;
  font-family: var(--lt-display);
  font-weight: 800;
  font-size: 34px;
  letter-spacing: 0.02em;
  color: var(--lt-white);
}

.core-steps__label em {
  font-style: normal;
  color: var(--lt-red);
}

.core-steps__q {
  font-family: var(--lt-body);
  font-weight: 400;
  font-size: 28px;
  line-height: 1.4;
  color: var(--lt-tint);
  margin: 0;
  max-width: 62ch;
}

/* current step at full strength (1), earlier steps dim to 0.5 but stay
   legible. reveal.css's own .fragment.fade-in-then-semi-out behavior.
   fade-up (also on the <li>) adds the vertical entry on top of it. */

/* ================================================================
   quote. Never shows title. A reflective pause between content -
   used for the unattributed insight lines too (attribution optional).
   ================================================================ */

.slide--quote {
  background:
    linear-gradient(rgba(4,39,62,0.68), rgba(4,39,62,0.68)),
    var(--lt-navy) url('/assets/img/altitude/valley-view.jpg') center / cover no-repeat;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 0 260px;
}

.slide--quote .quote__mark {
  font-family: var(--lt-display);
  font-weight: 800;
  font-size: 140px;
  line-height: 1;
  color: var(--lt-red);
  opacity: 0.6;
  margin: 0 0 8px;
}

.slide--quote .quote__text {
  font-family: var(--lt-display);
  font-weight: 600;
  font-size: 50px;
  line-height: 1.4;
  color: var(--lt-white);
  max-width: 26ch;
  margin: 0;
}

.slide--quote .quote__attribution {
  margin-top: 40px;
  font-family: var(--lt-body);
  font-weight: 600;
  font-size: 26px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--lt-teal-bright);
}

.quote__highlight {
  color: var(--lt-teal-bright);
}

/* ================================================================
   trivia. A click-to-reveal icebreaker question. Answer is a plain
   fade-in fragment (stays put once shown, unlike the framework
   layout's accumulate-and-dim steps).
   ================================================================ */

.slide--trivia {
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 0 220px;
}

.slide--trivia .trivia__question {
  font-family: var(--lt-display);
  font-weight: 600;
  font-size: 46px;
  line-height: 1.4;
  color: var(--lt-white);
  max-width: 28ch;
  margin: 0;
}

.slide--trivia .trivia__answer {
  margin-top: 48px;
  font-family: var(--lt-body);
  font-weight: 600;
  font-size: 28px;
  color: var(--lt-teal-bright);
}

/* ================================================================
   statement. Never shows title. One word or short phrase, full
   force - CHAOS, PEACE, PEACEMAKERS.
   ================================================================ */

.slide--statement {
  background:
    linear-gradient(rgba(4,39,62,0.55), rgba(4,39,62,0.55)),
    var(--lt-navy) url('/assets/img/altitude/sunburst.jpg') center / cover no-repeat;
  justify-content: center;
  align-items: center;
  text-align: center;
}

/* CHAOS gets its own background - a tangled long-exposure light-trail
   photo (supplied by Linnea) instead of the calm sunburst peak the other
   statement slides (PEACE, PEACEMAKERS) share, since a calm mountain
   contradicts the word. */
.slide--statement.slide--chaos {
  background:
    linear-gradient(rgba(4,39,62,0.4), rgba(4,39,62,0.4)),
    var(--lt-navy) url('/assets/img/altitude/chaos-lights.jpg') center / cover no-repeat;
}

.slide--statement .statement__word {
  font-family: var(--lt-display);
  font-weight: 900;
  font-size: 160px;
  line-height: 1;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--lt-white);
  margin: 0;
}

/* stat-trio. "Everyone you meet has an invisible number over their
   head" - a real photo, no navy mask (unlike every other non-GiANT
   slide), with three colored badges positioned over the three people's
   heads, matching the reference slide Linnea supplied. Positions are
   tuned to this specific photo, not reusable with a different image. */

.slide--stat-trio {
  background: var(--lt-navy) url('/assets/img/altitude/coworkers-peace-index.jpg') center / cover no-repeat;
}

.stat-badge {
  position: absolute;
  width: 130px;
  height: 130px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 4px solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 10px 28px rgba(4, 39, 62, 0.45);
}

.stat-badge__number {
  font-family: var(--lt-display);
  font-weight: 800;
  font-size: 38px;
  color: var(--lt-white);
}

.stat-badge--green { background: #3DBF8A; left: 565px; top: 115px; }
.stat-badge--red   { background: var(--lt-red); left: 1095px; top: 95px; }
.stat-badge--gold  { background: #D9855E; left: 1330px; top: 5px; }

/* ================================================================
   two-column. Side-by-side detail, used for the CORE deep-dive pair
   (two steps per slide with sub-questions, more room than the brief
   four-step overview gets).
   ================================================================ */

.slide--two-column {
  background:
    linear-gradient(rgba(4,39,62,0.72), rgba(4,39,62,0.72)),
    var(--lt-navy) url('/assets/img/altitude/ridge-line.jpg') center / cover no-repeat;
  padding: 88px 160px;
  justify-content: flex-start;
}

.core-detail {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 96px;
  margin-top: 64px;
  flex: 1;
}

.core-detail__step {
  flex: 1;
  min-width: 0;
}

.core-detail__list {
  list-style: none;
  margin: 32px 0 0;
  padding: 0;
}

.core-detail__list li {
  font-family: var(--lt-body);
  font-weight: 400;
  font-size: 34px;
  line-height: 1.45;
  color: var(--lt-tint);
  margin: 0 0 30px;
  padding-left: 30px;
  position: relative;
}

.core-detail__list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 17px;
  width: 12px;
  height: 3px;
  background: var(--lt-red);
}

/* ================================================================
   quadrant. One quadrant of the Support Challenge Matrix at a time,
   color-coded to match the giant-asset diagram itself.
   ================================================================ */

.slide--quadrant {
  background:
    linear-gradient(rgba(4,39,62,0.72), rgba(4,39,62,0.72)),
    var(--lt-navy) url('/assets/img/altitude/ridge-line.jpg') center / cover no-repeat;
  padding: 88px 200px;
  justify-content: center;
}

.slide--quadrant.quadrant--protect  { --quadrant-color: #D9A426; }
.slide--quadrant.quadrant--liberate { --quadrant-color: #3DBF8A; }
.slide--quadrant.quadrant--abdicate { --quadrant-color: #8FA8BA; }
.slide--quadrant.quadrant--dominate { --quadrant-color: var(--lt-red); }

.quadrant__label {
  font-family: var(--lt-display);
  font-weight: 900;
  font-size: 72px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--quadrant-color);
  margin: 0 0 20px;
}

.quadrant__lead {
  font-family: var(--lt-body);
  font-size: 28px;
  color: var(--lt-tint);
  margin: 0 0 20px;
  max-width: 60ch;
}

.quadrant__list {
  list-style: none;
  margin: 0 0 32px;
  padding: 0;
}

.quadrant__list li {
  font-family: var(--lt-body);
  font-size: 27px;
  line-height: 1.5;
  color: var(--lt-white);
  margin-bottom: 12px;
  padding-left: 28px;
  position: relative;
  max-width: 62ch;
}

.quadrant__list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 14px;
  width: 12px;
  height: 3px;
  background: var(--quadrant-color);
}

.quadrant__result {
  font-family: var(--lt-body);
  font-style: italic;
  font-size: 25px;
  line-height: 1.5;
  color: var(--lt-tint);
  border-left: 3px solid var(--quadrant-color);
  padding-left: 24px;
  max-width: 62ch;
}

/* ================================================================
   numbered-list. Red circular numbered badges on a navy field, for a
   list of reflection questions.
   ================================================================ */

.numbered-list {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 68ch;
  text-align: left;
}

.numbered-list li {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  margin-bottom: 22px;
  font-family: var(--lt-body);
  font-size: 26px;
  line-height: 1.5;
  color: var(--lt-tint);
}

.numbered-list .num {
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--lt-red);
  color: var(--lt-white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--lt-display);
  font-weight: 800;
  font-size: 17px;
}

/* ================================================================
   matrix-grid. A custom-built 2x2 Support/Challenge grid, reused when
   a session applies the matrix to a new context (not the GiANT asset
   itself - that's giant/support-challenge-matrix). Same quadrant
   colors as the .slide--quadrant layout.
   ================================================================ */

.slide--matrix {
  background:
    linear-gradient(rgba(4,39,62,0.72), rgba(4,39,62,0.72)),
    var(--lt-navy) url('/assets/img/altitude/ridge-line.jpg') center / cover no-repeat;
  padding: 80px 140px 110px;
  justify-content: flex-start;
}

.matrix-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  width: 100%;
  flex: 1;
  margin-top: 24px;
}

.matrix-grid__quadrant {
  border-radius: 12px;
  padding: 28px 32px;
  background: rgba(255, 255, 255, 0.06);
  border-left: 6px solid var(--quadrant-color);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.matrix-grid__quadrant--protect  { --quadrant-color: #D9A426; }
.matrix-grid__quadrant--liberate { --quadrant-color: #3DBF8A; }
.matrix-grid__quadrant--abdicate { --quadrant-color: #8FA8BA; }
.matrix-grid__quadrant--dominate { --quadrant-color: var(--lt-red); }

.matrix-grid__label {
  font-family: var(--lt-display);
  font-weight: 800;
  font-size: 32px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--quadrant-color);
  margin: 0 0 8px;
}

.matrix-grid__desc {
  font-family: var(--lt-body);
  font-size: 21px;
  line-height: 1.4;
  color: var(--lt-tint);
  margin: 0;
}

.matrix-progression {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 28px;
}

.matrix-progression__step {
  font-family: var(--lt-body);
  font-weight: 600;
  font-size: 20px;
  color: var(--lt-white);
  background: rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  padding: 10px 22px;
}

.matrix-progression__arrow {
  color: var(--lt-teal-bright);
  font-size: 20px;
}

/* ================================================================
   kyly-giant. Know Yourself to Lead Yourself: reuses the GiANT loop
   artwork cropped to just the loop and its own baked-in Reality/
   Actions/Consequences/Tendencies/(Patterns) labels - kyly-loop-
   labeled.png, know-yourself-to-lead-yourself.png with the toolkit
   page's own title/GiANT logo/copyright trimmed off, since those
   don't belong on a slide about one specific worked example. Our own
   content is positioned close to each matching label: absolutely
   positioned relative to the image itself (not a generic column
   layout), at that label's own measured position, growing outward
   away from the loop.
   ================================================================ */

.slide--kyly-giant {
  background: var(--lt-white);
  padding: 40px 64px;
}

.slide--kyly-giant a.lt-slide__home {
  background-image: url('/assets/img/brand/long-table-logo-teal.png');
}

.kyg-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}

.kyg-badge {
  font-family: var(--lt-display);
  font-weight: 800;
  font-size: 30px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--lt-red);
}

/* Single-line title for the unhealthy/healthy example slides - just
   the "example" word in the slide's default text color, with the
   unhealthy/healthy word itself picked out in color. */
.kyg-title {
  font-family: var(--lt-display);
  font-weight: 800;
  font-size: 30px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--lt-slate);
  margin: 0 0 8px;
}

.kyg-title__word--unhealthy {
  color: var(--lt-red);
}

/* #3DBF8A: the site's own green accent (index.html), not a formal
   brand.css token - there's no green in the brand palette otherwise. */
.kyg-title__word--healthy {
  color: #3DBF8A;
}

.kyg-stage {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* kyly-loop-labeled.png is 1206x588 (~2.05:1) - the stage sizes the
   image against that real aspect ratio and every callout below is
   positioned as a percentage of this box specifically, so it lands
   next to the label it answers regardless of how the box scales. */
.kyg-image {
  position: relative;
  width: 49%;
  aspect-ratio: 1206 / 588;
}

.kyg-image img {
  width: 100%;
  height: 100%;
  display: block;
}

.kyg-callout {
  position: absolute;
  box-sizing: border-box;
}

/* Base reality/actions/consequences: the tight label-hugging position
   used by giant/know-yourself-to-lead-yourself-questions (slide 105),
   the one kyg-callout slide that isn't the boxed worksheet/example
   style below. Tendency/patterns have no unboxed use - every slide
   that shows them is a boxed one - so they're defined once, below,
   already in the boxed layout. */
.kyg-callout--reality {
  right: calc(100% + 50px);
  top: 47%;
  transform: translateY(-50%);
  text-align: right;
  width: 260px;
}

.kyg-callout--actions {
  left: calc(100% + 50px);
  top: 47%;
  transform: translateY(-50%);
  text-align: left;
  width: 260px;
}

.kyg-callout--consequences {
  left: 50%;
  bottom: calc(100% + 40px);
  transform: translateX(-50%);
  text-align: center;
  width: 480px;
}

/* .kyg-callout--boxed: the worksheet/example callouts (source slides
   106-110) as a plain gray card next to the image, with a numbered
   red badge marking its place in the Tendency -> Patterns -> Actions
   -> Consequences -> Reality flow instead of a teal label repeating
   text the GiANT artwork already shows. Sizes/positions below are
   measured (as % of .kyg-image, the shared containing block) off the
   user's reference screenshot of the source worksheet slide, so every
   card is a fixed size on every slide, filled in or not: consequences/
   tendencies are wide bars at ~92% of the image's own width, directly
   above/below it; reality is a single tall box (42% width, 340px) to
   the left, vertically centered on the image; actions and patterns
   stack in that same-width column to the right, actions aligned with
   consequences' row and patterns with tendencies' row. The reference's
   own actions box (a short empty worksheet placeholder) wasn't tall
   enough for this deck's actual example paragraphs, so its height was
   grown from the measured ~116px to 180px - every other dimension
   here is a straight read off the reference. These override the
   unboxed reality/actions/consequences position above, and are the
   only definition for tendency/patterns. */
.kyg-callout--boxed {
  background: #EAEAEA;
  border-radius: 10px;
  padding: 18px 22px;
}

.kyg-callout--boxed.kyg-callout--reality {
  right: calc(100% + 20px);
  top: 50%;
  transform: translateY(-50%);
  text-align: left;
  width: 42%;
  height: 340px;
}

.kyg-callout--boxed.kyg-callout--actions {
  left: calc(100% + 20px);
  top: 7%;
  transform: translateY(-50%);
  text-align: left;
  width: 42%;
  height: 340px;
}

.kyg-callout--patterns {
  position: absolute;
  left: calc(100% + 20px);
  top: 93%;
  transform: translateY(-50%);
  text-align: left;
  width: 42%;
  height: 340px;
}

.kyg-callout--boxed.kyg-callout--consequences {
  bottom: calc(100% + 32px);
  text-align: left;
  width: 92%;
  height: 226px;
}

.kyg-callout--tendency {
  position: absolute;
  left: 50%;
  top: calc(100% + 32px);
  transform: translateX(-50%);
  text-align: left;
  width: 92%;
  height: 222px;
}

.kyg-callout__num {
  position: absolute;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--lt-red);
  color: var(--lt-white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--lt-display);
  font-weight: 800;
  font-size: 17px;
}

.kyg-callout--reality .kyg-callout__num {
  right: -24px;
  top: 50%;
  transform: translateY(-50%);
}

.kyg-callout--actions .kyg-callout__num,
.kyg-callout--patterns .kyg-callout__num {
  left: -24px;
  top: 50%;
  transform: translateY(-50%);
}

.kyg-callout--consequences .kyg-callout__num {
  bottom: -24px;
  left: 50%;
  transform: translateX(-50%);
}

.kyg-callout--tendency .kyg-callout__num {
  top: -24px;
  left: 50%;
  transform: translateX(-50%);
}

.kyg-callout__text {
  font-family: var(--lt-body);
  font-size: 19px;
  line-height: 1.32;
  color: #333F48;
  margin: 0;
}

.kyg-callout--boxed .kyg-callout__text {
  font-weight: 600;
  color: #1A1A1A;
}

/* The example slides (7-10) keep the worksheet's own question on
   every card, then answer it here in italic so it's obvious at a
   glance which line is the prompt and which is the worked example -
   matching how the source slides distinguish the two. Color is
   overridden per example below (red for unhealthy, green for
   healthy, matching the kyg-title/kyly-comparison convention
   elsewhere); this base value only still applies anywhere else that
   reuses .kyg-callout__answer without one of those modifiers. */
.kyg-callout__answer {
  font-family: var(--lt-body);
  font-style: italic;
  font-weight: 600;
  font-size: 23px;
  line-height: 1.3;
  color: #1A6FE0;
  margin: 8px 0 0;
}

.slide--kyly-giant--unhealthy .kyg-callout__answer {
  color: var(--lt-red);
}

.slide--kyly-giant--healthy .kyg-callout__answer {
  color: #3DBF8A;
}

/* Source slide 105's reflection questions: a single bold blue
   parenthetical next to Reality/Actions/Consequences, no separate
   category label (there's nothing to label - it's the whole callout). */
.kyg-callout__question {
  font-family: var(--lt-body);
  font-weight: 700;
  font-size: 20px;
  line-height: 1.3;
  color: #1A6FE0;
  margin: 0;
  white-space: nowrap;
}