/* =====================================================================
   CASE-STUDY.CSS — the six project pages
   A redesigned case-study layout. Loaded after styles.css and
   case-pages.css; everything here is scoped to main.csx, so nothing on
   the real project pages changes.

   1  Tokens and page width
   2  Hero, quick facts and cover image
   3  The story column (centred) and the section rail (left edge)
   4  Sections: overview, process steps, final design, reflection, prototype
   5  Below 1024px: no rail, steps collapsed
   6  Phones (below 700px): carousel, tighter spacing, smaller images
   7  Reduced motion
   ===================================================================== */

/* =====================================================================
   1 — TOKENS AND PAGE WIDTH
   --header-h is kept up to date by case-study.js.
   ===================================================================== */
:root {
  --header-h: 84px;        /* height of the site's sticky navbar */
  --rule: #d9d0b8;
  --card: #fffdf5;
  --muted: #59645d;
  --gutter: clamp(20px, 4vw, 48px);
  --measure: 66ch;         /* comfortable reading width for paragraphs */

  /* The story column: centred on the page, a little wider and larger on
     big screens. The rail on the left needs --rail-w plus some breathing
     room on BOTH sides so the column stays dead centre. */
  --rail-left: clamp(16px, 1.6vw, 32px);
  --rail-w: clamp(176px, 14vw, 240px);
  --story-max: clamp(760px, 52vw, 920px);
}

/* Jumping to a section lands its heading just below the navbar. */
html {
  scroll-padding-top: calc(var(--header-h) + 28px);
}

.cs-page.csx {
  width: min(100% - 2 * var(--gutter), 1280px);
  padding-top: clamp(24px, 3.5vw, 56px);
}

.csx p {
  max-width: var(--measure);
}

.csx .csx-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* =====================================================================
   2 — HERO, QUICK FACTS AND COVER IMAGE
   ===================================================================== */
.csx .csx-hero {
  display: block;
}

/* Small, quiet way back to the work page, above the title. */
.csx .csx-back {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;   /* still an easy tap target */
  margin: -10px 0 clamp(8px, 1.5vw, 16px);
  color: var(--muted);
  font-size: .9rem;
  text-decoration: none;
}

.csx .csx-back-arrow {
  width: 7px;
  height: 11px;
  background: currentColor;
  clip-path: polygon(0 43.75%, 20% 43.75%, 20% 31.25%, 40% 31.25%, 40% 18.75%, 60% 18.75%, 60% 6.25%, 80% 6.25%, 80% 0, 100% 0, 100% 100%, 80% 100%, 80% 93.75%, 60% 93.75%, 60% 81.25%, 40% 81.25%, 40% 68.75%, 20% 68.75%, 20% 56.25%, 0 56.25%);
  transition: transform .15s ease;
}

.csx .csx-back:hover,
.csx .csx-back:focus-visible {
  color: var(--blue);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.csx .csx-back:hover .csx-back-arrow {
  transform: translateX(-3px);
}

/* The project type as a blue pixel badge. */
.csx .csx-tag {
  display: block;
  width: fit-content;
  margin: 0 0 8px;
  padding: 6px 10px 4px;
  background: var(--blue);
  color: #fff;
  font: 400 .95rem/1 Determination, 'Pixelify Sans', monospace;
  letter-spacing: .02em;
  /* corners stepped by one pixel */
  clip-path: polygon(0 3px, 3px 3px, 3px 0, calc(100% - 3px) 0, calc(100% - 3px) 3px, 100% 3px,
    100% calc(100% - 3px), calc(100% - 3px) calc(100% - 3px), calc(100% - 3px) 100%,
    3px 100%, 3px calc(100% - 3px), 0 calc(100% - 3px));
}

/* the second sentence of the intro starts on a new line */
.csx .csx-pitch-line {
  display: block;
  margin-top: 2px;
}

/* The title is the focal point; the pitch sits under it, clearly smaller. */
.csx .csx-hero h1 {
  margin: 6px 0 clamp(10px, 1.4vw, 18px);
}

.csx .csx-pitch {
  max-width: 96ch;
}

.csx .csx-pitch p {
  max-width: none;
}

.csx .csx-subtitle {
  margin: 0 0 8px;
  color: var(--ink, #2f2f2f);
  font-size: clamp(1.15rem, 1rem + .55vw, 1.5rem);
  line-height: 1.35;
}

.csx .csx-pitch p:not(.csx-subtitle) {
  margin: 0;
  color: #4a545a;
  font-size: clamp(.98rem, .92rem + .2vw, 1.1rem);
  line-height: 1.6;
}

.csx .csx-status {
  margin: 14px 0 0;
  color: var(--muted);
  font-size: .9rem;
}

.csx .csx-facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px clamp(20px, 3vw, 48px);
  margin: clamp(28px, 4vw, 48px) 0 clamp(20px, 3vw, 32px);
  padding-block: 24px;
  border-block: 1px solid var(--rule);
}

/* Solo projects list three facts (no Team), so use three columns. */
@media (min-width: 1024px) {
  .csx .csx-facts:has(> div:nth-child(3):last-child) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.csx .csx-facts > div + div {
  border: 0;
  margin: 0;
  padding: 0;
}

.csx .csx-facts dt {
  margin-bottom: 10px;
  font-size: 1rem;
}

.csx .csx-facts dt::after {
  content: ":";
}

.csx .csx-facts dd {
  font-size: 1.12rem;
  line-height: 1.45;
}

.csx .csx-todo,
.csx .csx-todo-note {
  color: #6f6a55;
}

.csx .csx-todo-note {
  font-size: .9em;
  border-left: 2px solid #b8ad90;
  padding-left: 14px;
}

.csx .csx-cover {
  margin: 0;
}

.csx .csx-cover img {
  display: block;
  width: 100%;
  height: auto;   /* keeps each project's own image shape (width/height in the HTML) */
  border: 1px solid #c6c8c6;
}

/* =====================================================================
   3 — THE STORY COLUMN AND THE SECTION RAIL
   The story is one centred column. From 1024px up the section rail is
   pinned to the left edge of the screen, vertically centred, and only
   shows while you're reading the story (case-study.js adds .is-shown),
   so it never sits over the hero or the end of the page.
   ===================================================================== */
.csx .csx-body {
  margin-top: clamp(48px, 6vw, 96px);
}

.csx .csx-content {
  container-type: inline-size;   /* sections adapt to the column's width */
  width: min(100%, var(--story-max));
  margin-inline: auto;
}

/* Big screens: reading text grows a touch with the screen. */
@media (min-width: 1024px) {
  .csx .csx-content {
    /* Leave the rail's width (plus a gap) clear on BOTH sides of the
       column, so it stays dead centre and never touches the rail. */
    width: min(100%, var(--story-max), 100vw - 2 * (var(--rail-left) + var(--rail-w) + 40px));
    font-size: clamp(1rem, .8rem + .3vw, 1.18rem);
  }
}

.csx .csx-toc {
  display: none;   /* phones and tablets: no rail */
}

@media (min-width: 1024px) {
  .csx .csx-toc {
    display: block;
    position: fixed;
    left: var(--rail-left);
    top: calc(var(--header-h) + (100vh - var(--header-h)) / 2);
    z-index: 50;
    width: var(--rail-w);
    transform: translateY(-50%);
    opacity: 0;
    visibility: hidden;
    transition: opacity .2s steps(3), visibility 0s .2s;
  }

  .csx .csx-toc.is-shown {
    opacity: 1;
    visibility: visible;
    transition: opacity .2s steps(3), visibility 0s;
  }
}

.csx .csx-toc-list {
  --progress: 0;   /* 0 → 1, set by case-study.js */
  position: relative;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* The connecting line, and its blue "read so far" fill. */
.csx .csx-toc-list::before,
.csx .csx-toc-list::after {
  content: "";
  position: absolute;
  left: 8px;
  top: 30px;
  width: 3px;
  height: calc(100% - 60px);
  background: var(--rule);
}

.csx .csx-toc-list::after {
  background: var(--blue);
  transform-origin: top;
  transform: scaleY(var(--progress));
  transition: transform .2s steps(4);
}

.csx .csx-toc-list a {
  position: relative;
  display: flex;
  align-items: center;
  gap: 18px;
  min-height: 60px;
  color: #5f6b72;
  font: 400 clamp(1rem, .75rem + .4vw, 1.25rem)/1.2 Determination, 'Pixelify Sans', monospace;
  text-decoration: none;
  text-transform: capitalize;   /* "The Box In 3D", "Outcome & Reflection" */
}

/* Pixel checkpoint square */
.csx .csx-toc-list a::before {
  content: "";
  flex: none;
  position: relative;
  z-index: 1;
  width: 19px;
  height: 19px;
  background: var(--paper, #f6f3e9);
  box-shadow: inset 0 0 0 3px #b9b4a2;
}

.csx .csx-toc-list a.is-passed::before {
  box-shadow: inset 0 0 0 3px var(--blue);
}

.csx .csx-toc-list a[aria-current="true"] {
  color: var(--blue);
}

.csx .csx-toc-list a[aria-current="true"]::before {
  background: var(--blue);
  box-shadow: inset 0 0 0 3px var(--blue), 4px 4px 0 #37639940;
}

.csx .csx-toc-list a:hover {
  color: var(--blue);
}

.csx .csx-toc-list a:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 2px;
}

/* =====================================================================
   4 — SECTIONS
   Sizes use em so they grow with the column's text size on big screens.
   ===================================================================== */
.csx .csx-content p {
  font-size: 1em;
}

.csx .csx-section {
  margin: 0;
  padding-bottom: clamp(56px, 6vw, 104px);
}

.csx .csx-section h2 {
  font-size: clamp(2rem, 1.4rem + 1.6vw, 3.4rem);
  margin-bottom: 14px;
}

.csx .csx-section h3 {
  font-size: clamp(1.35rem, 1.05rem + .8vw, 2.05rem);
  margin-bottom: 10px;
}

.csx .csx-lede {
  margin-bottom: 1.75em;
  color: #4a545a;
}

/* Two short blocks side by side when the column is wide enough. */
.csx .csx-two {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px clamp(28px, 4vw, 64px);
}

@container (min-width: 560px) {
  .csx .csx-two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.csx .csx-two p {
  margin-bottom: 0;
}

.csx .csx-callout {
  margin-top: 2em;
  padding: 4px 0 4px 22px;
  border-left: 3px solid var(--blue);
}

.csx .csx-callout p {
  max-width: none;   /* run to the edge of the box */
  margin: 0;
}

/* ---- Process steps (expandable panels) ---- */
.csx .csx-steps {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--rule);
}

.csx .csx-steps > li {
  border-bottom: 1px solid var(--rule);
}

.csx .csx-step > summary {
  display: grid;
  grid-template-columns: 2.5em minmax(0, 1fr) 24px;
  align-items: center;
  gap: 1.1em;
  padding: 22px 0;
  color: inherit;
  list-style: none;
  cursor: pointer;
}

.csx .csx-step > summary::-webkit-details-marker {
  display: none;
}

.csx .csx-step > summary:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 4px;
}

.csx .csx-num {
  display: grid;
  place-items: center;
  width: 2.5em;
  height: 2.5em;
  color: var(--blue);
  font: 500 1.2em/1 Determination, 'Pixelify Sans', monospace;
  box-shadow: inset 0 0 0 2px var(--blue);
}

.csx .csx-step-kind {
  display: block;
  margin-bottom: 4px;
  color: var(--blue);
  font-size: .85em;
}

.csx .csx-step-head h3 {
  margin: 0;
}

/* The open/close marker: a pixel arrow that points right when closed and
   turns clockwise to point down when open. (Class name kept from the old
   plus/minus.) */
.csx .csx-plus {
  width: 20px;
  height: 10px;
  justify-self: end;
  background: var(--blue);
  clip-path: polygon(0 0, 25% 0, 25% 25%, 37.5% 25%, 37.5% 50%, 62.5% 50%, 62.5% 25%, 75% 25%,
    75% 0, 100% 0, 100% 25%, 87.5% 25%, 87.5% 50%, 75% 50%, 75% 75%, 62.5% 75%, 62.5% 100%,
    37.5% 100%, 37.5% 75%, 25% 75%, 25% 50%, 12.5% 50%, 12.5% 25%, 0 25%);
  transform: rotate(-90deg);
  transition: transform .2s steps(3);
}

.csx .csx-step[open] .csx-plus {
  transform: rotate(0deg);
}

@media (prefers-reduced-motion: reduce) {
  .csx .csx-plus { transition: none; }
}

/* Text and picture: side by side in a wide column, stacked otherwise. */
.csx .csx-step-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
  padding: 0 0 32px;
}

@container (min-width: 700px) {
  .csx .csx-step-body {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: clamp(24px, 3vw, 48px);
    align-items: start;
    padding-left: 3.6em;   /* lines the text up with the step title */
  }
}

.csx .csx-step-copy p:last-child {
  margin-bottom: 0;
}

.csx .csx-step-body .cs-phone {
  justify-self: center;
  width: min(100%, 240px);
}

/* ---- Final design screens ---- */
.csx .csx-track {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 3vw, 44px);
  align-items: start;
}

.csx .csx-slide {
  width: 100%;
  max-width: 300px;
  justify-self: center;
}

/* Editorial galleries (a cover plus wide spreads): cover on the left,
   spreads stacked beside it. */
.csx .csx-track--editorial {
  grid-template-columns: minmax(0, .72fr) minmax(0, 1.6fr);
  align-items: start;
}

.csx .csx-track--editorial .csx-slide {
  max-width: none;
}

.csx .csx-track--editorial .cs-portrait {
  grid-row: span 2;
}

.csx .csx-slide figcaption {
  font-size: .85em;
  color: var(--muted);
  text-align: center;
}

.csx .csx-carousel-controls {
  display: none;   /* only on phones */
}

.csx .csx-decisions {
  margin-top: 40px;
}

/* ---- Reflection note ---- */
/* The closing card as a big pixel sticky note, taped to the page: the
   paper (stepped corners, folded corner) is drawn on its own layer so the
   brown tape can hang over the top edge; one hard shadow comes from the
   section around it. Same look as the sticky notes in step 2. */
.csx .csx-note {
  --px: 4px;
  --paper: #fde193;
  position: relative;
  isolation: isolate;
  border: 0;
  background: none;
  box-shadow: none;
  color: #3a3326;
}

.csx .csx-note::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(135deg, #3c321e2e 50%, #0000 50%) right bottom / 26px 26px no-repeat,
    var(--paper);
  clip-path: polygon(
    0 var(--px), var(--px) var(--px), var(--px) 0,
    calc(100% - var(--px)) 0, calc(100% - var(--px)) var(--px), 100% var(--px),
    100% calc(100% - 26px), calc(100% - 26px) 100%,
    var(--px) 100%, var(--px) calc(100% - var(--px)), 0 calc(100% - var(--px)));
}

/* brown pixel tape across the top, half off the note */
.csx .csx-note::after {
  content: "";
  position: absolute;
  top: -12px;
  left: 50%;
  width: min(30%, 220px);
  height: 24px;
  transform: translateX(-50%);
  background:
    repeating-linear-gradient(90deg, #0000 0 8px, #8a613214 8px 10px),
    #c99a5f;
  clip-path: polygon(
    4px 0, calc(100% - 4px) 0,
    calc(100% - 4px) 25%, 100% 25%, 100% 50%, calc(100% - 4px) 50%,
    calc(100% - 4px) 75%, 100% 75%, 100% 100%,
    0 100%,
    0 75%, 4px 75%, 4px 50%, 0 50%, 0 25%, 4px 25%);
}

.csx .csx-note p {
  color: #3a3326;
}

.csx .csx-section:has(> .csx-note) {
  padding-top: 14px;   /* room for the tape */
  filter: drop-shadow(6px 6px 0 #3c321e26);
}

/* a dashed rule between the two halves, centred on the note */
.csx .csx-note .csx-two {
  position: relative;
}

.csx .csx-note .csx-two > div + div {
  border-top: 2px dashed #c9a64f;
  padding-top: 20px;
}

@container (min-width: 560px) {
  .csx .csx-note .csx-two > div + div {
    border-top: 0;
    padding-top: 0;
  }

  .csx .csx-note .csx-two::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    border-left: 2px dashed #c9a64f;
    transform: translateX(-1px);
  }
}

/* ---- Embeds: Figma prototype, Heyzine magazine ----
   Each embed keeps its own shape (--rw / --rh, set in the HTML; phones can
   use --rw-phone / --rh-phone) and shrinks so it always fits on screen below
   the navbar. Iframes load lazily. Until a real link is pasted in,
   case-study.js shows a labelled placeholder box instead. */
.csx .csx-embed {
  --w: var(--rw, 16);
  --h: var(--rh, 9);
  margin: 0;
}

.csx .csx-embed-frame {
  --fit-h: calc(100svh - var(--header-h) - 150px);
  position: relative;
  width: min(100%, var(--fit-h) * var(--w) / var(--h));
  aspect-ratio: var(--w) / var(--h);
  margin-inline: auto;
  background: #e4e5e2;
  border: 1px solid #c6c8c6;
}

.csx .csx-embed-frame iframe {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.csx .csx-embed-placeholder {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 16px;
  color: #49534e;
  font-size: .95em;
  text-align: center;
}

/* "Open full screen" link: phones only */
.csx .csx-embed figcaption {
  display: none;
  padding-top: 12px;
  text-align: center;
}

.csx .csx-fullscreen {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--blue);
}

.csx .cs-source {
  margin: 0 0 clamp(40px, 5vw, 72px);
}

/* =====================================================================
   5 — BELOW 1024px
   ===================================================================== */
@media (max-width: 1023.98px) {
  .csx .csx-facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .csx .csx-body {
    margin-top: 40px;
  }
}

/* =====================================================================
   6 — PHONES (below 700px)
   Tighter spacing and smaller images. The final screens become a swipe
   carousel: the current screen is centred with its neighbours peeking in
   at both sides. Swipe, drag with a mouse, use the arrows or tap a dot.
   ===================================================================== */
@media (max-width: 699.98px) {
  .cs-page.csx {
    padding-top: 18px;
  }

  .csx .csx-hero h1 {
    font-size: clamp(2.4rem, 11vw, 3.2rem);
  }

  .csx .csx-facts {
    gap: 14px 20px;
    margin: 22px 0 18px;
    padding-block: 14px;
  }

  .csx .csx-facts dd {
    font-size: 1rem;
  }

  .csx .csx-section {
    padding-bottom: 44px;
  }

  .csx .csx-section h2 {
    font-size: 2rem;
  }

  .csx .csx-section h3 {
    font-size: 1.3rem;
  }

  .csx .csx-callout {
    margin-top: 22px;
    padding-left: 16px;
  }

  .csx .csx-lede {
    margin-bottom: 18px;
  }

  .csx .csx-step > summary {
    grid-template-columns: 32px minmax(0, 1fr) 16px;
    gap: 14px;
    padding: 16px 0;
  }

  .csx .csx-num {
    width: 32px;
    height: 32px;
    font-size: 1rem;
  }

  .csx .csx-step-body {
    gap: 16px;
    padding-bottom: 22px;
  }

  .csx .csx-step-body .cs-phone {
    width: min(60%, 200px);
  }

  .csx .cs-placeholder {
    padding: 12px;
  }

  .csx .cs-placeholder span {
    font-size: .9rem;
  }

  /* ---- Carousel ---- */
  .csx .csx-carousel {
    --slide-w: min(58vw, 230px);
  }

  .csx .csx-track {
    display: flex;
    gap: 18px;
    /* run to the screen edges, and pad so the first and last screens can centre */
    margin-inline: calc(-1 * var(--gutter));
    /* % is measured against the column, but the track is a gutter wider on
       each side, so add the gutter back to land screens in the true middle */
    padding: 6px calc(50% + var(--gutter) - var(--slide-w) / 2) 10px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    align-items: center;   /* mixed shapes (cover + spreads) line up on their middles */
    cursor: grab;
    -webkit-user-select: none;
    user-select: none;
  }

  .csx .csx-track::-webkit-scrollbar {
    display: none;
  }

  /* While dragging with a mouse, snapping waits until you let go. */
  .csx .csx-track.is-dragging {
    scroll-snap-type: none;
    cursor: grabbing;
  }

  .csx .csx-track:focus-visible {
    outline: 3px solid var(--blue);
    outline-offset: -3px;
  }

  /* Wide spreads get wider slides on phones. */
  .csx .csx-slide.cs-spread {
    --slide-w: min(84vw, 520px);
  }

  .csx .csx-slide {
    flex: 0 0 var(--slide-w);
    max-width: none;
    scroll-snap-align: center;
    opacity: .55;
    transform: scale(.94);
    transition: opacity .15s steps(2), transform .15s steps(2);
  }

  .csx .csx-slide.is-active {
    opacity: 1;
    transform: none;
  }

  .csx .csx-slide img,
  .csx .csx-slide .cs-placeholder {
    pointer-events: none;   /* so images don't get dragged out of the page */
  }

  .csx .csx-carousel-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 8px;
  }

  .csx .csx-dots {
    display: flex;
  }

  .csx .csx-dot,
  .csx .csx-arrow {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
  }

  /* Pixel squares: filled for the screen you're on */
  .csx .csx-dot::before {
    content: "";
    width: 11px;
    height: 11px;
    box-shadow: inset 0 0 0 2px #b9b4a2;
  }

  .csx .csx-dot[aria-current="true"]::before {
    background: var(--blue);
    box-shadow: inset 0 0 0 2px var(--blue);
  }

  /* Pixel arrows */
  .csx .csx-arrow span {
    width: 10px;
    height: 16px;
    background: var(--blue);
    clip-path: polygon(0 43.75%, 20% 43.75%, 20% 31.25%, 40% 31.25%, 40% 18.75%, 60% 18.75%, 60% 6.25%, 80% 6.25%, 80% 0, 100% 0, 100% 100%, 80% 100%, 80% 93.75%, 60% 93.75%, 60% 81.25%, 40% 81.25%, 40% 68.75%, 20% 68.75%, 20% 56.25%, 0 56.25%);
  }

  .csx .csx-arrow[data-dir="1"] span {
    transform: scaleX(-1);
  }

  .csx .csx-arrow:disabled {
    cursor: default;
  }

  .csx .csx-arrow:disabled span {
    background: #c9c4b2;
  }

  .csx .csx-dot:focus-visible,
  .csx .csx-arrow:focus-visible {
    outline: 3px solid var(--blue);
    outline-offset: -6px;
  }

  .csx .csx-decisions {
    margin-top: 26px;
  }

  .csx .csx-note {
    padding: 22px 20px;
  }

  .csx .csx-embed {
    --w: var(--rw-phone, var(--rw, 16));
    --h: var(--rh-phone, var(--rh, 9));
  }

  .csx .csx-embed-frame {
    --fit-h: calc(100svh - var(--header-h) - 110px);
  }

  .csx .csx-embed figcaption {
    display: block;
  }

  .csx .csx-embed.is-placeholder figcaption {
    display: none;
  }

  .csx .cs-back-top-wrap {
    padding-top: 40px;
  }
}

/* =====================================================================
   7 — REDUCED MOTION
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
  .csx .csx-toc,
  .csx .csx-toc.is-shown,
  .csx .csx-toc-list::after,
  .csx .csx-slide {
    transition: none;
  }
}


/* =====================================================================
   8 — REAL CONTENT PIECES (shared by the case studies)
   Images in figures, one phone frame for every app screen, before/after
   pairs, bullet points, and the information-architecture diagram.
   ===================================================================== */

/* Images inside figures fill their space. */
.csx .cs-visual > img {
  display: block;
  width: 100%;
  height: auto;
}

/* Wide images (tables, maps) sit under the text at full width. */
@container (min-width: 700px) {
  .csx .csx-step-body:has(> .csx-wide-figure, > .csx-ia),
  .csx .csx-step-body--wide,
  .csx .csx-step-body:not(:has(> :nth-child(2))) {
    grid-template-columns: minmax(0, 1fr);
  }
}

.csx .csx-wide-figure img {
  border: 1px solid var(--rule);
  background: #fff;
}

/* One phone frame for every screen, so old and new screenshots compare
   fairly whatever they were exported with. The frame is an iPhone mockup
   (assets/ua/phone-frame.webp, 1627 x 3356 at full size) with its screen cut
   out; each screenshot sits under it, filling the screen without being
   stretched (object-fit: cover; the screens are almost the same shape). */
.csx .csx-device {
  position: relative;
  display: block;
  aspect-ratio: 1627 / 3356;
  filter: drop-shadow(0 14px 16px #3c321e33);
}

.csx .csx-device img {
  position: absolute;
  left: 3.749%;
  top: 1.549%;
  display: block;
  width: 92.502%;
  height: 96.931%;
  object-fit: cover;
  object-position: top;
  background: #fff;
  /* the mockup's exact screen shape, a hair larger so the screenshot runs
     under the bezel with no gap at the corners */
  -webkit-mask: url("ua/phone-screen-mask.png") center / 100% 100% no-repeat;
  mask: url("ua/phone-screen-mask.png") center / 100% 100% no-repeat;
}

.csx .csx-device::after {
  content: "";
  position: absolute;
  inset: 0;
  background: url("ua/phone-frame.webp") center / 100% 100% no-repeat;
  pointer-events: none;
}

/* Two phones side by side: current and updated. */
.csx .csx-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(14px, 3cqi, 28px);
  width: min(100%, 460px);
  justify-self: center;
}

.csx .csx-pair figcaption,
.csx .csx-slide figcaption {
  text-align: center;
}

.csx .csx-pair figure:last-child figcaption {
  color: var(--blue);
  font-weight: 600;
}

/* Short bulleted findings. */
.csx .csx-points {
  margin: 0 0 1em;
  padding-left: 1.1em;
  max-width: var(--measure);
}

.csx .csx-points li {
  margin-bottom: .5em;
}

.csx .csx-points li::marker {
  color: var(--blue);
}

/* ---- Information architecture: before and after ---- */
.csx .csx-ia {
  display: grid;
  gap: 22px;
  margin: 0;
}

.csx .csx-ia-label {
  margin: 0 0 8px;
  color: var(--muted);
  font: 500 .85rem/1 Determination, 'Pixelify Sans', monospace;
}

.csx .csx-ia-tree.is-after .csx-ia-label {
  color: var(--blue);
}

.csx .csx-ia-tabs {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.csx .csx-ia-tab > span {
  display: block;
  padding: 7px 6px;
  border: 1px solid var(--rule);
  background: var(--card);
  font-size: .82rem;
  font-weight: 600;
  text-align: center;
}

.csx .csx-ia-tab.is-hl > span {
  border-color: var(--blue);
  background: var(--blue);
  color: #fff;
}

.csx .csx-ia-tab ul {
  display: grid;
  gap: 3px;
  margin: 6px 0 0 8px;
  padding: 0 0 0 9px;
  border-left: 1px solid var(--rule);
  list-style: none;
  color: #4a545a;
  font-size: .78rem;
  line-height: 1.35;
}

.csx .csx-ia-tab li.is-hl {
  color: var(--blue);
  font-weight: 600;
}

.csx .csx-ia figcaption {
  padding-top: 0;
}

@container (max-width: 559.98px) {
  .csx .csx-ia-tabs {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    row-gap: 14px;
  }
}

/* ---- Pixel sticky notes (research takeaways) ----
   Square paper with stepped pixel corners, a hard pixel shadow, a strip of
   pixel tape and a folded corner. Colours follow the original affinity map. */
.csx .csx-pxnotes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 26px 22px;
  margin: 16px 0 6px;   /* room for the tape above the first row */
  padding: 0;
  list-style: none;
  filter: drop-shadow(5px 5px 0 #3c321e26);   /* one hard shadow for every note */
}

@container (max-width: 699.98px) {
  .csx .csx-pxnotes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 16px; }
}

@container (max-width: 419.98px) {
  .csx .csx-pxnotes { grid-template-columns: minmax(0, 1fr); }
}

.csx .csx-pxnote {
  --paper: #fde193;
  --px: 4px;
  position: relative;
  isolation: isolate;          /* keeps the paper layer behind the text */
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 11.5rem;
  padding: 26px 18px 22px;
  color: #3a3326;
  font-family: Determination, 'Pixelify Sans', monospace;
}

/* The paper, drawn on its own layer so it can have stepped pixel corners
   and a folded corner without cutting off the tape. */
.csx .csx-pxnote::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(135deg, #3c321e2e 50%, #0000 50%) right bottom / 18px 18px no-repeat,
    var(--paper);
  clip-path: polygon(
    0 var(--px), var(--px) var(--px), var(--px) 0,
    calc(100% - var(--px)) 0, calc(100% - var(--px)) var(--px), 100% var(--px),
    100% calc(100% - 18px), calc(100% - 18px) 100%,
    var(--px) 100%, var(--px) calc(100% - var(--px)), 0 calc(100% - var(--px)));
}

.csx .csx-pxnote.is-yellow { --paper: #fde193; }
.csx .csx-pxnote.is-blue   { --paper: #aedbf9; }
.csx .csx-pxnote.is-pink   { --paper: #fbb3dd; }
.csx .csx-pxnote.is-green  { --paper: #b7eab9; }
.csx .csx-pxnote.is-salmon { --paper: #fbb7a9; }
.csx .csx-pxnote.is-slate  { --paper: #bac4d6; }

/* Brown pixel tape across the top, half on the note and half off it. */
.csx .csx-pxnote::after {
  content: "";
  position: absolute;
  top: -9px;
  left: 50%;
  width: 36%;
  height: 18px;
  transform: translateX(-50%);
  background:
    repeating-linear-gradient(90deg, #0000 0 8px, #8a613214 8px 10px),
    #c99a5f;
  /* pixel-stepped torn ends */
  clip-path: polygon(
    3px 0, calc(100% - 3px) 0,
    calc(100% - 3px) 25%, 100% 25%, 100% 50%, calc(100% - 3px) 50%,
    calc(100% - 3px) 75%, 100% 75%, 100% 100%,
    0 100%,
    0 75%, 3px 75%, 3px 50%, 0 50%, 0 25%, 3px 25%);
}

.csx .csx-pxnote p {
  margin: 0;
}

.csx .csx-pxnote-group {
  font-size: 1.05rem;
  letter-spacing: .02em;
  text-transform: uppercase;
}

.csx .csx-pxnote-from {
  margin-bottom: -4px !important;
  font-size: .82rem;
  opacity: .7;
  text-transform: uppercase;
}

.csx .csx-pxnote-key {
  align-self: flex-start;
  white-space: nowrap;
  padding: 3px 8px 4px;
  background: var(--blue);
  color: #fff;
  font-size: .82rem;
  clip-path: polygon(0 2px, 2px 2px, 2px 0, calc(100% - 2px) 0, calc(100% - 2px) 2px, 100% 2px,
                     100% calc(100% - 2px), calc(100% - 2px) calc(100% - 2px), calc(100% - 2px) 100%,
                     2px 100%, 2px calc(100% - 2px), 0 calc(100% - 2px));
}

.csx .csx-pxnote-text {
  font-size: 1rem;
  line-height: 1.4;
}

/* ---- The overall objective, as a framed statement ---- */
.csx .csx-objective {
  padding: clamp(16px, 2.5cqi, 24px) clamp(18px, 3cqi, 28px);
  border: 2px solid var(--blue);
  background: var(--card);
  box-shadow: 5px 5px 0 #2b4b9f26;
}

.csx .csx-objective-label {
  margin: 0 0 8px;
  color: var(--blue);
  font: 400 .95rem/1 Determination, 'Pixelify Sans', monospace;
  letter-spacing: .03em;
  text-transform: uppercase;
}

.csx .csx-objective-text {
  max-width: none;
  margin: 0;
  font-size: clamp(1.15rem, 1rem + .6cqi, 1.5rem);
  line-height: 1.45;
}

.csx .csx-objective-text strong {
  color: var(--blue);
  font-weight: 600;
}

.csx .csx-pxnote.is-key .csx-pxnote-group {
  font-size: 1.3rem;
}

/* Tools, with a small pixel icon (kept crisp when scaled) */
.csx .csx-facts dd.csx-tool {
  display: flex;
  align-items: center;
  gap: 10px;
}

.csx .csx-tool-icon {
  flex: none;
  width: 56px;
  height: 56px;
  margin: -6px 0 -10px -6px;   /* the icon has its own padding; keep the row height */
}

.csx .csx-facts dd.csx-tool {
  line-height: 1;   /* so "Figma" centres on the icon */
}

/* ---- Competitive analysis: a pixel score table ----
   Same colours as the original chart: green is strong (4 to 5, or a good
   rating), yellow is okay (3), red is weak (2 or below, or bad). Scores
   also show as five pixel squares. United's column is tinted blue.
   The table always fits its column (no sideways scrolling); as space gets
   tighter it switches to number chips, then upright airline names, then
   symbols for the word ratings. */
.csx .csx-comp {
  --g: #2f8a46;
  --y: #b58a00;
  --r: #c8402f;
  container-type: inline-size;
  width: 100%;
  max-width: 740px;
  margin: 0 auto;
}

.csx .csx-comp-box {
  border: 2px solid #1d2024;
  background: var(--card);
  box-shadow: 5px 5px 0 #3c321e26;
}

.csx .csx-comp table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  font-size: .88rem;
}

.csx .csx-comp col,
.csx .csx-comp th[scope="row"],
.csx .csx-comp thead th:first-child {
  width: 24%;
}

.csx .csx-comp th,
.csx .csx-comp td {
  padding: 9px 4px;
  border-bottom: 1px dashed #d6cfbd;
  text-align: center;
}

.csx .csx-comp tbody tr:last-child > * {
  border-bottom: 0;
}

/* airline names */
.csx .csx-comp thead th {
  padding-block: 12px 10px;
  border-bottom: 2px solid #1d2024;
  color: #3a3326;
  font: 400 .8rem/1 Determination, 'Pixelify Sans', monospace;
  white-space: nowrap;
}

.csx .csx-comp thead th.is-us {
  background: var(--blue);
  color: #fff;
}

/* feature names */
.csx .csx-comp th[scope="row"] {
  padding-left: 12px;
  text-align: left;
  font-weight: 600;
  line-height: 1.25;
  box-shadow: inset -1px 0 0 #d6cfbd;
}

/* "Scored out of 5" / "Rated" */
.csx .csx-comp-group th {
  padding: 12px 12px 4px;
  border-bottom: 0;
  color: var(--blue);
  font: 400 .85rem/1 Determination, 'Pixelify Sans', monospace;
  text-align: left;
  text-transform: uppercase;
  letter-spacing: .04em;
}

/* United's column */
.csx .csx-comp td.is-us {
  background: #3763991a;
}

/* colours */
.csx .csx-comp .is-g { --c: var(--g); }
.csx .csx-comp .is-y { --c: var(--y); }
.csx .csx-comp .is-r { --c: var(--r); }

.csx .csx-comp td {
  color: var(--c);
  font-weight: 600;
}

/* a score: five pixel squares, then the number */
.csx .csx-comp td:has(.csx-meter) {
  font: 400 .95rem/1 Determination, 'Pixelify Sans', monospace;
  white-space: nowrap;
}

.csx .csx-meter {
  --sq: 6px;
  --gap: 2px;
  --step: calc(var(--sq) + var(--gap));
  display: inline-block;
  width: calc(5 * var(--step) - var(--gap));
  height: var(--sq);
  margin-right: 6px;
  vertical-align: 1px;
  background:
    repeating-linear-gradient(90deg, var(--c) 0 var(--sq), #0000 var(--sq) var(--step))
      left / calc(var(--v) * var(--step) - var(--gap)) 100% no-repeat,
    repeating-linear-gradient(90deg, #ddd6c4 0 var(--sq), #0000 var(--sq) var(--step));
}

.csx .csx-comp-sym {
  display: none;
}

/* the colour key in the caption */
.csx .csx-comp-key .is-g,
.csx .csx-comp-key .is-y,
.csx .csx-comp-key .is-r {
  color: var(--c);
  font-weight: 600;
}

/* Tighter: number chips instead of squares. */
@container (max-width: 639.98px) {
  .csx .csx-meter { display: none; }

  .csx .csx-comp .csx-comp-num {
    display: inline-grid;
    place-items: center;
    width: 22px;
    height: 22px;
    padding-top: 1px;
    background: var(--c);
    color: #fff;
    clip-path: polygon(0 2px, 2px 2px, 2px 0, calc(100% - 2px) 0, calc(100% - 2px) 2px, 100% 2px,
      100% calc(100% - 2px), calc(100% - 2px) calc(100% - 2px), calc(100% - 2px) 100%,
      2px 100%, 2px calc(100% - 2px), 0 calc(100% - 2px));
  }

  .csx .csx-comp td { font-size: .78rem; }
  .csx .csx-comp th[scope="row"] { font-size: .8rem; padding-left: 8px; }
}

/* Tighter still: airline names stand upright. */
@container (max-width: 559.98px) {
  .csx .csx-comp thead th {
    height: 6.6em;
    padding: 8px 0;
    vertical-align: bottom;
    font-size: .82rem;
  }

  .csx .csx-comp thead th > span {
    display: inline-block;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
  }

  .csx .csx-comp th[scope="row"],
  .csx .csx-comp thead th:first-child { width: 30%; }
}

/* Phones: the word ratings become symbols in the same colours. */
@container (max-width: 599.98px) {
  .csx .csx-comp-word { display: none; }

  .csx .csx-comp-sym {
    display: inline-grid;
    place-items: center;
    width: 22px;
    height: 22px;
    background: var(--c);
    color: #fff;
    font: 700 .8rem/1 system-ui, sans-serif;
    clip-path: polygon(0 2px, 2px 2px, 2px 0, calc(100% - 2px) 0, calc(100% - 2px) 2px, 100% 2px,
      100% calc(100% - 2px), calc(100% - 2px) calc(100% - 2px), calc(100% - 2px) 100%,
      2px 100%, 2px calc(100% - 2px), 0 calc(100% - 2px));
  }

  .csx .csx-comp thead th,
  .csx .csx-comp td { padding-inline: 2px; }

}

@container (max-width: 419.98px) {
  .csx .csx-comp .csx-comp-num,
  .csx .csx-comp-sym { width: 20px; height: 20px; }

  .csx .csx-comp th[scope="row"],
  .csx .csx-comp thead th:first-child { width: 34%; }

  .csx .csx-comp th[scope="row"] { font-size: .74rem; padding-left: 6px; }
  .csx .csx-comp-group th { padding-left: 6px; }
}

@container (min-width: 600px) {
  .csx .csx-comp-symnote { display: none; }
}

/* Before & after: heading and intro centred over the centred stage. */
.csx .ba-section > h2,
.csx .ba-section > .csx-lede {
  margin-inline: auto;
  text-align: center;
}

/* a lede kept to one line on wider screens */
.csx .csx-lede--one {
  max-width: none;
}

.csx .csx-note > h2 {
  text-align: center;
}

/* ---- Competitive table: an "overall" total row ---- */
.csx .csx-comp tr.csx-comp-total > * {
  border-top: 2px solid #1d2024;
  border-bottom: 0;
}

.csx .csx-comp tr.csx-comp-total th {
  font-weight: 700;
}

/* ---- Big numbers from research, as pixel cards ---- */
.csx .csx-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
  gap: 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.csx .csx-stat {
  --px: 3px;
  padding: 18px 18px 16px;
  background: var(--card);
  box-shadow: inset 0 0 0 var(--px) var(--blue), 5px 5px 0 #3c321e26;   /* blue border */
}

.csx .csx-stat-num {
  margin: 0 0 8px;
  color: var(--blue);
  font: 400 clamp(1.9rem, 1.5rem + 1.2vw, 2.6rem)/1 Determination, 'Pixelify Sans', monospace;
}

.csx .csx-stat-text {
  margin: 0;
  font-size: .95rem;
  line-height: 1.45;
}

/* ---- Concept options, with the chosen one marked ---- */
.csx .csx-concepts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.csx .csx-concept {
  position: relative;
  padding: 18px;
  background: var(--card);
  box-shadow: inset 0 0 0 2px #d6cfbd;
}

.csx .csx-concept h4 {
  margin: 0 0 8px;
  font-size: 1.05rem;
}

.csx .csx-concept p {
  margin: 0;
  font-size: .92rem;
  line-height: 1.45;
}

.csx .csx-concept.is-chosen {
  box-shadow: inset 0 0 0 3px var(--blue), 5px 5px 0 #3c321e26;
}

.csx .csx-concept-badge {
  display: inline-block;
  margin-bottom: 10px;
  padding: 5px 9px 3px;
  background: var(--blue);
  color: #fff;
  font: 400 .85rem/1 Determination, 'Pixelify Sans', monospace;
}

/* An IA with four tabs (Cura): four columns, two on narrow screens. */
.csx .csx-ia--four .csx-ia-tabs {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

@container (max-width: 559.98px) {
  .csx .csx-ia--four .csx-ia-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@container (max-width: 459.98px) {
  .csx .csx-concepts { grid-template-columns: minmax(0, 1fr); }
}

.csx .csx-step-copy--center {
  text-align: center;
}

.csx .csx-step-copy--center p {
  margin-inline: auto;
}

/* Four phones in a row (mid-fi sketches); two by two on narrow screens. */
.csx .csx-quad {
  margin: 0;
}

.csx .csx-quad-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(12px, 2.5cqi, 24px);
  margin-bottom: 12px;
}

.csx .csx-quad-row figure {
  margin: 0;
}

.csx .csx-quad-row figcaption {
  padding-top: 8px;
  color: #59645d;
  font: 400 .95rem/1.2 Determination, 'Pixelify Sans', monospace;
  text-align: center;
}

@container (max-width: 559.98px) {
  .csx .csx-quad-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 18px;
  }
}

/* A small key beside the "After" label: a blue pixel square = new tab. */
.csx .csx-ia-label:has(.csx-ia-key) {
  display: flex;
  align-items: baseline;
  gap: 16px;
}

.csx .csx-ia-key {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  color: #59645d;
  font: inherit;   /* same size and line as "After", so the two sit level */
}

.csx .csx-ia-swatch {
  width: .7em;
  height: .7em;
  background: var(--blue);
}

/* ---- Design variations side by side (Yelp map A/B test) ---- */
.csx .csx-variants {
  margin: 0;
}

/* Big screens: the row steps out of the text column (centred on it, clear
   of the section rail) so the five phones have room to breathe. */
@media (min-width: 1024px) {
  .csx .csx-variants {
    --var-w: min(1120px, 100vw - 2 * (var(--rail-left) + var(--rail-w) + 40px));
    width: max(100%, var(--var-w));
    margin-left: min(0px, (100% - var(--var-w)) / 2);
  }
}

.csx .csx-variants-row {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 32px clamp(16px, 3.2cqi, 40px);
  margin: 0 0 12px;
  padding: 0;
  list-style: none;
}

.csx .csx-variant {
  display: grid;
  align-content: start;
  gap: 12px;
}

.csx .csx-variant-name {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 4px 0 0;
  color: var(--blue);
  font: 400 1rem/1.15 Determination, 'Pixelify Sans', monospace;
}

.csx .csx-variant-name .csx-concept-badge {
  margin: 0;
  font-size: .75rem;
}

.csx .csx-variant-text {
  margin: 0;
  font-size: .85rem;
  line-height: 1.4;
}

.csx .csx-variant:not(.is-chosen) .csx-device {
  opacity: .82;
}

@container (max-width: 699.98px) {
  .csx .csx-variants-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@container (max-width: 459.98px) {
  .csx .csx-variants-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* each name and description centred under its phone */
.csx .csx-variant {
  text-align: center;
}

.csx .csx-variant-name {
  justify-content: center;
}

/* Smaller screens: phones wrap onto rows, and a short last row is centred. */
@container (max-width: 699.98px) {
  .csx .csx-variants-row {
    --n: 3;
    --gap: clamp(16px, 3.2cqi, 40px);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    column-gap: var(--gap);
  }

  .csx .csx-variant {
    width: calc((100% - (var(--n) - 1) * var(--gap)) / var(--n));
  }
}

@container (max-width: 459.98px) {
  .csx .csx-variants-row { --n: 2; }
}

/* Final Design decisions: each centred in its half */
.csx .csx-decisions > div {
  text-align: center;
}

.csx .csx-decisions > div p {
  margin-inline: auto;
}

/* captions under the IA diagram and the A/B row, centred */
.csx .csx-ia > figcaption,
.csx .csx-variants > figcaption {
  text-align: center;
}

/* Final Design decisions: headings share a row and the text starts level,
   even when one heading wraps */
@container (min-width: 560px) {
  .csx .csx-decisions {
    grid-template-rows: auto auto;
  }

  .csx .csx-decisions > div {
    display: grid;
    grid-row: span 2;
    grid-template-rows: subgrid;
    align-items: end;
  }

  .csx .csx-decisions > div > p {
    align-self: start;
  }
}

/* copy that sits on its own between wide pieces (e.g. the personas line) */
.csx .csx-step-body--wide > .csx-step-copy:not(:first-child) {
  text-align: center;
}

.csx .csx-step-body--wide > .csx-step-copy:not(:first-child) p {
  margin-inline: auto;
}

/* competitive table: centred, with its caption centred too */
.csx .csx-comp {
  justify-self: center;
}

.csx .csx-comp > figcaption {
  text-align: center;
}

/* Wide steps indent their contents under the step title; nudge the table
   back by half that indent so it sits in the middle of the whole step. */
@container (min-width: 700px) {
  .csx .csx-step-body > .csx-comp {
    position: relative;
    left: -1.8em;
  }
}