@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: #EDFAF2;   first: light mint
     --float-bg: #59D486;   then: the homepage tile green */
  --float-bg: #084235;      /* deep forest green */

  /* colour system – same logic as decorate (one bg, one text colour, one accent, a caption shade),
     flipped for a dark background. These override the shared text colours for this page only. */
  --text-main: #FFF9EE;                                            /* cream body text – 10.9: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));
  --adfin-text: #101010;       /* dark text for light surfaces (tabs, buttons, tooltip) */
  --adfin-ink: #59D486;        /* accent: Adfin green – headings, labels, TL;DR, underlines, buttons – 6.1:1
                                  (tried: #1E8A4F, white, lavender #B3BFFF, cream #FFF9EE) */
  --adfin-ink-soft: #35927D;   /* captions – the bg's own hue, lifted a little (like float's tan on beige) – 3:1  (tried #9FD9B6, #42B89D) */
  --adfin-purple: #B3BFFF;     /* smaller sub-subheadings – Adfin lavender */
  --adfin-tint: color-mix(in srgb, var(--float-bg) 85%, white);   /* panel behind the screens, a touch lighter than the bg */
  --adfin-line: 0.125rem;      /* sidebar / tools accent lines (was 2px) */
  --adfin-qr-size: 11.25rem;   /* QR code (was 180px) */
  --adfin-white: #FFFFFF;      /* white tabs + image backings */
  --adfin-highlight: #F4F318;  /* TL;DR label */
}

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(--adfin-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(--adfin-line);
  background: var(--adfin-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: var(--adfin-white);
  border: none;
  cursor: pointer;
  font-family: var(--font);
  font-size: var(--text-sm);
  color: var(--adfin-text);   /* on a 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: var(--hairline, 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(--adfin-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;
}

#branding {
  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(--adfin-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(--adfin-purple);
  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(--adfin-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(--adfin-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(--adfin-ink);
  color: var(--adfin-text);
  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(--adfin-ink-soft);
  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(--adfin-qr-size);
  block-size: var(--adfin-qr-size);
  object-fit: cover;
  flex-shrink: 0;
  display: block;
  border-radius: var(--radius);
}

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

.float-qr-step {
  color: var(--adfin-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(--text-main);
  background: var(--adfin-highlight);
  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(--adfin-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);   sat next to the sound button */
  inset-inline-end: var(--space-md);   /* takes the corner now the sound button is gone */
}

.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(--adfin-ink);   /* the "overview" button sits on the page – light green */
  padding-inline-start: 0;
}

.case-sidebar.open .sidebar-toggle {
  color: var(--adfin-ink);   /* light green when open too */
}

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

.float-nav-btn.active {
  color: var(--adfin-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(--adfin-line);
  background: var(--adfin-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;
  color: var(--adfin-ink);   /* matches "overview" */
}

.tools-panel.open .tools-btn {
  color: var(--adfin-ink);   /* light green when open */
}


/* adfin additions */
.adfin-poster { inline-size: 100%; display: block; border-radius: var(--radius); }
.adfin-four-col { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-md); margin-block: var(--space-xl); }
.adfin-four-col img { inline-size: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius); display: block; }
.adfin-four-col .cs-caption { margin-block-start: var(--space-xs); }
.adfin-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-md); margin-block: var(--space-xl); }
.adfin-two-col img, .adfin-two-col video { inline-size: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; border-radius: var(--radius); display: block; background: var(--adfin-white); }
.adfin-two-col .adfin-contain { object-fit: contain; }
@media (max-width: 768px) {
  .adfin-four-col { grid-template-columns: 1fr 1fr; }
  .adfin-two-col { grid-template-columns: 1fr; }
}

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


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

/* bottom nav once it has turned into the "next one" button (js/adfin.js – was set with .style) */
.float-nav.is-morphed {
  background: transparent;
  padding: 0;
}


/* ==========================================================
   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(--adfin-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);
}

/* 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);
}