@font-face {
  font-family: 'Satoshi';
  src: url('../Assets/fonts/Satoshi/Satoshi-Variable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
}

:root {
  /* --float-bg: #F3F7EC;   previous: pale green (full previous file saved as slackbot-before-aubergine.css) */
  --float-bg: #4A154B;          /* Slack aubergine */

  /* colour system – same logic as decorate / adfin: one bg, one text colour, one accent, a caption shade.
     These override the shared text colours for this page only. */
  --text-main: #FFF9EE;                                            /* cream body text – 13.4:1 */
  --text-mid: color-mix(in srgb, var(--text-main) 70%, var(--float-bg));
  --text-dim: color-mix(in srgb, var(--text-main) 50%, var(--float-bg));
  --slack-ink: #2EB67D;         /* accent: Slack green – headings, labels, underlines, buttons – 5.4:1 */
  --slack-sub: #ECB22E;         /* sub-subheadings: Slack yellow – 7.3:1 */
  --slack-caption: #A954AB;     /* captions: the aubergine's own hue, lifted (like float / adfin) – 3:1 */
  --slack-on-ink: #101010;      /* dark text on light surfaces: green buttons, tooltip, white tab, yellow label */
  --slack-tint: color-mix(in srgb, var(--float-bg) 85%, white);   /* panel behind the screens */
  --slack-line: 0.125rem;       /* sidebar / tools accent lines */
  --slack-qr-size: 11.25rem;
}

body {
  background: var(--float-bg);
}

header {
  background: var(--float-bg);
}

.app-screens-row {
  display: flex;
  gap: var(--space-xl);
  padding-inline: 6%;
  padding-block: calc(var(--space-xl) * 3);
  justify-content: space-between;
}

.app-screens-row .screen-wrap {
  inline-size: auto;
  flex: 1;
  max-inline-size: 18%;
}

.screen-wrap {
  position: relative;
  inline-size: 20%;
  flex-shrink: 0;
}

.screen-wrap video {
  inline-size: 100%;
  display: block;
  border-radius: var(--radius);
}

.screen-mask {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  inline-size: 35%;
  block-size: 5%;
  background: var(--slack-tint);
  border-radius: var(--radius) 0 0 0;
}

.case-layout {
  display: grid;
  grid-template-columns: 1fr minmax(0, 75rem) 1fr;
  align-items: start;
}

.case-sidebar {
  position: fixed;
  inset-block-end: calc(var(--space-lg) + var(--space-xs));
  inset-inline-start: var(--space-lg);
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.025rem;
}

.sidebar-box {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding-block: var(--space-sm);
  padding-inline-start: var(--space-lg);
  padding-inline-end: var(--space-md);
  background: var(--float-bg);
  max-inline-size: 12rem;
  position: relative;
  overflow: hidden;
  max-block-size: 0;
  padding-block: 0;
  opacity: 0;
  transition: max-block-size 0.35s ease, opacity 0.3s ease, padding-block 0.3s ease;
}

.sidebar-box::before {
  content: '';
  position: absolute;
  inset-inline-start: var(--space-sm);
  inset-block-start: var(--space-sm);
  inset-block-end: var(--space-sm);
  inline-size: var(--slack-line);
  background: var(--slack-ink);
  pointer-events: none;
}

.case-sidebar.open .sidebar-box {
  max-block-size: 20rem;
  padding-block: var(--space-sm);
  opacity: 1;
}


.sidebar-tab {
  position: fixed;
  inset-block-start: 50%;
  inset-inline-start: 0;
  transform: translateY(-50%);
  inline-size: 2rem;
  block-size: 8rem;
  background: #fff;
  border: none;
  cursor: pointer;
  font-family: var(--font);
  font-size: var(--text-sm);
  color: var(--slack-on-ink);   /* on the white tab */
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 6;
}

.sidebar-tab span {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  letter-spacing: 0.05em;
}

.sidebar-close {
  position: absolute;
  inset-block-start: var(--space-sm);
  inset-inline-end: var(--space-sm);
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.2rem;
  color: var(--text-main);
  line-height: 1;
}

.sidebar-divider {
  block-size: 0.0625rem;
  background: var(--border);
}

.sidebar-item {
  display: grid;
  grid-template-columns: 2.5rem 1fr;
  gap: var(--space-xs);
}

.sidebar-label {
  font-size: var(--text-sm);
  color: var(--slack-ink);
  line-height: 1.2;
}


.sidebar-value {
  font-size: var(--text-sm);
  color: var(--text-main);
  line-height: 1.2;
}

.sidebar-close {
  position: absolute;
  inset-block-start: var(--space-xs);
  inset-inline-end: var(--space-xs);
  background: none;
  border: none;
  font-family: var(--font);
  font-size: 1rem;
  color: var(--text-main);
  cursor: pointer;
  line-height: 1;
  padding: 0;
}

.case-study {
  grid-column: 2;
  padding-inline: var(--space-xl);
}

.cs-section {
  padding-block: var(--space-xl);
  padding-inline: 8%;
}

#visualizing {
  padding-block-end: 0;
}


.video-lighten-wrap {
  position: relative;
}

.video-lighten-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.25);
  border-radius: var(--radius);
  pointer-events: none;
}

.solution-bento {
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-template-rows: auto auto;
  gap: var(--space-md);
  margin-block: calc(var(--space-xl) * 2);
}

.solution-bento__video-wrap {
  grid-column: 1;
  grid-row: 1;
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
}

.solution-bento__video-wrap video {
  inline-size: 100%;
  display: block;
}


.solution-bento__priority {
  grid-column: 2;
  grid-row: 1 / 3;
  border-radius: var(--radius);
  overflow: hidden;
  position: relative;
}

.solution-bento__priority video {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  transform: scale(1.1) translateY(5%);
}

.solution-bento__bottom {
  grid-column: 1;
  grid-row: 2;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
  align-items: stretch;
}

.filler-1 { object-position: center 48%; }
.filler-3 { object-position: center 4%; }

.bento-filler-video {
  inline-size: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--radius);
  display: block;
}

.solution-bento__bottom img,
.solution-bento__bottom video {
  inline-size: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--radius);
  display: block;
}

.solution-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
  gap: var(--space-md);
  margin-block-start: var(--space-xl);
}

.solution-grid__top-left { grid-column: 1; grid-row: 1; }
.solution-grid__bottom-left { grid-column: 1; grid-row: 2; }
.solution-grid__right {
  grid-column: 2;
  grid-row: 1 / 3;
  overflow: hidden;
  border-radius: var(--radius);
}

.solution-grid__right-img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  transform: scale(1.08);
  display: block;
}

.two-col-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
  margin-block-start: var(--space-md);
}

.two-col-grid img {
  inline-size: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--radius);
}

.cs-video-wide {
  aspect-ratio: unset;
  block-size: 18rem;
  object-position: center bottom;
  margin-block-start: calc(var(--space-xl) * 2);
  margin-block-end: calc(var(--space-xl) * 2);
}

#calendar {
  padding-block: 0;
}

/* #design {   was #branding – took the top padding away when it followed solution; now it follows research, so it gets the normal section padding like the others
  padding-block-start: 0;
} */

.cs-subheading {
  font-size: clamp(1.75rem, 3.5vw, 3.5rem);
  font-weight: 500;
  /* font-family: var(--font); */
  font-family: 'Instrument Sans', sans-serif;
  letter-spacing: -0.05em;
  color: var(--slack-ink);   /* big headings keep their original colour */
  margin-block-end: var(--space-lg);
}

.cs-subsubheading {
  font-size: 1.03rem;
  font-weight: 500;
  font-family: 'Instrument Sans', sans-serif;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--slack-sub);
  margin-block-end: var(--space-xl);
}

.cs-body {
  font-size: 1.03rem;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: -0.01em;
  margin-block-end: var(--space-xl);
}

.cs-media-text-row .cs-body:last-child { margin-block-end: 0; }

.cs-body strong {
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: var(--slack-ink);
  text-underline-offset: 0.3em;
}

.cs-media-row {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: var(--space-md);
  align-items: start;
}

.cs-video {
  inline-size: 100%;
  display: block;
  border-radius: var(--radius);
}

.cs-media-center {
  display: flex;
  justify-content: center;
  overflow: hidden;
  max-block-size: 50vh;
  margin-block-start: var(--space-xl);
  margin-block-end: 4rem;
}

.cs-media-center + .cs-media-text-row {
  margin-block-start: 0;
}

.cs-media-center .cs-video {
  inline-size: 100%;
  object-fit: cover;
}

.cs-media-text-row {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: calc(var(--space-xl) * 2);
  align-items: start;
  margin-block-start: calc(var(--space-xl) * 2);
  margin-block-end: calc(var(--space-xl) * 2);
}

.cs-media-text-row--wide-media {
  grid-template-columns: 2fr 1fr;
}

#solution .cs-media-text-row--wide-media {
  margin-inline: -8%;
  padding-inline: 8%;
}

.cs-video-cropped {
  object-fit: cover;
  object-position: center 60%;
  aspect-ratio: 16 / 9;
  border-radius: 1.5rem;
}

.cs-list {
  font-size: 1rem;
  line-height: 1.4;
  padding-inline-start: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.highlight-blue {
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: var(--slack-ink);
  text-underline-offset: 0.2em;
}

.highlight-red {
  font-weight: 600;
}

.proto-wrap {
  margin-block: calc(var(--space-xl) * 2);
}

.proto-wrap .design-proto-row {
  margin-block: 0 var(--space-sm);
}

.design-proto-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--space-md);
  margin-block: calc(var(--space-xl) * 2);
}

.design-proto-row img {
  inline-size: 100%;
  display: block;
  border-radius: var(--radius);
}

.design-col-media {
  inline-size: 100%;
  display: block;
  border-radius: var(--radius);
}

.design-video-text-row {
  display: flex;
  align-items: flex-start;
  gap: calc(var(--space-xl) * 2);
  margin-block-start: calc(var(--space-xl) * 2);
}

.design-screen {
  inline-size: 25%;
  flex-shrink: 0;
  display: block;
  border-radius: var(--radius);
}

.branding-three-col {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--space-md);
  align-items: start;
  margin-block: calc(var(--space-xl) * 2);
}

.branding-col {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.tooltip-wrap {
  position: relative;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-decoration-color: var(--text-dim);
  text-underline-offset: 0.2em;
  cursor: help;
}

.tooltip {
  display: none;
  position: absolute;
  inset-block-end: calc(100% + 0.5rem);
  inset-inline-start: 0;
  background: var(--slack-ink);
  color: var(--slack-on-ink);
  font-size: 1.03rem;
  font-weight: 500;
  line-height: 1.5;
  padding-block: var(--space-sm);
  padding-inline: var(--space-md);
  border-radius: var(--radius);
  inline-size: 18rem;
  z-index: 10;
}

.tooltip-wrap:hover .tooltip {
  display: block;
}

.floating-bubble {
  display: block;
  inline-size: 20rem;
  margin-block: calc(var(--space-xl) * 1.5);
  animation: float 3s ease-in-out infinite;
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-0.5rem); }
}


.screen-fill-row {
  display: flex;
  align-items: flex-start;
  gap: calc(var(--space-xl) * 2);
}

.screen-fill-row p {
  flex: 1;
  margin-block-end: 0;
}

.typography-video {
  margin-block-start: calc(var(--space-xl) * 2);
}

.cs-body--after-media {
  margin-block-start: calc(var(--space-xl) * 2);
}


.cs-caption {
  font-size: var(--text-sm);
  color: var(--slack-caption);
  line-height: 1.4;
  margin-block-start: var(--space-lg);
  margin-block-end: 0;
  max-inline-size: 85%;
}

.cs-video--landscape-wrap {
  inline-size: 20%;
  overflow: hidden;
  border-radius: var(--radius);
  margin-block-start: calc(var(--space-xl) * 2);
}

.cs-video--landscape {
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center;
  display: block;
  inline-size: 100%;
  transform: scale(1.8);
  transform-origin: center;
}

.float-download {
  margin-block-start: calc(var(--space-xl) * 2);
}

.float-download-steps {
  display: flex;
  gap: var(--space-md);
  margin-block-start: var(--space-lg);
  overflow-x: auto;
}

.float-download-qr {
  display: flex;
  gap: calc(var(--space-xl) * 2);
  align-items: flex-start;
  margin-block-start: var(--space-lg);
}

.float-qr-code {
  inline-size: var(--slack-qr-size);
  block-size: var(--slack-qr-size);
  object-fit: cover;
  flex-shrink: 0;
  display: block;
  border-radius: var(--radius);
}

.float-qr-text {
  flex: 1;
}

.float-qr-step {
  color: var(--slack-ink);
  margin-block-end: var(--space-sm);
}


.float-showcase {
  margin-block-start: calc(var(--space-xl) * 2);
}

.float-aiga-grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.float-aiga-full {
  inline-size: 100%;
  display: block;
  border-radius: var(--radius);
  object-fit: cover;
}

.float-aiga-full.float-aiga-img {
  aspect-ratio: 16/9;
  object-position: center 85%;
}


.float-aiga-img {
  display: block;
  border-radius: var(--radius);
  object-fit: cover;
}

.float-aiga-row {
  display: grid;
  gap: var(--space-md);
}

/* Row 1: #32 left (2/3) + #31 right (1/3) */
.float-aiga-row--32-31 {
  display: flex;
  gap: var(--space-md);
  block-size: 28vw;
}

/* Row 2: #33 left (smaller) + #34 right (more space) */
.float-aiga-row--33-34 {
  display: flex;
  gap: var(--space-md);
  block-size: 28vw;
}

.float-aiga-32 {
  flex: 2;
  min-inline-size: 0;
  block-size: 100%;
  object-fit: cover;
  object-position: center 70%;
}

.float-aiga-31-wrap {
  flex: 1;
  min-inline-size: 0;
  block-size: 100%;
  overflow: hidden;
  border-radius: var(--radius);
}

.float-aiga-31 {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  object-position: center;
  transform: scale(1.7);
  transform-origin: center 75%;
  display: block;
  border-radius: 0;
}

.float-aiga-33 {
  flex: 1;
  min-inline-size: 0;
  block-size: 100%;
  object-fit: cover;
  object-position: center top;
}

.float-aiga-34 {
  flex: 1.6;
  min-inline-size: 0;
  block-size: 100%;
  object-fit: cover;
  object-position: center 70%;
}

.cs-footnote {
  margin-block-start: calc(var(--space-xl) * 2);
}

.cs-footnote__list {
  list-style: disc;
  padding-inline-start: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  margin-block-start: var(--space-lg);
}

.cs-footnote__list li {
  font-size: 1.03rem;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: -0.02em;
}

.screen-fill-box {
  position: relative;
  flex: 0 0 62%;
  aspect-ratio: 16 / 9;
  background: var(--float-bg);
  border-radius: 1.5rem;
  overflow: hidden;
}

.screen-fill-item {
  position: absolute;
  inset-inline-start: var(--x);
  inset-block-start: var(--y);
  inline-size: 22%;
  opacity: 0;
  animation: appear 0.001s step-start forwards;
  animation-delay: var(--delay);
}

.screen-fill-item img {
  inline-size: 100%;
  display: block;
  border-radius: 0.5rem;
  aspect-ratio: 9 / 19;
  object-fit: cover;
  object-position: top;
}

.screen-fill-center {
  position: absolute;
  inset-inline-start: 50%;
  inset-block-start: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
}

.screen-fill-center .floating-bubble {
  inline-size: 20rem;
  margin-block: 0;
}

@keyframes appear {
  to { opacity: 1; }
}

.cs-media-placeholder {
  background: var(--surface);
  aspect-ratio: 16 / 9;
  border-radius: var(--radius);
}

.tldr {
  padding-block: var(--space-xl);
  padding-inline: 8%;
  text-align: center;
}

.tldr-label {
  display: inline-block;
  font-family: var(--font);
  font-size: var(--text-sm);
  color: var(--slack-on-ink);   /* on the yellow label */
  background: #F4F318;
  padding-block: var(--space-xs);
  padding-inline: var(--space-md);
  margin-block-end: var(--space-sm);
}

.tldr p + .tldr-label {
  margin-block-start: var(--space-xl);
}

.tldr p {
  /* filter: url(#roughen); */
  font-size: 1.03rem;
  color: var(--slack-ink);
  line-height: 1.5;
  font-weight: 500;
  font-family: var(--font);
}

.reel-wrap {
  position: relative;
  margin-block-start: var(--space-xl);
  inline-size: 100vw;
  margin-inline-start: calc(50% - 50vw);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.reel-secondary {
  inline-size: 95vw;
  margin-inline-start: calc(50% - 47.5vw);
  margin-block-start: var(--space-md);
  display: flex;
  justify-content: flex-start;
}

.reel-img {
  display: block;
  inline-size: 15%;
}

.reel-wrap video {
  inline-size: 100%;
  display: block;
  aspect-ratio: 16 / 9;
  background: var(--float-bg);
}

#soundToggle,
#fullscreenToggle {
  position: absolute;
  inset-block-start: var(--space-md);
  background: var(--float-bg);
  border: none;
  font-family: var(--font);
  font-size: var(--text-sm);
  color: var(--text-main);
  cursor: pointer;
  padding-block: var(--space-xs);
  padding-inline: var(--space-md);
  border-radius: 0;
}

#soundToggle {
  inset-inline-end: var(--space-md);
}

#fullscreenToggle {
  inset-inline-end: calc(var(--space-md) + 6rem);
}

.float-nav {
  position: fixed;
  inset-block-end: var(--space-lg);
  inset-inline-start: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: var(--space-xs);
  background: var(--float-bg);
  padding-block: var(--space-xs);
  padding-inline: var(--space-sm);
  z-index: 20;
}

.float-nav-btn {
  background: none;
  border: none;
  font-family: var(--font);
  font-size: var(--text-sm);
  color: var(--text-main);
  cursor: pointer;
  padding-block: var(--space-xs);
  padding-inline: var(--space-md);
}

.sidebar-toggle {
  color: var(--text-main);
  padding-inline-start: 0;
}

.case-sidebar.open .sidebar-toggle {
  color: var(--slack-ink);
}

.float-nav-next {
  color: var(--slack-on-ink);
  background: var(--slack-ink);
  border: var(--hairline, 0.0625rem) solid var(--slack-ink);
  white-space: nowrap;
  outline: none;
}

.float-nav-btn.active {
  color: var(--slack-ink);
}

.roughen {
  filter: url(#roughen);
}

.jitter-word {
  filter: url(#roughen-always);
}

.tools-panel {
  position: fixed;
  inset-block-end: calc(var(--space-lg) + var(--space-xs));
  inset-inline-end: var(--space-lg);
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.025rem;
}

.tools-box {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding-block: var(--space-sm);
  padding-inline-start: var(--space-md);
  padding-inline-end: var(--space-lg);
  background: var(--float-bg);
  inline-size: 12rem;
  position: relative;
  overflow: hidden;
  max-block-size: 0;
  padding-block: 0;
  opacity: 0;
  transition: max-block-size 0.35s ease, opacity 0.3s ease, padding-block 0.3s ease;
}

.tools-box::before {
  content: '';
  position: absolute;
  inset-inline-end: var(--space-sm);
  inset-block-start: var(--space-sm);
  inset-block-end: var(--space-sm);
  inline-size: var(--slack-line);
  background: var(--slack-ink);
  pointer-events: none;
}

.tools-box .sidebar-close {
  inset-inline-end: auto;
  inset-inline-start: var(--space-xs);
  font-size: var(--text-sm);
}

.tools-box .sidebar-item {
  display: block;
  text-align: right;
}

.tools-panel.open .tools-box {
  max-block-size: 20rem;
  padding-block: var(--space-sm);
  opacity: 1;
}

.tools-btn {
  padding-inline-end: 0;
}

.tools-panel.open .tools-btn {
  color: var(--slack-ink);
}

/* greenmode additions */
.slack-poster { inline-size: 100%; display: block; border-radius: var(--radius); }
.slack-four-col { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-md); margin-block: var(--space-xl); }
.slack-four-col img { inline-size: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius); display: block; }
.slack-four-col .cs-caption { margin-block-start: var(--space-xs); }
.slack-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-md); margin-block: var(--space-xl); }
.slack-two-col img, .slack-two-col video { inline-size: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; border-radius: var(--radius); display: block; background: #fff; }
.slack-two-col .slack-contain { object-fit: contain; }
@media (max-width: 768px) {
  .slack-four-col { grid-template-columns: 1fr 1fr; }
  .slack-two-col { grid-template-columns: 1fr; }
}
.slack-two-col.slack-tall img { aspect-ratio: auto; object-fit: contain; }
.slack-full { inline-size: 100%; display: block; border-radius: var(--radius); margin-block: var(--space-xl); }
.slack-greenbot { inline-size: 40%; max-inline-size: 16rem; display: block; margin-inline: auto; }
.slack-stats { display: flex; gap: var(--space-xl); margin-block: var(--space-xl); }
.slack-stats div { flex: 1; }
.slack-stats strong { display: block; font-size: 2rem; font-weight: 500; color: var(--slack-ink); }
.slack-phones { display: flex; justify-content: center; gap: var(--space-xl); margin-block: var(--space-xl); }
.slack-phones video { inline-size: 100%; max-inline-size: 18rem; display: block; border-radius: var(--radius); }
.slack-phones--square video { max-inline-size: 14rem; }


/* hidden holder for the SVG filters (was an inline style) */
.svg-filters {
  position: absolute;
}

/* a sub-subheading right after a caption: same gap as after body text (like float) */
.cs-caption + .cs-subsubheading {
  margin-block-start: var(--space-xl);
}

/* bottom nav once it has turned into the "next one" button (home: js/greenmode.js) */
.float-nav.is-morphed {
  background: transparent;
  padding: 0;
}

/* Greenbot tilt (Lottie) – same width as the video it replaced, in the animation's own 640 × 360 shape */
.greenbot-lottie {
  inline-size: 100%;
  aspect-ratio: 640 / 360;
}

/* Wink: its export has a faint white line round the edge – trim a hair off every side */
.greenbot-wink {
  /* clip-path: inset(8%);   tried – the white line hugs the shape, so it's fixed in the video copy instead ("greenbot wink clean") */
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   HEADER STAGE – the homepage cover's phone video in the middle,
   with Greenbot (wink, blink, tilt) floating around it. HTML: greenmode.html → .reel-stage
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.reel-stage {
  --stage-height: 40rem;
  --phone-height: calc(var(--stage-height) * 0.85);
  --phone-width: calc(var(--phone-height) * 540 / 1160);   /* the video's own phone shape */
  --buddy-size: 12rem;
  --buddy-gap: var(--space-xl);   /* space between Greenbot and the phone */
  --bob: var(--space-xs);         /* how far Greenbot floats up and down */
  block-size: var(--stage-height);
  justify-content: center;
}

/* the phone – zoomed a hair so the video's own black phone edge is hidden (same as the homepage cover) */
.reel-phone {
  inline-size: var(--phone-width);
  block-size: var(--phone-height);
  border-radius: calc(var(--radius) * 2);
  overflow: hidden;
  outline: var(--hairline, 0.0625rem) solid color-mix(in srgb, var(--float-bg) 70%, var(--text-main));
}

.reel-stage .reel-phone video {
  inline-size: 100%;
  block-size: 100%;
  aspect-ratio: auto;
  object-fit: cover;
  scale: 1.04;
}

/* first version – each Greenbot parked at one side of the phone, bobbing:
/* Greenbot, three times – each tucked against a different side of the phone *\/
.reel-stage .reel-buddy {
  position: absolute;
  inline-size: var(--buddy-size);
  aspect-ratio: 1 / 1;
  background: none;
  animation: buddy-bob 3s ease-in-out infinite;
}

.reel-buddy--wink {
  inset-block-start: 5%;
  inset-inline-end: calc(50% + var(--phone-width) / 2 + var(--buddy-gap));
  rotate: -8deg;
}

.reel-buddy--blink {
  inset-block-end: 5%;
  inset-inline-start: calc(50% + var(--phone-width) / 2 + var(--buddy-gap));
  rotate: 6deg;
  animation-delay: -1s;
}

.reel-stage .reel-buddy--tilt {
  inline-size: calc(var(--buddy-size) * 1.6);
  aspect-ratio: 640 / 360;   /* the Lottie's own shape *\/
  inset-block-end: 15%;
  inset-inline-end: calc(50% + var(--phone-width) / 2);
  animation-delay: -2s;
}

@keyframes buddy-bob {
  50% { translate: 0 calc(var(--bob) * -1); }
}

*/

/* Greenbot, three times, circling the phone.
   .orbit moves up + down, .orbit-x moves side to side – a quarter-loop apart, so together they trace an oval.
   Each Greenbot passes behind the phone at the top of the loop and in front of it at the bottom. */
.reel-stage {
  --orbit-time: 12s;   /* one full lap */
  --orbit-x: calc(var(--phone-width) / 2 + var(--buddy-size) * 0.6);    /* how wide the oval is */
  --orbit-y: calc(var(--phone-height) / 2 - var(--buddy-size) * 0.4);   /* how tall the oval is */
  --orbit-far: 0.7;    /* size at the top of the loop (further away) */
  --orbit-near: 1.2;   /* size at the bottom of the loop (closer) */
}

.reel-phone {
  position: relative;
  z-index: 1;
}

.orbit {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  transform-origin: 0 0;   /* grow + shrink around Greenbot's centre (its point on the loop) */
  animation: orbit-y calc(var(--orbit-time) / 2) ease-in-out infinite alternate;
}

.orbit-x {
  animation: orbit-x calc(var(--orbit-time) / 2) ease-in-out infinite alternate;
  animation-delay: calc(var(--orbit-time) / -4);   /* a quarter-loop ahead of the up + down */
}

/* spread the three evenly round the loop */
.orbit--2 { animation-delay: calc(var(--orbit-time) / -3); }
.orbit--2 .orbit-x { animation-delay: calc(var(--orbit-time) / -3 - var(--orbit-time) / 4); }
.orbit--3 { animation-delay: calc(var(--orbit-time) / -1.5); }
.orbit--3 .orbit-x { animation-delay: calc(var(--orbit-time) / -1.5 - var(--orbit-time) / 4); }

.reel-stage .reel-buddy {
  display: block;
  inline-size: var(--buddy-size);
  aspect-ratio: 1 / 1;
  background: none;
  translate: -50% -50%;   /* centred on its point of the loop */
}

/* the Lottie's Greenbot only fills ~20% of its 640-wide canvas (wink + blink fill ~50% of theirs),
   so its box is 2.5x wider to make all three Greenbots the same size */
.reel-stage .reel-buddy--tilt {
  inline-size: calc(var(--buddy-size) * 2.5);
  aspect-ratio: 640 / 360;   /* the Lottie's own shape */
}

@keyframes orbit-y {
  from { translate: 0 calc(var(--orbit-y) * -1); scale: var(--orbit-far);  z-index: 0; }   /* top of the loop: small, behind the phone */
  to   { translate: 0 var(--orbit-y);            scale: var(--orbit-near); z-index: 2; }   /* bottom of the loop: big, in front */
}

@keyframes orbit-x {
  from { translate: calc(var(--orbit-x) * -1) 0; }
  to   { translate: var(--orbit-x) 0; }
}

@media (prefers-reduced-motion: reduce) {
  .orbit, .orbit-x { animation-play-state: paused; }   /* Greenbots stay put, spread round the phone */
}

/* phone: a shorter stage and smaller Greenbots, so they still fit either side */
@media (max-width: 700px) {
  .reel-stage {
    --stage-height: 28rem;
    --buddy-size: 5rem;
    --buddy-gap: var(--space-xs);
  }
}

/* one still screen from the deck either side of the phone, so the header runs the full width.
   Exported straight from the Figma deck ("Static Screens" slides) at 3x: Assets/Greenmode/Images/header/
   They sit close in to the phone – the circling Greenbots are allowed to float over them. */
.reel-stage {
  --screen-height: calc(var(--phone-height) * 0.8);
  --screen-gap: calc(var(--space-xl) * 2);   /* space between the phone and each screen – the case studies' big gap (6rem) */
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);   /* both sides stay equal, so the phone is always dead centre */
  column-gap: var(--screen-gap);
  align-items: center;
  overflow: hidden;
}

.reel-screens--left { justify-self: end; }
.reel-screens--right { justify-self: start; }

/* same frame as the phone: rounded corners, hairline outline, zoomed a hair so the export's own edge is trimmed */
.reel-shot {
  block-size: var(--screen-height);
  aspect-ratio: 316 / 684;   /* the Figma phone frame's own shape */
  border-radius: calc(var(--radius) * 2);
  overflow: hidden;
  outline: var(--hairline, 0.0625rem) solid color-mix(in srgb, var(--float-bg) 70%, var(--text-main));
}

.reel-shot img {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  scale: 1.04;
}

/* phone: no room for the side screens – just the phone + Greenbots */
@media (max-width: 700px) {
  .reel-stage { grid-template-columns: 1fr; }
  .reel-screens { display: none; }
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   PROBLEM – graphics rebuilt from the Figma deck (Design Challenge – Slack).
   Context illustration, carbon cost card, bar chart, hidden waste cards.
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
:root {
  --slack-red: #E01E5A;          /* Slack's own red – Slack's bar + "high" dot */
  --slack-sky: #8FE1F8;          /* the deck's light blue – problem cards */
  --slack-white: #FFFFFF;
  --chart-height: 18rem;         /* tallest bar (Slack) */
  --chart-max: 5.2;              /* Slack's gCO2e – every bar is a share of this */
  --grow-time: 900ms;

  /* type inside the graphics – sized off the body text like float (body 1.03rem / 500), never smaller than it */
  --heading-font: 'Instrument Sans', sans-serif;   /* = .cs-subheading */
  --graphic-text: 1.03rem;                              /* = .cs-body */
  --graphic-title: calc(var(--graphic-text) * 1.5);     /* card titles */
  --graphic-big: calc(var(--graphic-text) * 1.75);      /* "how might we" – the punchline */
}

/* context: transparent copy of the slide's illustration, sitting level with the text, caption close underneath */
.slack-poster--clear {
  border-radius: 0;
}

.slack-poster--clear + .cs-caption {
  margin-block-start: var(--caption-gap);
}

/* carbon cost per journey */
.carbon-card {
  font-size: var(--graphic-text);
  font-weight: 500;
  display: flex;
  inline-size: fit-content;   /* hugs its text; block-level so its top margin merges with the paragraph's (no double gap) */
  flex-direction: column;
  gap: var(--space-sm);
  margin-block: var(--space-xl) 0;   /* chart row below brings its own top gap */
  padding-block: var(--space-lg);
  padding-inline: var(--space-lg) calc(var(--space-xl) * 2);
  border-radius: calc(var(--radius) * 2);
  background: var(--slack-sky);
  color: var(--slack-on-ink);
}

.carbon-card-title {
  margin: 0;
  font-size: var(--graphic-title);
  font-family: var(--heading-font);   /* same face as the section headings + the "how might we" text */
  font-weight: 500;
  letter-spacing: -0.03em;
}

.carbon-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  margin: 0;
  padding: 0;
  list-style: none;
}

.carbon-list li {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.carbon-list strong {
  font-weight: 400;
  color: var(--slack-white);   /* white, like the slide */
}

.carbon-dot {
  inline-size: var(--space-md);
  aspect-ratio: 1;
  border-radius: 50%;
}

.carbon-dot--low  { background: var(--slack-ink); }
.carbon-dot--mid  { background: var(--slack-sub); }
.carbon-dot--high { background: var(--slack-red); }

/* bar chart – each bar's height is its gCO2e as a share of Slack's */
.carbon-chart-row {
  grid-template-columns: 1fr 1fr;
  align-items: center;   /* text sits level with the middle of the bars */
  margin-block: var(--space-xl) 0;   /* same rhythm as the card above (the page's media rows use double) */
}

/* source caption tucks in under the chart */
.carbon-chart-row + .cs-caption {
  margin-block-start: var(--caption-gap);
}

.carbon-chart-row .cs-subsubheading {
  margin-block-start: 0;
}

.carbon-chart {
  display: flex;
  align-items: flex-end;
  gap: var(--space-lg);
}

.carbon-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
}

.carbon-col--slack    { --value: 5.2; --bar: var(--slack-red); }
.carbon-col--discord  { --value: 4.5; --bar: var(--slack-sub); }
.carbon-col--whatsapp { --value: 3.6; --bar: var(--slack-ink); }

.carbon-bar {
  inline-size: 100%;
  block-size: 0;   /* grows in when the chart scrolls into view – height (not scale), so the number rides up on top of its bar */
  border-radius: var(--radius) var(--radius) 0 0;
  background: var(--bar);
  transition: block-size var(--grow-time) ease-out;
}

.carbon-chart { min-block-size: calc(var(--chart-height) + var(--space-xl) * 2); }   /* room for the full bars, so the page doesn't shift as they grow */

.carbon-chart.is-visible .carbon-bar { block-size: calc(var(--chart-height) * var(--value) / var(--chart-max)); }

.carbon-col img {
  inline-size: calc(var(--space-xl) * 0.8);
  aspect-ratio: 1;
  object-fit: contain;
}

.carbon-value {
  font-size: var(--graphic-text);
  font-weight: 500;
  color: var(--text-mid);
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   HIDDEN WASTE / CONNECTING THE DOTS – three cards (from the deck).
   Problem: blue cards with quotes. Ideation: the same cards with a button that
   underlines the key phrases and swaps each quote for its "how might we" (green, like the slide).
   HTML: .waste (+ data-waste for the switchable one) · JS: js/greenmode.js → "Connecting the dots"
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.waste {
  --card-bg: var(--slack-sky);
  --switch-time: 500ms;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-lg);
  margin-block: var(--space-xl);
}

.waste.is-connected { --card-bg: var(--slack-ink); }

.waste-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
  inline-size: 100%;
}

.waste-card {
  font-size: var(--graphic-text);
  font-weight: 500;
  display: grid;   /* quote + "how might we" share the bottom spot, so the card doesn't jump when they swap */
  grid-template-rows: auto auto 1fr;
  gap: var(--space-md);
  padding: var(--space-lg);
  border-radius: calc(var(--radius) * 2);
  background: var(--card-bg);
  color: var(--slack-on-ink);
  transition: background var(--switch-time) ease;
}

.waste-title {
  margin: 0;
  font-size: var(--graphic-title);
  font-weight: 500;
}

.waste-text {
  margin: 0;
  line-height: 1.5;
}

/* key phrases: plain until connected, then a hand-drawn-ish underline sweeps in */
.waste-text mark {
  background: linear-gradient(currentColor, currentColor) no-repeat left bottom / 0% var(--slack-line);
  color: inherit;
  transition: background-size var(--switch-time) ease;
}

.waste.is-connected .waste-text mark { background-size: 100% var(--slack-line); }

.waste-quote,
.waste-hmw {
  grid-row: 3;
  grid-column: 1;
  align-self: end;
  margin: 0;
  transition: opacity var(--switch-time) ease;
}

.waste-quote {
  font-style: italic;
  font-size: var(--graphic-text);
  line-height: 1.4;
}

.waste-hmw {
  font-size: var(--graphic-big);
  font-family: var(--heading-font);   /* same face as the section headings (problem, research…) */
  font-weight: 500;
  letter-spacing: -0.03em;            /* the headings' tight tracking, eased a touch for the smaller size */
  line-height: 1.25;
  opacity: 0;
}

.waste.is-connected .waste-quote { opacity: 0; }
.waste.is-connected .waste-hmw   { opacity: 1; }

/* same look as the page's other buttons (green, dark text) */
.waste-toggle {
  border: none;
  font-weight: 500;
  border-radius: var(--slack-pill);   /* pill – sits better with the rounded cards than a square */
  padding-block: var(--space-xs);
  padding-inline: var(--space-md);
  background: var(--card-bg, var(--slack-ink));   /* matches the cards: blue to start, green once connected */
  color: var(--slack-on-ink);
  font-family: var(--font);
  font-size: var(--graphic-text);
  cursor: pointer;
  transition: background var(--switch-time, 500ms) ease;
}

@media (prefers-reduced-motion: reduce) {
  .carbon-bar,
  .waste-card,
  .waste-text mark,
  .waste-quote,
  .waste-hmw { transition: none; }
}

/* phone: cards + chart stack */
@media (max-width: 700px) {
  .waste-cards,
  .carbon-chart-row { grid-template-columns: 1fr; }
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   SLACK STATS – the context facts as big numbers (replaces the illustration).
   Pill tiles in Slack yellow, like the highlighted numbers on the "Context" slide.
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.usage-stats {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.usage-stat {
  font-size: var(--graphic-text);
  font-weight: 500;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  padding: var(--space-lg);
  border-radius: calc(var(--radius) * 2);
  background: var(--slack-sub);
  color: var(--slack-on-ink);
}

.usage-number {
  font-size: clamp(3rem, 6vw, 5.5rem);   /* same fluid sizing as the page's other big type */
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;   /* digits don't jiggle while counting */
}

.usage-stats + .cs-caption {
  margin-block-start: var(--caption-gap);
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   SPACING SYSTEM – one rhythm for the whole case study, all from the shared --space-* scale (style.css).
     section title  → first thing:     --space-lg   (the subheading's own gap – nothing adds to it)
     sub-heading    → its content:     --space-xl
     block          → next block:      --space-xl   (text, images, graphics, rows)
     media / graphic → its caption:    --caption-gap
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
:root {
  --caption-gap: var(--space-lg);   /* same as .cs-caption in float / decorate / spotify / adfin */
  --block-gap: var(--space-xl);
}

/* whatever comes first in a section starts right under the title (the media rows' big top margin made "problem" gappier than the rest) */
.cs-section .cs-subheading + * {   /* two classes, so it beats the block-gap rules below */
  margin-block-start: 0;
}

/* side-by-side rows + the full-width images share the same block gap as everything else */
.cs-media-text-row,
.slack-full,
.slack-two-col,
.slack-phones,
.carbon-chart-row,
.waste,
.greenbot-row {
  margin-block: var(--block-gap);
}

.carbon-card {
  margin-block: var(--block-gap) 0;
}

/* captions under images / videos: same tight gap everywhere */
.slack-full + .cs-caption,
.slack-two-col + .cs-caption,
.slack-phones + .cs-caption,
.sitemap + .cs-caption,
.cs-media-text-row + .cs-caption {
  margin-block-start: calc(var(--caption-gap) - var(--block-gap));   /* pulls the caption up into the block's bottom gap */
}

/* a new sub-topic after a caption: same break as after anything else (double block gap) */
.cs-caption + .cs-subsubheading {
  margin-block-start: calc(var(--block-gap) * 2);
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   CHARACTER ANIMATIONS – tilt, wink, blink in one row, Greenbot the same size in each.
   The Lottie's Greenbot only fills ~20% of its 640-wide canvas (wink + blink fill ~50% of theirs),
   so it's drawn 2.5x wider than its square and centred, letting the empty canvas run off.
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.greenbot-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
}

.greenbot-cell {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
}

.greenbot-cell video {
  display: block;
  inline-size: 100%;
  block-size: 100%;
}

.greenbot-cell .greenbot-lottie {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  inline-size: 250%;
  translate: -50% -50%;
}

.greenbot-row .cs-caption {
  margin-block-start: var(--caption-gap);
  text-align: center;
  max-inline-size: none;
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   SITE MAP – old vs new. The map from the deck on a white board; the button pins on the
   three places Green Mode steps in (positions taken from the "Old Vs New Site Map" slide).
   HTML: .sitemap[data-sitemap] · JS: js/greenmode.js → "Site map"
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
:root {
  --pin-blue: #2B59F0;   /* the deck's "feature interception" blue */
  --slack-pill: 999rem;  /* fully round ends – buttons */
}

/* first version (button pinned all three notes on at once):
.sitemap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-lg);
  margin-block: var(--block-gap);
}

.sitemap-board {
  position: relative;
  inline-size: 100%;
  padding: var(--space-xl);
  border-radius: calc(var(--radius) * 2);
  background: var(--slack-white);
}

.sitemap-board img {
  display: block;
  inline-size: 60%;   ( the map is tall – kept to the left so the pins have room to its right )
}

( each pin: a blue note like the slide's, popping in one after the other )
.sitemap-pin {
  position: absolute;
  margin: 0;
  max-inline-size: 30%;
  padding-block: var(--space-sm);
  padding-inline: var(--space-md);
  border-radius: var(--radius);
  background: var(--pin-blue);
  color: var(--slack-white);
  font-size: var(--graphic-text);
  font-weight: 500;
  line-height: 1.3;
  opacity: 0;
  scale: 0.8;
  transition: opacity var(--switch-time, 500ms) ease, scale var(--switch-time, 500ms) ease;
}

.sitemap-pin::after {
  content: "feature interception";
  display: block;
  margin-block-start: var(--space-xs);
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  opacity: 0.8;
}

( slide positions, as a share of the map (map = 60% of the board, starting at the board's padding) )
.sitemap-pin--files    { inset-block-start: 9%;  inset-inline-start: 22%; }
.sitemap-pin--channels { inset-block-start: 27%; inset-inline-start: 56%; transition-delay: 120ms; }
.sitemap-pin--apps     { inset-block-start: 38%; inset-inline-start: 54%; transition-delay: 240ms; }

.sitemap.is-connected .sitemap-pin {
  opacity: 1;
  scale: 1;
}


*/

/* the map sits on a white board, centred and kept to a readable size (it's very tall) */
.sitemap {
  margin-block: var(--block-gap);
  padding: var(--space-xl);
  border-radius: calc(var(--radius) * 2);
  background: var(--slack-white);
}

.sitemap-board {
  position: relative;
  max-inline-size: 34rem;
  margin-inline: auto;
}

.sitemap-board img {
  display: block;
  inline-size: 100%;
}

/* blinking points – where Green Mode steps in (positions from the "Old Vs New Site Map" slide, as a share of the map) */
.sitemap-point {
  --point-size: var(--space-md);
  position: absolute;
  inline-size: var(--point-size);
  aspect-ratio: 1;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--pin-blue);
  translate: -50% -50%;
  cursor: pointer;
  animation: point-blink 1.6s ease-in-out infinite;
}

.sitemap-point--files    { inset-inline-start: 53%; inset-block-start: 10%; }
.sitemap-point--channels { inset-inline-start: 80%; inset-block-start: 29%; animation-delay: -0.5s; }
.sitemap-point--apps     { inset-inline-start: 80%; inset-block-start: 36%; animation-delay: -1s; }

@keyframes point-blink {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--pin-blue) 60%, transparent); }
  50%      { box-shadow: 0 0 0 var(--point-size) transparent; }
}

/* the note: hidden until its point is hovered or tabbed to */
.sitemap-pin {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: calc(100% + var(--space-sm));
  inline-size: max-content;
  max-inline-size: 14rem;
  padding-block: var(--space-sm);
  padding-inline: var(--space-md);
  border-radius: var(--radius);
  background: var(--pin-blue);
  color: var(--slack-white);
  font-family: var(--font);
  font-size: var(--graphic-text);
  font-weight: 500;
  line-height: 1.3;
  text-align: start;
  translate: 0 -50%;
  opacity: 0;
  scale: 0.9;
  pointer-events: none;
  transition: opacity var(--hover-time, 250ms) ease, scale var(--hover-time, 250ms) ease;
}

.sitemap-pin::after {
  content: "feature interception";
  display: block;
  margin-block-start: var(--space-xs);
  font-size: var(--text-sm);
  text-transform: uppercase;
  opacity: 0.8;
}

.sitemap-point:hover,
.sitemap-point:focus-visible {
  animation-play-state: paused;
  z-index: 1;
}

.sitemap-point:hover .sitemap-pin,
.sitemap-point:focus-visible .sitemap-pin {
  opacity: 1;
  scale: 1;
}

/* the right-hand points open their note to the left, so it stays on the board */
.sitemap-point--channels .sitemap-pin,
.sitemap-point--apps .sitemap-pin {
  inset-inline-start: auto;
  inset-inline-end: calc(100% + var(--space-sm));
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   BRAINSTORMING + TYING IT TOGETHER – single notebook photos from the deck
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.slack-sketch,
.greenbot-origin img:first-child {
  display: block;
  inline-size: 100%;
  border-radius: calc(var(--radius) * 2);
}

/* Slackbot sits on the sketch, top right – the bot Greenbot grew out of */
.greenbot-origin {
  position: relative;
}

.greenbot-origin-slackbot {
  position: absolute;
  inset-block-start: 27%;      /* where it sits on the "Tying it Together" slide, beside the sketched Greenbot */
  inset-inline-start: 56%;
  inline-size: 12%;
  border-radius: 22%;          /* Slackbot's own rounded-square corners */
}

/* sketch rows: text first, the notebook photo kept small beside it */
.sketch-row {
  grid-template-columns: 1fr 1fr;
  align-items: start;   /* text starts right under its heading, level with the top of the photo */
}

/* the row's top gap merges with the heading's own gap, so the text sits the usual heading → content distance below it */
.cs-subsubheading + .sketch-row {
  margin-block-start: 0;
}

.sketch-row .slack-sketch,
.sketch-row .greenbot-origin {
  max-inline-size: 24rem;
}

@media (prefers-reduced-motion: reduce) {
  .sitemap-pin { transition: none; }
  .sitemap-point { animation: none; }
}


/* a new sub-topic starts with double the block gap, so headings never sit tight under the media above
   (the first one in a section still sits right under the section title – rule above) */
.cs-subsubheading {
  margin-block-start: calc(var(--block-gap) * 2);
}

/* tried – tightening every small heading's gap (Kinza: the other headings were fine, keep only the sketch rows' fix above):
( small headings sit closer to what they introduce – one step down the scale (was --space-xl) )
:root {
  --heading-gap: var(--space-lg);
}

.cs-subsubheading {
  margin-block-end: var(--heading-gap);
}

( whatever follows a small heading starts right at that gap (blocks' own top margins would otherwise push it back out) )
.cs-subsubheading + * {
  margin-block-start: 0;
}
*/


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   SKETCH CALLOUTS – a softly glowing green outline around the part of the drawing the text talks about
   (the weight icons; the sketched Greenbot), and Slackbot fading in and out over the Greenbot sketch
   to show where it came from. Positions are a share of each photo, read off the deck's slides.
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
:root {
  --glow-time: 2.4s;
  --slackbot-fade-time: var(--glow-time);   /* one Slackbot fade in + out over the sketch */
}

.sketch-spot {
  position: relative;
  max-inline-size: 24rem;
}

.sketch-spot .slack-sketch { max-inline-size: none; }

.sketch-glow {
  position: absolute;
  border: var(--slack-line) solid var(--slack-ink);
  border-radius: var(--radius);
  pointer-events: none;
  animation: sketch-glow var(--glow-time) ease-in-out infinite;
}

.sketch-glow--weights-a { inset-inline-start: 27%; inset-block-start: 62%; inline-size: 10%; block-size: 22%; }
.sketch-glow--weights-b { inset-inline-start: 78%; inset-block-start: 60%; inline-size: 10%; block-size: 21%; animation-delay: calc(var(--glow-time) / -2); }
.sketch-glow--greenbot  { inset-inline-start: 9%;  inset-block-start: 24%; inline-size: 17%; block-size: 15%; }

@keyframes sketch-glow {   /* crisp ring like the site map points – no blur */
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--slack-ink) 60%, transparent); }
  50%      { box-shadow: 0 0 0 var(--space-sm) transparent; }
}

/* Slackbot sits right on the sketched Greenbot and fades in and out */
.greenbot-origin-slackbot--over {
  inset-block-start: 25%;
  inset-inline-start: 11%;
  inline-size: 13%;
  rotate: 0deg;
  animation: slackbot-fade var(--slackbot-fade-time) ease-in-out infinite;   /* was 4.8s – too slow */
}

@keyframes slackbot-fade {
  0%, 15%, 100% { opacity: 0; }
  45%, 70%      { opacity: 0.6; }   /* never fully solid, so the sketch always shows through */
}

@media (prefers-reduced-motion: reduce) {
  .sketch-glow { animation: none; opacity: 1; }
  .greenbot-origin-slackbot--over { animation: none; opacity: 0; }
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   GREENBOT DIAGRAM + UI DIAGRAM – rebuilt from the "Introducing Greenbot" and "UI iconography" slides.
   Each is a stage in the slide's own proportions; every piece is placed as a share of it
   (read off the slide), so the layout scales with the page. Lines are hairline spans.
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
:root {
  --diagram-line: var(--slack-line);
  --diagram-ink: var(--text-main);   /* cream lines + notes, straight on the aubergine */
  --slack-ui-font: 'Lato', var(--font);
  --slack-ui-ink: #1D1C1D;           /* Slack's text black */
  --slack-ui-soft: #616061;          /* Slack's grey (channel names, sub-text) */
  --slack-ui-purple: #611F69;        /* Slack's aubergine buttons */
  --slack-credit: #6A2C70;           /* the carbon credit card */
  --leaf-green: #5B8C1A;             /* the low-waste leaf */
  --slack-lime: #C5DC84;             /* the deck's lime bubbles ("business related") */
  --slack-files-green: #087A43;   /* the "Archive / Send to Drive" buttons on the slide */
  --bob-time: 4s;
}

.bot-diagram,
.ui-diagram {
  position: relative;
  margin-block: var(--block-gap);
  /* no board – the pieces float straight on the aubergine (Kinza: no white backgrounds) */
}

.bot-diagram { aspect-ratio: 1360 / 600; }   /* a touch taller than the slide area so Greenbot isn't clipped at the bottom */
.ui-diagram  { aspect-ratio: 1840 / 820; }   /* slide area, a little taller so the bottom note fits */

.bot-diagram > *,
.ui-diagram > * {
  position: absolute;
  margin: 0;
}

.bot-line,
.ui-line {
  background: var(--diagram-ink);
}

.bot-note,
.ui-note {
  color: var(--diagram-ink);
  font-size: var(--graphic-text);
  font-weight: 500;
  line-height: 1.4;
}

/* Greenbot, big in the middle */
.bot-main     { inset-inline-start: 28.5%; inset-block-start: 13%; inline-size: 34%; }
.bot-slackbot { inset-inline-start: 1%;    inset-block-start: 55%; inline-size: 14.5%; border-radius: 22%; }
.bot-leaves   { inset-inline-start: 72%;   inset-block-start: 2%;  inline-size: 21.5%; }

.bot-line { block-size: var(--diagram-line); }
.bot-line--slackbot { inset-inline-start: 14%;   inset-block-start: 80%; inline-size: 20.5%; }
.bot-line--leaves   { inset-inline-start: 57.5%; inset-block-start: 18%; inline-size: 20.5%; }

.bot-note--slackbot { inset-inline-start: 1%;  inset-block-start: 5%;  inline-size: 21%; }
.bot-note--leaves   { inset-inline-start: 72%; inset-block-start: 38%; inline-size: 20%; text-align: end; }

/* the UI pieces, floating (the exports include the slide's soft shadows, so their boxes overlap – that's fine) */
.ui-piece--channels { inset-inline-start: 0.3%;  inset-block-start: 18.9%; inline-size: 31.4%; }
.ui-piece--popup    { inset-inline-start: 35.3%; inset-block-start: 28.2%; inline-size: 27.7%; }
.ui-piece--credit   { inset-inline-start: 67.8%; inset-block-start: 20.1%; inline-size: 29.6%; }

.ui-files {
  inset-inline-start: 71.4%;
  inset-block-start: 58.5%;
  inline-size: 21.4%;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.ui-unused {
  margin: 0;
  color: var(--diagram-ink);
  font-size: var(--graphic-text);
  font-weight: 600;
  text-align: center;
}

.ui-unused span { color: var(--slack-red); }

.ui-button {
  padding-block: var(--space-sm);
  border-radius: var(--radius);
  background: var(--slack-files-green);
  color: var(--slack-white);
  font-size: var(--graphic-text);
  font-weight: 600;
  text-align: center;
}

.ui-line { inline-size: var(--diagram-line); }
.ui-line--leaves   { inset-inline-start: 28.5%; inset-block-start: 13.6%; block-size: 14%; }     /* note's bottom → first leaf */
.ui-line--bot      { inset-inline-start: 40%;   inset-block-start: 42%;   block-size: 37.5%; }   /* under Greenbot's icon → the note */
.ui-line--progress { inset-inline-start: 93.9%; inset-block-start: 13.6%; block-size: 34%; }     /* note's bottom → the progress bar, past the end of the card text */

.ui-note--leaves   { inset-inline-start: 0.3%;  inset-block-start: -1%; inline-size: fit-content; max-inline-size: 31.4%; }   /* above the channel list, lined up with its left edge */
.ui-note--bot      { inset-inline-start: 35.3%; inset-block-start: 79%; inline-size: fit-content; max-inline-size: 27.7%; }   /* under the pop-up, lined up with its left edge */
.ui-note--progress { inset-inline-start: 67.8%; inset-block-start: 3%;  inline-size: fit-content; max-inline-size: 29.6%; }   /* above the carbon credit card, lined up with its left edge */

/* decoration from the "# Branding" slide: extra Greenbot faces + sparkles, bobbing gently */
.bot-deco {
  pointer-events: none;
  animation: deco-bob var(--bob-time) ease-in-out infinite;
}

.bot-deco--sparkle-a { inset-inline-start: 24%; inset-block-start: 0;   inline-size: 5%; }
.bot-deco--sparkle-b { inset-inline-start: 64%; inset-block-start: 75%; inline-size: 8%; animation-delay: -1.5s; }
.bot-deco--glasses   { inset-inline-start: 88%; inset-block-start: 70%; inline-size: 11%; animation-delay: -2.5s; }
.bot-deco--laugh     { inset-inline-start: 2%;  inset-block-start: 82%; inline-size: 9%;  animation-delay: -1s; }
.bot-deco--wink      { inset-inline-start: 25%; inset-block-start: 82%; inline-size: 7%;  animation-delay: -3s; }   /* moved out from under the pop-up's note */

@keyframes deco-bob {
  50% { translate: 0 calc(var(--space-sm) * -1); }
}

@media (prefers-reduced-motion: reduce) {
  .bot-deco { animation: none; }
}

/* phone: no room for a placed diagram – pieces stack, lines + decoration hide */
@media (max-width: 700px) {
  .bot-diagram,
  .ui-diagram {
    aspect-ratio: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-lg);
  }
  .bot-diagram > *,
  .ui-diagram > * {
    position: static;
    inline-size: 100%;
  }
  .bot-main,
  .bot-slackbot,
  .bot-leaves { inline-size: 50%; }
  .bot-note--leaves { text-align: start; }
  .bot-line,
  .ui-line,
  .bot-deco { display: none; }
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   UI PIECES (rebuilt in code) – channel list, Greenbot pop-up, carbon credit card.
   Slack's own type (Lato) and colours, sized off the graphic type scale.
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.ui-card,
.ui-credit {
  padding: var(--space-md) var(--space-lg);
  border-radius: calc(var(--radius) * 2);
  font-family: var(--slack-ui-font);
  font-size: var(--text-sm);
  box-shadow: 0 var(--space-xs) var(--space-lg) color-mix(in srgb, black 25%, transparent);
}

.ui-card {
  background: var(--slack-white);
  color: var(--slack-ui-ink);
}

.ui-card p { margin: 0; }

/* channel list */
.ui-ch-head { font-weight: 700; margin-block-end: var(--space-sm); }
.ui-ch-head span { margin-inline-end: var(--space-sm); }

.ui-ch-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--slack-ui-soft);
}

.ui-ch-list li {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.ui-ch-icon {
  inline-size: var(--space-md);
  text-align: center;
}

/* a tiny padlock: body + shackle */
.ui-ch-icon--lock {
  position: relative;
  block-size: calc(var(--space-md) * 0.6);
  inline-size: calc(var(--space-md) * 0.75);
  margin-inline: calc(var(--space-md) * 0.125);
  border: var(--slack-line) solid currentColor;
  border-radius: calc(var(--slack-line) * 1.5);
  translate: 0 calc(var(--space-xs) * 0.5);
}

.ui-ch-icon--lock::before {
  content: "";
  position: absolute;
  inset-inline: 15%;
  inset-block-end: 100%;
  block-size: calc(var(--space-md) * 0.4);
  border: var(--slack-line) solid currentColor;
  border-block-end: 0;
  border-radius: var(--space-md) var(--space-md) 0 0;
}

/* the leaf weights: a leaf shape (two rounded corners) in green / yellow / red */
.ui-leaf {
  margin-inline-start: auto;
  inline-size: calc(var(--space-md) * 0.8);
  aspect-ratio: 1;
  border-radius: 0 100% 0 100%;
  background: var(--leaf);
}

.ui-leaf--green  { --leaf: var(--leaf-green); }
.ui-leaf--yellow { --leaf: var(--slack-sub); }
.ui-leaf--red    { --leaf: var(--slack-red); }

/* Greenbot pop-up */
.ui-piece--popup {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.ui-pop-head {
  display: flex;
  gap: var(--space-sm);
  align-items: flex-start;
  margin-block-end: var(--space-xs);
}

.ui-pop-head img {
  inline-size: calc(var(--space-xl) * 0.8);
  border-radius: 22%;
}

.ui-pop-head strong { display: block; font-weight: 700; }
.ui-pop-head span { color: var(--slack-ui-soft); }

.ui-pop-button {
  padding-block: var(--space-sm);
  border-radius: var(--radius);
  background: var(--slack-ui-purple);
  color: var(--slack-white);
  font-weight: 700;
  text-align: center;
}

/* carbon credit card */
.ui-credit {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  background: var(--slack-credit);
  color: var(--slack-white);
}

.ui-credit p { margin: 0; }
.ui-credit-title { font-size: var(--graphic-text); font-weight: 700; }
.ui-credit-progress { margin-block-start: var(--space-sm); color: var(--slack-ink); }

.ui-credit-bar {
  block-size: var(--space-sm);
  border-radius: var(--space-sm);
  background: linear-gradient(to right, var(--slack-ink) 40%, var(--slack-white) 40%);   /* 4 of 10 GB */
}

.ui-unused { color: var(--diagram-ink); }


/* business note under the carbon credit card (from the "Introducing Slack: Green Mode" slide) */
.ui-business {
  inset-inline-start: 67.8%;
  inset-block-start: 58.5%;
  inline-size: 29.6%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-sm);
  color: var(--diagram-ink);
  font-size: var(--graphic-text);
  font-weight: 500;
  line-height: 1.4;
}

.ui-business p {
  margin: 0;
  padding: var(--space-md) var(--space-lg);
  border-radius: calc(var(--radius) * 2);   /* speech-bubble box, like the slide */
  background: var(--slack-lime);
  color: var(--slack-on-ink);
  text-align: center;
}

.ui-business p strong { font-weight: 700; }

.ui-business-tag {
  padding-block: var(--space-xs);
  padding-inline: var(--space-md);
  border-radius: var(--slack-pill);
  background: var(--slack-lime);
  color: var(--slack-on-ink);
  font-size: var(--text-sm);
  text-transform: uppercase;
}

/* the sparkles beside the big Greenbot twinkle: shrink + grow (instead of bobbing) */
.bot-deco--sparkle-a,
.bot-deco--sparkle-b {
  animation-name: sparkle-twinkle;
  animation-duration: calc(var(--bob-time) / 2);
}

@keyframes sparkle-twinkle {
  0%, 100% { scale: 1; }
  50%      { scale: 0.55; }
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   SOLUTION FLOW – four phone clips (the two prototype recordings, each split in two), side by side in order.
   Phones framed like the header + homepage cover: rounded, hairline outline, a hair zoomed so the recording's own edge hides.
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.flow {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-lg);
  margin-block: var(--block-gap);
}

.flow-phone {
  aspect-ratio: 540 / 1190;   /* the clips' own shape */
  border-radius: calc(var(--radius) * 2);
  overflow: hidden;
  outline: var(--hairline, 0.0625rem) solid color-mix(in srgb, var(--float-bg) 70%, var(--text-main));
}

.flow-phone video {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  scale: 1.04;
}

.flow-step .cs-caption {
  margin-block-start: var(--caption-gap);
  max-inline-size: none;
}

@media (max-width: 700px) {
  .flow { grid-template-columns: repeat(2, 1fr); }
}


/* tried – UI iconography take 2 (notes under each piece, no lines); Kinza went back to the lines:
( UI iconography, take 2: no pointer lines – each UI piece with its note underneath in plain white text.
   Three columns: channel list · pop-up · carbon credit (+ the business bubble under it). )
.ui-diagram {
  aspect-ratio: auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-areas:
    "channels popup credit"
    "note-1   note-2 note-3"
    ".        .      business";
  column-gap: var(--space-xl);
  row-gap: var(--space-lg);
  align-items: start;
}

.ui-diagram > * {
  position: static;
  inline-size: auto;
}

.ui-piece--channels { grid-area: channels; }
.ui-piece--popup    { grid-area: popup; }
.ui-piece--credit   { grid-area: credit; }
.ui-note--leaves    { grid-area: note-1; }
.ui-note--bot       { grid-area: note-2; }
.ui-note--progress  { grid-area: note-3; }
.ui-business        { grid-area: business; }

.ui-note { color: var(--slack-white); }

.ui-line { display: none; }

( the two decoration Greenbots keep floating at the edges )
.ui-diagram > .bot-deco { position: absolute; }
.ui-diagram > .bot-deco--laugh { inset-inline-start: -4%; inset-block-start: auto; inset-block-end: -6%; inline-size: 7%; }
.ui-diagram > .bot-deco--wink  { inset-inline-start: 58%; inset-block-start: auto; inset-block-end: -4%; inline-size: 5%; }

@media (max-width: 700px) {
  .ui-diagram { display: flex; }
  .ui-piece--channels { order: 1; }
  .ui-note--leaves    { order: 2; }
  .ui-piece--popup    { order: 3; }
  .ui-note--bot       { order: 4; }
  .ui-piece--credit   { order: 5; }
  .ui-note--progress  { order: 6; }
  .ui-business        { order: 7; }
}
*/


/* UI iconography: no pointer lines – the notes sit left-aligned with the piece they describe */
.ui-line { display: none; }
.ui-note { text-align: start; }

/* UI iconography notes as floating speech bubbles – same idea as float's research bubbles
   (rounded pill, rough hand-cut edge, dark text, gently bobbing). The rough edge sits on the
   bubble's own layer so the words stay crisp. */
.ui-note {
  --bubble-bg: var(--slack-sky);
  padding: var(--space-md) var(--space-lg);
  color: var(--slack-on-ink);
  isolation: isolate;
  animation: deco-bob var(--bob-time) ease-in-out infinite;
}

.ui-note::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: calc(var(--radius) * 3);
  background: var(--bubble-bg);
  filter: url("#roughen-always");
}

.ui-note--leaves   { --bubble-bg: var(--slack-sky); }
.ui-note--bot      { --bubble-bg: var(--slack-sub);  animation-delay: -1.3s; }
.ui-note--progress { --bubble-bg: color-mix(in srgb, var(--slack-red) 45%, var(--slack-white)); animation-delay: -2.6s; }

@media (prefers-reduced-motion: reduce) {
  .ui-note { animation: none; }
}


/* site map, split: the whole map small on the left, a zoomed crop of its top (where the blinking points are) on the right.
   The zoom shows the map from 40% across to the right edge, and the top 45% down. */
.sitemap--split {
  --zoom-x: 42%;     /* where the zoom starts across the map */
  --zoom-y: 3%;      /* where it starts down the map */
  --zoom-w: 0.5;     /* share of the map's width shown */
  --zoom-h: 0.38;    /* share of the map's height shown – just the area around the three points */
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: var(--space-xl);
  align-items: center;
}

.sitemap-full {
  display: block;
  inline-size: 100%;
}

.sitemap-zoom {
  position: relative;
  overflow: hidden;
  aspect-ratio: calc(688 * var(--zoom-w)) / calc(1011 * var(--zoom-h));   /* the map is 688 × 1011 */
}

.sitemap--split .sitemap-board {
  position: absolute;
  inset-block-start: calc(var(--zoom-y) / var(--zoom-h) * -1);
  inset-inline-start: calc(var(--zoom-x) / var(--zoom-w) * -1);
  inline-size: calc(100% / var(--zoom-w));
  max-inline-size: none;
  margin: 0;
}

@media (max-width: 700px) {
  .sitemap--split { grid-template-columns: 1fr; }
}

/* a glowing blue frame on the small map, marking the area shown in the zoom (same --zoom-* numbers, so they always match) */
.sitemap-overview { position: relative; }

.sitemap-frame {
  position: absolute;
  inset-block-start: var(--zoom-y);
  inset-inline-start: var(--zoom-x);
  inline-size: calc(var(--zoom-w) * 100%);
  block-size: calc(var(--zoom-h) * 100%);
  border: var(--slack-line) solid var(--pin-blue);
  border-radius: var(--radius);
  pointer-events: none;
  animation: frame-glow 1.6s ease-in-out infinite;
}

/* same crisp ring as the blinking points: a solid outline that grows outward and fades (no blur) */
@keyframes frame-glow {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--pin-blue) 60%, transparent); }
  50%      { box-shadow: 0 0 0 var(--space-sm) transparent; }
}

@media (prefers-reduced-motion: reduce) {
  .sitemap-frame { animation: none; }
}

/* the two views as two separate white boards, with the page showing between them */
.sitemap--split {
  padding: 0;
  background: none;
  gap: var(--space-lg);
  align-items: stretch;
}

.sitemap--split .sitemap-overview,
.sitemap--split .sitemap-zoom {
  border-radius: calc(var(--radius) * 2);
  background: var(--slack-white);
}

.sitemap--split .sitemap-overview {
  display: flex;
  align-items: center;
  padding: var(--space-lg);
}

.sitemap--split .sitemap-overview .sitemap-full { position: relative; }

/* the frame is placed against the map itself (not the board's padding) */
.sitemap-full-wrap { position: relative; inline-size: 100%; }

/* UI notes, branded for this case study (not float): the deck's lime bubbles, like the business one –
   same corners as the cards around them, no rough edge, no bobbing.
   (purple like the deck's description bubbles was tried in thought – it disappears on the aubergine) */
.ui-note {
  --bubble-bg: var(--slack-lime);
  color: var(--slack-on-ink);
  animation: none;
}

.ui-note::before {
  border-radius: calc(var(--radius) * 2);   /* = the UI cards + the business bubble */
  filter: none;
}

.ui-note--leaves,
.ui-note--bot,
.ui-note--progress { --bubble-bg: var(--slack-lime); }


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   UI COLUMNS – each UI piece sits in its own column with its note directly above or below,
   always the same gap (--ui-gap), so text and component are evenly spaced. Columns are staggered like the slide.
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.ui-diagram--cols {
  --ui-gap: var(--space-md);
  aspect-ratio: auto;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  column-gap: var(--space-xl);
  align-items: start;
  padding-block-end: var(--space-xl);   /* room for the floating Greenbots */
}

.ui-diagram--cols > .ui-col {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--ui-gap);
}

.ui-col--popup { margin-block-start: calc(var(--space-xl) * 2); }   /* staggered lower, like the slide */
.ui-col--credit { margin-block-start: var(--space-xl); }

.ui-col > * {
  position: relative;
  inset: auto;
  inline-size: 100%;
  max-inline-size: none;
}

.ui-col > .ui-note { inline-size: fit-content; }

/* the business bubble: Slack yellow now (was lime) */
.ui-business p,
.ui-business-tag { background: var(--slack-sub); }

.ui-col .ui-business { margin-block-start: calc(var(--space-xl) - var(--ui-gap)); }   /* a little apart from the card it follows */

/* floating Greenbots stay loose at the bottom edge */
.ui-diagram--cols > .bot-deco { position: absolute; }
.ui-diagram--cols > .bot-deco--laugh { inset-inline-start: 2%;  inset-block-start: auto; inset-block-end: 0; inline-size: 7%; }
.ui-diagram--cols > .bot-deco--wink  { inset-inline-start: 25%; inset-block-start: auto; inset-block-end: 4%; inline-size: 5%; }

@media (max-width: 700px) {
  .ui-diagram--cols { grid-template-columns: 1fr; row-gap: var(--space-xl); }
  .ui-col--popup,
  .ui-col--credit { margin-block-start: 0; }
}


/* UI notes laid out like float's speech bubbles: each one tucks in, slightly overlapping
   the edge of the UI piece it talks about (on top of it), nudged in from the side and tilted a touch. */
.ui-diagram--cols {
  --tuck: var(--space-md);   /* how far a bubble overlaps its piece */
}

.ui-col > .ui-note,
.ui-col > .ui-business {
  z-index: 1;
  margin-inline-start: var(--space-lg);
}

.ui-col--channels > .ui-note { margin-block-end: calc((var(--ui-gap) + var(--tuck)) * -1); rotate: -2deg; }
.ui-col--popup > .ui-note    { margin-block-start: calc((var(--ui-gap) + var(--tuck)) * -1); rotate: 2deg; }
.ui-col--credit > .ui-note   { margin-block-end: calc((var(--ui-gap) + var(--tuck)) * -1); rotate: 1.5deg; }

/* business: one bubble, overlapping the bottom of the carbon credit card, with "business incentive" as a small eyebrow inside */
.ui-col .ui-business {
  margin-block-start: calc((var(--ui-gap) + var(--tuck)) * -1);
  inline-size: fit-content;
  rotate: -1.5deg;
}

.ui-business p { text-align: start; }

.ui-business p .ui-business-tag {
  display: block;
  padding: 0;
  margin-block-end: var(--space-xs);
  background: none;
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.04em;
}

/* the glasses Greenbot, back as decoration */
.ui-diagram--cols > .bot-deco--glasses-ui { position: absolute; inset-inline-end: 2%; inset-block-start: -6%; inline-size: 6%; animation-delay: -2s; }

/* no tilts – nothing else in this case study is tilted */
.ui-col > .ui-note,
.ui-col .ui-business { rotate: 0deg; }

/* lines, take 2: each note sits a line's length away from its UI piece, joined by a short cream line
   (no more overlap) – the bubble style stays */
.ui-diagram--cols { --line-gap: var(--space-xl); }

.ui-col--channels > .ui-note,
.ui-col--credit > .ui-note { margin-block-end: calc(var(--line-gap) - var(--ui-gap)); }
.ui-col--popup > .ui-note  { margin-block-start: calc(var(--line-gap) - var(--ui-gap)); }

.ui-col > .ui-note::after {
  content: "";
  position: absolute;
  inset-inline-start: var(--space-lg);
  inline-size: var(--diagram-line);
  block-size: var(--line-gap);
  background: var(--diagram-ink);
}

.ui-col--channels > .ui-note::after,
.ui-col--credit > .ui-note::after { inset-block-start: 100%; }   /* line runs down to the piece */
.ui-col--popup > .ui-note::after  { inset-block-end: 100%; }     /* line runs up to the piece */

/* character animations: the clips are square with lots of empty space above + below Greenbot,
   which read as a big gap before the next heading – crop each cell to 4:3 (Greenbot + sparkles stay in) */
.greenbot-cell { aspect-ratio: 4 / 3; }
.greenbot-cell video { object-fit: cover; }

/* notes back to the original style: plain cream text, no coloured bubble (the yellow business bubble stays) */
.ui-col > .ui-note {
  padding: 0;
  color: var(--diagram-ink);
}

.ui-col > .ui-note::before { display: none; }

.ui-col > .ui-note::after { inset-inline-start: var(--space-md); }

/* business incentive: no bubble – plain Slack-yellow text, eyebrow included */
.ui-col .ui-business p {
  padding: 0;
  background: none;
  color: var(--slack-sub);
}

.ui-col .ui-business { margin-block-start: var(--space-md); }   /* no longer overlapping the card */

/* business incentive: eyebrow yellow too, and a yellow line up to the card (like the notes' lines) */
.ui-col .ui-business p .ui-business-tag { color: inherit; }

.ui-col .ui-business {
  position: relative;
  margin-block-start: calc(var(--line-gap) - var(--ui-gap));
}

.ui-col .ui-business::after {
  content: "";
  position: absolute;
  inset-block-end: 100%;
  inset-inline-start: var(--space-md);
  inline-size: var(--diagram-line);
  block-size: var(--line-gap);
  background: var(--slack-sub);
}

/* decoration: one Greenbot beside each white note, so they read as part of the layout */
.ui-diagram--cols > .bot-deco { inline-size: 6%; inset-block-end: auto; inset-inline-end: auto; }
.ui-diagram--cols > .bot-deco--glasses-ui { inset-inline-start: 26%; inset-block-start: 0; }     /* by the leaves note */
.ui-diagram--cols > .bot-deco--laugh      { inset-inline-start: 28.5%; inset-block-start: 80%; }   /* to the left of the Greenbot note */
.ui-diagram--cols > .bot-deco--wink       { inset-inline-start: 92%; inset-block-start: -8%; rotate: -28deg; }   /* above the progress note, clear of its text; the image leans 14° one way, so -28° makes it lean 14° the other way */


/* ==========================================================
   Eyebrow headings – same system as float / decorate / spotify:
   the section name (context, problem, design…) is a small pop-coloured
   eyebrow, and one long story heading per section sits under it, big
   and calm. Backup of the old structure: *-before-headings.html / .css
   ========================================================== */

/* ---------- Tokens ---------- */
:root {
  --heading-pop: var(--slack-ink);        /* the eyebrow text: the page's accent */
  --heading-quiet: var(--text-main);   /* the big story headings: the body text colour */
}

/* ---------- Eyebrow: the section name, close above its story heading ---------- */
.cs-eyebrow {
  /* color: var(--heading-pop); – off: the eyebrow keeps the sub-subheading colour */
  margin-block-end: var(--space-xs);
}

/* a big heading gets a big break above it, except right under its eyebrow */
.cs-subheading {
  margin-block-start: calc(var(--space-xl) * 2);
}

.cs-eyebrow + .cs-subheading {
  margin-block-start: 0;
}

/* an eyebrow that isn't first in its section gets the big break instead */
.cs-eyebrow:not(:first-child) {
  margin-block-start: calc(var(--space-xl) * 2);
}

/* the first eyebrow in a section sits at the top, like the old section heading did */
.cs-eyebrow:first-child {
  margin-block-start: 0;
}

/* a big heading followed by media (not body text) gets the same gap the small headings use before media
   – it was the text gap (--space-lg) and the media sat too tight under it */
.cs-subheading:has(+ :not(.cs-body)) {
  margin-block-end: var(--space-xl);
}

/* each small-heading part inside a section starts a big break below what's above (same airy rhythm as float) */
.cs-subsubheading:not(.cs-eyebrow):not(:first-child) {
  margin-block-start: calc(var(--space-xl) * 2);
}