/* Case study pages — design tokens match index.html; do not redefine palette elsewhere */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --fog:    #e8e9eb;
  --ash:    #c4c6cb;
  --slate:  #8a8d96;
  --iron:   #3a3c42;
  --void:   #12131a;
  --accent: #6ecfbd;
  --warm:   #c47b6c;
  --mono:   'DM Mono', monospace;
  --serif:  'Cormorant Garamond', serif;
}
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}
html, body {
  min-height: 100%;
  background: var(--void);
  color: var(--fog);
  font-family: var(--mono);
  font-weight: 300;
  overflow-x: hidden;
  cursor: default;
}
body::before {
  content: ''; position: fixed; inset: 0; z-index: 1;
  background-image:
    repeating-linear-gradient(0deg, rgba(255,255,255,0.028) 0, transparent 1px, transparent 3px),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.028) 0, transparent 1px, transparent 3px);
  background-size: 4px 4px;
  pointer-events: none;
  opacity: .45;
}
@media (prefers-reduced-motion: reduce) {
  body::before { opacity: 0; visibility: hidden; }
}

/* ── Fixed nav ───────────────────────────────────────────── */
.cs-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 2.5rem 3rem;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: border-color 0.35s ease, background 0.35s ease;
}
.cs-nav.is-scrolled {
  border-bottom-color: var(--iron);
  background: rgba(18, 19, 26, 0.92);
}
.cs-nav__name {
  font-family: var(--serif);
  font-size: 1.2rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  color: var(--fog);
  text-decoration: none;
  transition: color 0.3s ease;
}
.cs-nav__name:hover { color: var(--accent); }
.cs-nav__back {
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--slate);
  text-decoration: none;
  transition: color 0.35s ease;
  position: relative;
}
.cs-nav__back::after {
  content: '';
  position: absolute;
  bottom: -3px;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--accent);
  transition: width 0.4s ease;
}
.cs-nav__back:hover {
  color: var(--fog);
}
.cs-nav__back:hover::after { width: 100%; }

/* ── Hero ────────────────────────────────────────────────── */
.cs-hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  overflow: hidden;
}
.cs-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-size: cover;
  background-position: center center;
  opacity: 0.22;
  mix-blend-mode: luminosity;
  filter: grayscale(30%) contrast(1.05);
  pointer-events: none;
}
/* Resolv: no photo texture layer (avoids thumb text showing through the grid) */
.cs-hero--resolv .cs-hero__bg {
  display: none;
}
.cs-hero__vignette {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(ellipse at center, transparent 25%, rgba(18, 19, 26, 0.72) 100%),
    linear-gradient(to top, rgba(18, 19, 26, 0.98) 0%, rgba(18, 19, 26, 0.2) 42%, transparent 65%);
}
.cs-hero__inner {
  position: relative;
  z-index: 2;
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  min-height: 100vh;
  padding: 0;
  max-width: 100%;
}
.cs-hero__copy {
  padding: 8rem 3rem 6rem 5%;
  display: flex;
  flex-direction: column;
  position: relative;
}
.cs-hero__stage {
  position: relative;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5%;
  overflow: hidden;
  container-type: inline-size;
}
/* Single-image hero: avoid container-query sizing quirks + keep stage visually void, not “paper white” */
.cs-hero__stage--spotlight {
  container-type: normal;
  background: transparent;
  /* Pin mock to bottom; overflow clips so bottom ~20% can sit past the fold */
  align-items: flex-end;
}
.cs-hero__stage::after {
  content: '';
  position: absolute;
  right: 0;
  top: 0;
  width: 22%;
  height: 100%;
  background: linear-gradient(to left, var(--void) 0%, transparent 100%);
  z-index: 4;
  pointer-events: none;
}

/* Don’t stack this vignette over the phone mockups (it shaded the right / solve device). */
.cs-hero__stage:has(.cs-hero__devices)::after,
.cs-hero__stage:has(.cs-hero__spotlight)::after,
.cs-hero__stage--spotlight::after {
  display: none;
}

/* Single composite hero (e.g. Resolv) — tall PNG scaled to the stage */
.cs-hero__spotlight {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: 100%;
  max-width: 100%;
  margin: 0;
  line-height: 0;
}
.cs-page-ready .cs-hero__spotlight-frame {
  /* Match cs-fadeUp: opacity + translateY(20px), keep Resolv baseline translateY(20%) */
  animation: cs-spotlightRise 1s ease 0.35s forwards;
}
/* Wrapper avoids filter-on-<img> bugs (blank/white tiles in WebKit / some previews) */
.cs-hero__spotlight-frame {
  position: relative;
  line-height: 0;
  border-radius: 2px;
  box-shadow:
    0 22px 48px rgba(0, 0, 0, 0.55),
    0 8px 20px rgba(0, 0, 0, 0.4);
}
/* Resolv only — large mock; frame uses translateY(20%) so bottom 20% is clipped by .cs-hero__stage */
.cs-hero__stage--spotlight .cs-hero__spotlight-frame {
  opacity: 0;
  transform: translateY(20%) translateY(20px);
}
.cs-hero__stage--spotlight .cs-hero__spotlight img {
  display: block;
  width: auto;
  max-width: min(100%, min(850px, 68vw));
  height: auto;
  max-height: min(90vh, 1000px);
  object-fit: contain;
  object-position: bottom center;
}

/* Resolv hero — chat bubbles sit in the phone’s blank feed (between header + composer), product colors */
.cs-hero-chat {
  --cs-chat-user: #ebe4f9;
  --cs-chat-partner: #e8e3df;
  --cs-chat-ai: linear-gradient(135deg, rgba(245, 213, 203, 0.25), rgba(232, 223, 245, 0.25));
  --cs-chat-meta: #8e8e93;
  position: absolute;
  z-index: 3;
  pointer-events: none;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  /* Inset from resolv_hero.png: start below status bar + session header (avoid overlap with title / End Session) */
  left: 6.25%;
  right: 6.25%;
  top: 19.5%;
  bottom: 12%;
  width: auto;
  max-width: none;
  padding: 0;
  font-family: 'Satoshi', system-ui, sans-serif;
}
.cs-hero-chat__stack {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  width: 100%;
  min-height: 0;
  /* Nudge conversation toward screen center (away from bezel) */
  padding: 0 clamp(10px, 2.4vw, 14px);
  box-sizing: border-box;
}
.cs-hero-chat__row {
  opacity: 0;
  transform: translateY(10px);
  width: 100%;
}
.cs-hero-chat__row.is-enter {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.175s ease-out, transform 0.175s ease-out;
}
.cs-hero-chat__row.is-enter.is-exiting {
  opacity: 0;
  transform: translateY(0);
  transition: opacity 0.45s ease;
}
.cs-hero-chat__row-inner {
  display: flex;
  align-items: flex-end;
  gap: 0.45rem;
  max-width: 100%;
}
/* row-reverse: main-start is on the right — flex-start keeps avatar + bubble aligned to the right edge */
.cs-hero-chat__row--user .cs-hero-chat__row-inner {
  flex-direction: row-reverse;
  margin-left: auto;
  width: 100%;
  max-width: 100%;
  justify-content: flex-start;
}
.cs-hero-chat__avatar {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 0.74rem;
  color: #4a3f52;
}
.cs-hero-chat__avatar--ai {
  background: linear-gradient(145deg, #f0c4b8, #d9c8ef);
}
.cs-hero-chat__col {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
}
.cs-hero-chat__row--user .cs-hero-chat__col {
  align-items: flex-end;
}
.cs-hero-chat__meta {
  font-size: clamp(0.58rem, 1.15vw, 0.68rem);
  font-weight: 400;
  color: var(--cs-chat-meta);
  letter-spacing: 0.01em;
  margin-bottom: 0.3rem;
  opacity: 0;
  line-height: 1.2;
}
.cs-hero-chat__meta--stamp {
  align-self: flex-end;
  text-align: right;
  width: 100%;
}
.cs-hero-chat__row.is-message .cs-hero-chat__meta {
  opacity: 1;
  transition: opacity 0.35s ease 0.05s;
}
.cs-hero-chat__typing {
  display: none;
  align-items: center;
  justify-content: flex-start;
  gap: 4px;
  min-height: 38px;
  padding: 0.5rem 0.75rem;
}
.cs-hero-chat__row.is-typing:not(.is-message) .cs-hero-chat__typing {
  display: flex;
}
.cs-hero-chat__row .cs-hero-chat__bubble:not(.cs-hero-chat__typing) {
  display: none;
}
.cs-hero-chat__row.is-message .cs-hero-chat__typing {
  display: none !important;
}
.cs-hero-chat__row.is-message .cs-hero-chat__bubble:not(.cs-hero-chat__typing) {
  display: block;
  animation: cs-hero-msg-in 0.4s ease forwards;
}
.cs-hero-chat__bubble {
  position: relative;
  font-size: clamp(0.62rem, 1.25vw, 0.74rem);
  font-weight: 400;
  line-height: 1.5;
  color: #2d2d2d;
  padding: 0.5rem 0.72rem;
  max-width: min(100%, 92%);
}
.cs-hero-chat__row--user .cs-hero-chat__bubble:not(.cs-hero-chat__typing),
.cs-hero-chat__row--user .cs-hero-chat__typing {
  max-width: min(100%, 88%);
}
.cs-hero-chat__bubble--user {
  border-radius: 18px 18px 4px 18px;
  background: var(--cs-chat-user);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04);
}
.cs-hero-chat__bubble--partner {
  border-radius: 18px 18px 18px 6px;
  background: var(--cs-chat-partner);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.03);
}
.cs-hero-chat__bubble--ai {
  border-radius: 18px 18px 18px 6px;
  background: var(--cs-chat-ai);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.03);
}
.cs-hero-chat__bubble p + p {
  margin-top: 0.5rem;
}
.cs-hero-chat__dot {
  display: block;
  flex: 0 0 6px;
  width: 6px;
  height: 6px;
  min-width: 6px;
  min-height: 6px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #999;
  opacity: 0;
  align-self: center;
  box-sizing: border-box;
}
.cs-hero-chat__row.is-typing .cs-hero-chat__dot {
  opacity: 1;
  animation: cs-hero-dot-bounce 0.6s ease-in-out infinite;
}
.cs-hero-chat__row.is-typing .cs-hero-chat__dot:nth-child(2) {
  animation-delay: 0.15s;
}
.cs-hero-chat__row.is-typing .cs-hero-chat__dot:nth-child(3) {
  animation-delay: 0.3s;
}
.cs-hero-chat__tail {
  position: absolute;
  width: 0;
  height: 0;
  bottom: -0.5px;
}
.cs-hero-chat__tail--user {
  right: -7px;
  border-left: 9px solid var(--cs-bubble-fill, var(--cs-chat-user));
  border-top: 11px solid transparent;
}
.cs-hero-chat__tail--partner {
  left: -7px;
  border-right: 9px solid var(--cs-bubble-fill, var(--cs-chat-partner));
  border-top: 11px solid transparent;
}
.cs-hero-chat__bubble--ai .cs-hero-chat__tail-svg,
.cs-hero-chat__typing.cs-hero-chat__bubble--ai .cs-hero-chat__tail-svg {
  position: absolute;
  left: -11px;
  bottom: -0.5px;
  transform: scaleY(-1);
}
@keyframes cs-hero-msg-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes cs-hero-dot-bounce {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(0, -6px, 0); }
}
/* Reduced motion: show final transcript only */
.cs-hero-chat--static .cs-hero-chat__row {
  opacity: 1;
  transform: none;
}
.cs-hero-chat--static .cs-hero-chat__typing {
  display: none !important;
}
.cs-hero-chat--static .cs-hero-chat__row .cs-hero-chat__bubble:not(.cs-hero-chat__typing) {
  display: block;
  animation: none;
}
.cs-hero-chat--static .cs-hero-chat__meta {
  opacity: 1;
}
@media (max-width: 700px) {
  .cs-hero-chat {
    left: 5.5%;
    right: 5.5%;
    top: 17.5%;
    bottom: 12.5%;
  }
  .cs-hero-chat__bubble {
    font-size: clamp(0.56rem, 2.8vw, 0.68rem);
  }
  .cs-hero-chat__stack {
    gap: 0.5rem;
  }
}
.cs-hero__eyebrow {
  font-size: 0.62rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 1rem;
  display: block;
  opacity: 0;
}
.cs-page-ready .cs-hero__eyebrow {
  animation: cs-fadeUp 1s ease 0.1s forwards;
}
.cs-hero__title {
  font-family: var(--serif);
  font-size: clamp(2.4rem, 5.2vw, 4.25rem);
  font-weight: 300;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--fog);
  opacity: 0;
}
.cs-page-ready .cs-hero__title {
  animation: cs-fadeUp 1.15s ease 0.2s forwards;
}
.cs-hero__title em {
  display: block;
  font-style: italic;
  color: var(--slate);
  font-size: 0.5em;
  margin-top: 0.4em;
  font-weight: 300;
}
.cs-hero__tagline {
  margin-top: 1.25rem;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: var(--slate);
  max-width: 52ch;
  line-height: 1.85;
  opacity: 0;
}
.cs-page-ready .cs-hero__tagline {
  animation: cs-fadeUp 1s ease 0.35s forwards;
}

/* Hero phones: full-device PNGs (hub, free_text, solve) — frame/chrome baked into assets.
   Center stacked on top (z-index); desktop mq matches all three widths + overlap. */
.cs-hero__devices {
  --cs-phone-base: 148px;
  --cs-phone-side: 162px;
  --cs-phone-center: 186px; /* mobile: slightly larger focal; desktop mq sets equal to side */
  --cs-shift: 46px; /* overlap inset — paired with keyframes */
  --cs-layout-overlap: 0; /* flex row pull-in (desktop); keeps larger phones inside the stage */
  --cs-tilt-side: 7deg; /* flanking phones fan slightly L/R */
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 0;
  margin-top: 0;
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.cs-device {
  --cs-inner-w: var(--cs-phone-base);
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
}

.cs-device__asset {
  width: fit-content;
  margin: 0 auto;
  line-height: 0;
  filter: drop-shadow(0 22px 48px rgba(0, 0, 0, 0.5)) drop-shadow(0 8px 20px rgba(0, 0, 0, 0.35));
}

/* Same drop stack as center — avoid brightness/contrast on PNGs (washes midtones / reads “white”). */
.cs-hero__devices .cs-device:nth-child(1) .cs-device__asset,
.cs-hero__devices .cs-device:nth-child(3) .cs-device__asset {
  filter: drop-shadow(0 22px 48px rgba(0, 0, 0, 0.5)) drop-shadow(0 8px 20px rgba(0, 0, 0, 0.35));
}

.cs-device__asset img {
  display: block;
  width: var(--cs-inner-w);
  height: auto;
}

/* LEFT — Hub */
.cs-device:nth-child(1) {
  --cs-inner-w: var(--cs-phone-side);
  transform: translate(var(--cs-shift), 0) rotateZ(calc(-1 * var(--cs-tilt-side)));
  transform-origin: 50% 100%;
  z-index: 1;
}

/* CENTER — Free text (foreground; same width as wings on desktop) */
.cs-device--center {
  --cs-inner-w: var(--cs-phone-center);
  transform: none;
  z-index: 3;
}

/* RIGHT — Solve */
.cs-device:nth-child(3) {
  --cs-inner-w: var(--cs-phone-side);
  transform: translate(calc(-1 * var(--cs-shift)), 0) rotateZ(var(--cs-tilt-side));
  transform-origin: 50% 100%;
  z-index: 1;
}

/* Pull 2nd + 3rd devices left so flex layout width matches visual overlap (full PNG widths stay large without clipping). */
.cs-hero__devices .cs-device:nth-child(2),
.cs-hero__devices .cs-device:nth-child(3) {
  margin-left: calc(-1 * var(--cs-layout-overlap));
}

.cs-hero__meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2rem 2.5rem;
  margin-top: 2.75rem;
  max-width: 720px;
  opacity: 0;
}
.cs-page-ready .cs-hero__meta {
  animation: cs-fadeUp 1s ease 0.45s forwards;
}
.cs-hero__meta-col {
  min-width: 0;
}
.cs-hero__meta-label {
  font-size: 0.52rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--slate);
  margin-bottom: 0.5rem;
}
.cs-hero__meta-value {
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  line-height: 1.55;
  color: var(--ash);
}
.cs-page-ready .cs-device:nth-child(1) {
  animation: cs-riseLeft 1.1s cubic-bezier(0.22, 1, 0.36, 1) 0.55s both;
}
.cs-page-ready .cs-device--center {
  animation: cs-riseCenter 1.2s cubic-bezier(0.22, 1, 0.36, 1) 0.38s both;
}
.cs-page-ready .cs-device:nth-child(3) {
  animation: cs-riseRight 1.1s cubic-bezier(0.22, 1, 0.36, 1) 0.68s both;
}
@media (prefers-reduced-motion: reduce) {
  .cs-hero__eyebrow,
  .cs-hero__title,
  .cs-hero__tagline,
  .cs-hero__meta {
    animation: none !important;
    opacity: 1 !important;
  }
  .cs-device:nth-child(1),
  .cs-device--center,
  .cs-device:nth-child(3) {
    animation: none !important;
  }
  .cs-hero__spotlight-frame {
    animation: none !important;
    opacity: 1 !important;
    transform: translateY(20%) !important;
  }
}

/* Two-column hero: hub / center / solve share one width; overlap + shift keep the row inside the stage. */
@media (min-width: 701px) {
  .cs-hero__stage:has(.cs-hero__devices),
  .cs-hero__stage:has(.cs-hero__spotlight),
  .cs-hero__stage--spotlight {
    padding-left: clamp(0.6rem, 2vw, 1.5rem);
    padding-right: clamp(0.6rem, 1.75vw, 1.35rem);
    padding-top: 5%;
    padding-bottom: 5%;
  }

  .cs-hero__devices {
    --cs-phone-side: clamp(168px, 13.85vw, 278px);
    --cs-phone-center: var(--cs-phone-side);
    --cs-shift: 0px;
    --cs-layout-overlap: clamp(32px, 3.85vw, 58px);
    --cs-tilt-side: 7deg;
  }
}

@media (min-width: 1200px) {
  .cs-hero__devices {
    --cs-phone-side: clamp(178px, 14.15vw, 292px);
    --cs-phone-center: var(--cs-phone-side);
    --cs-shift: 0px;
    --cs-layout-overlap: clamp(36px, 4.1vw, 66px);
  }
}

/* ── Scroll-reveal sections (same pattern as index .block-section) ── */
.cs-main {
  position: relative;
  z-index: 2;
}
.cs-section {
  position: relative;
  padding: 6rem 3rem;
}
.cs-section--fullbleed {
  padding-left: 0;
  padding-right: 0;
}
/* Fullbleed + label column: restore horizontal inset so sticky label aligns with other sections */
.cs-section--fullbleed:has(> .cs-grid) {
  padding-left: 3rem;
  padding-right: 3rem;
}
.cs-section-inner {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 1.15s ease,
    transform 1.15s ease;
  transition-delay: 0s;
}
.cs-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: 1px;
  width: 0;
  background: var(--iron);
  transition: width 1.45s cubic-bezier(0.16, 1, 0.3, 1) 0.08s;
}
.cs-section.is-visible .cs-section-inner {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.22s;
}
.cs-section.is-visible .cs-section-inner--label {
  transition-delay: 0.16s;
}
.cs-section.is-visible .cs-section-inner--body {
  transition-delay: 0.34s;
}
.cs-section.is-visible::before {
  width: 100%;
}
@media (prefers-reduced-motion: reduce) {
  .cs-section-inner {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .cs-section::before {
    width: 100%;
    transition: none;
  }
}

/* Two-column: sticky label + body */
.cs-grid {
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr);
  gap: 2.5rem 3rem;
  align-items: start;
}
/* Resolv — Why I built this: same pattern as channel-matrix (copy | pull in .cs-problem-split) */
.cs-why-built .cs-problem__copy {
  padding-left: 0;
  padding-right: 1rem;
}
.cs-why-built .cs-problem__visual .cs-insight__quote {
  max-width: none;
  margin: 0;
}
/* Resolv — Built and shipped: headline + CTA + quote | App Store mock (column tops aligned) */
.cs-built-shipped__layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem 3rem;
  align-items: start;
  width: 100%;
}
.cs-built-shipped__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
}
.cs-built-shipped__title {
  max-width: none;
}
.cs-built-shipped__copy .cs-cta {
  margin-bottom: 1.5rem;
}
.cs-built-shipped__copy .cs-insight__quote {
  max-width: none;
  margin: 0;
}
/* Same phone-mock scale as .cs-designed-split .cs-designed__figure-frame img */
.cs-built-shipped__visual .cs-designed__figure {
  min-width: 0;
  justify-self: center;
  width: 100%;
  max-width: 100%;
  margin: 0;
}
.cs-built-shipped__visual .cs-designed__figure-frame {
  aspect-ratio: auto;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  width: 100%;
  max-width: 100%;
  margin-inline: auto;
}
.cs-built-shipped__visual .cs-designed__figure-frame img {
  display: block;
  width: auto;
  max-width: min(100%, min(850px, 68vw));
  height: auto;
  max-height: min(90vh, 1000px);
  object-fit: contain;
  object-position: top center;
}
.cs-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.85rem 1.35rem;
  border: 1px solid var(--iron);
  border-radius: 8px;
  font-size: 0.58rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--fog);
  background: rgba(26, 28, 36, 0.35);
  transition:
    color 0.35s ease,
    border-color 0.35s ease,
    background 0.35s ease;
}
.cs-cta:hover,
.cs-cta:focus-visible {
  color: var(--accent);
  border-color: rgba(110, 207, 189, 0.55);
  background: rgba(110, 207, 189, 0.06);
}
.cs-cta:focus-visible {
  outline: 1px solid var(--accent);
  outline-offset: 3px;
}
.cs-cta__arrow {
  font-size: 0.85rem;
  line-height: 1;
  transition: transform 0.35s ease;
}
.cs-cta:hover .cs-cta__arrow,
.cs-cta:focus-visible .cs-cta__arrow {
  transform: translate(2px, -2px);
}
@media (prefers-reduced-motion: reduce) {
  .cs-cta,
  .cs-cta__arrow {
    transition: none;
  }
}
/* Resolv — What I designed: headline, then rows of copy | figure (flat grid placed text in wrong columns) */
.cs-designed-split {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  width: 100%;
}
.cs-designed-split__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem 3rem;
  align-items: start;
  width: 100%;
}
.cs-designed-split > .cs-designed__serif-title {
  max-width: none;
  width: 100%;
  box-sizing: border-box;
  padding-left: 0;
  padding-right: 0;
  align-self: stretch;
}
.cs-designed-split .cs-designed-split__row .cs-process__step {
  padding: 0 1rem 0 0;
  border-top: none;
  border-bottom: none;
}
.cs-designed-split .cs-designed-split__row .cs-designed__figure {
  min-width: 0;
  justify-self: center;
  width: 100%;
  max-width: 100%;
}
/* Phone mocks: same scale as .cs-hero__stage--spotlight .cs-hero__spotlight img */
.cs-designed-split .cs-designed__figure-frame {
  aspect-ratio: auto;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  width: 100%;
  max-width: 100%;
  margin-inline: auto;
}
.cs-designed-split .cs-designed__figure-frame img {
  display: block;
  width: auto;
  max-width: min(100%, min(850px, 68vw));
  height: auto;
  max-height: min(90vh, 1000px);
  object-fit: contain;
  object-position: bottom center;
}
.cs-designed__serif-title {
  font-family: var(--serif);
  font-size: clamp(1.35rem, 2.2vw, 1.85rem);
  font-weight: 300;
  line-height: 1.35;
  color: var(--fog);
  max-width: 38ch;
  margin: 0 0 1.75rem;
}
.cs-designed__visual {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.cs-designed__figure {
  margin: 0;
}
.cs-designed__figure-frame {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--void);
}
.cs-designed__figure-frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(8%) contrast(1.02);
}
.cs-designed__figure-caption {
  margin-top: 0.65rem;
  font-size: 0.55rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--slate);
  line-height: 1.45;
}
.cs-sticky-label {
  position: sticky;
  top: 7rem;
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--slate);
}
.cs-overview__lede {
  font-family: var(--serif);
  font-size: 1.45rem;
  font-weight: 300;
  line-height: 1.55;
  color: var(--ash);
  max-width: 48ch;
}
.cs-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2rem;
  margin-top: 2.5rem;
}
@media (max-width: 1100px) {
  .cs-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.cs-stat__value {
  font-family: var(--serif);
  font-size: clamp(1.75rem, 3.5vw, 2.35rem);
  font-weight: 300;
  line-height: 1.1;
  color: var(--fog);
}
.cs-stat__value em {
  font-style: italic;
  color: var(--accent);
  font-size: 0.55em;
  vertical-align: baseline;
  margin-left: 0.05em;
}
.cs-stat__label {
  margin-top: 0.5rem;
  font-size: 0.52rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--slate);
}

/* Problem section — hero-style split: copy | visual (see .cs-problem-split) */
.cs-problem-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem 3rem;
  align-items: start;
  width: 100%;
}
.cs-problem__copy {
  position: relative;
  min-width: 0;
  padding: 0 1rem 0 5%;
}
.cs-problem__copy::before {
  content: '';
  position: absolute;
  top: 0;
  left: 5%;
  width: 1px;
  height: 100%;
  background: linear-gradient(
    to bottom,
    transparent,
    var(--iron) 20%,
    var(--iron) 80%,
    transparent
  );
  opacity: 0.35;
}
.cs-problem__copy--no-divider {
  padding-left: 0;
}
.cs-problem__copy--no-divider::before {
  display: none;
}
.cs-problem__visual {
  min-width: 0;
  position: relative;
}
.cs-problem__visual .cs-problem__figure {
  margin-top: 0;
  max-width: 100%;
}
.cs-problem__visual .cs-problem__figure-caption {
  max-width: none;
}

.cs-problem__statement {
  font-family: var(--serif);
  font-size: clamp(1.45rem, 2.8vw, 2rem);
  font-weight: 300;
  line-height: 1.35;
  color: var(--fog);
  max-width: 38ch;
}
.cs-problem__statement em {
  font-style: italic;
  color: var(--accent);
}
.cs-problem__context {
  margin-top: 1.75rem;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  line-height: 1.75;
  color: var(--slate);
  max-width: 52ch;
}
.cs-problem__cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2rem 2.5rem;
  margin-top: 2.5rem;
  width: 100%;
}
.cs-problem__card {
  min-width: 0;
}
.cs-problem__card-num {
  display: block;
  font-family: var(--serif);
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 300;
  line-height: 0.95;
  letter-spacing: -0.02em;
  margin-bottom: 1rem;
}
.cs-problem__card-num--accent {
  color: var(--accent);
}
.cs-problem__card-num--warm {
  color: var(--warm);
}
.cs-problem__card-unit {
  display: block;
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--slate);
  margin-bottom: 1.25rem;
}
.cs-problem__card-title {
  font-family: var(--serif);
  font-size: 1.45rem;
  font-weight: 300;
  line-height: 1.4;
  color: var(--fog);
  margin-bottom: 1rem;
}
.cs-problem__card-body {
  font-size: 0.72rem;
  letter-spacing: 0.03em;
  line-height: 1.75;
  color: var(--slate);
}
.cs-problem__card-body strong {
  color: var(--ash);
  font-weight: 400;
}
.cs-problem__point {
  margin-top: 1.75rem;
  max-width: 54ch;
}
.cs-problem__point-title {
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fog);
  margin-bottom: 0.5rem;
}
.cs-problem__point-body {
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  line-height: 1.75;
  color: var(--slate);
}
.cs-problem__figure {
  margin-top: 2rem;
  max-width: min(100%, 52rem);
}
.cs-problem__figure-frame {
  overflow: hidden;
}
.cs-problem__figure-frame img {
  display: block;
  width: 100%;
  height: auto;
  filter: grayscale(8%) contrast(1.02);
}
.cs-problem__figure-caption {
  margin-top: 0.85rem;
  font-size: 0.55rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--slate);
  line-height: 1.5;
  max-width: 48ch;
}
.cs-problem__bridge {
  margin-top: 2.25rem;
  font-family: var(--serif);
  font-size: 1.1rem;
  font-style: italic;
  font-weight: 300;
  line-height: 1.5;
  color: var(--ash);
  max-width: 44ch;
}
.cs-process__pull {
  margin-top: 1.75rem;
  padding-top: 1.75rem;
  border-top: 1px solid rgba(58, 60, 66, 0.5);
}
.cs-process__pull--side {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}
.cs-process__pull .cs-insight__quote {
  margin: 0;
}

/* Visual placeholders */
.cs-placeholder {
  margin-top: 1.75rem;
  padding: 1rem 1.1rem;
  border: 1px dashed rgba(110, 207, 189, 0.5);
  background: rgba(110, 207, 189, 0.05);
  max-width: 56ch;
}
.cs-placeholder--inline {
  margin-top: 0;
}
.cs-placeholder__label {
  font-size: 0.5rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
}
.cs-placeholder__title {
  margin-top: 0.45rem;
  font-family: var(--serif);
  font-size: 1rem;
  font-weight: 300;
  color: var(--fog);
}
.cs-placeholder__desc {
  margin-top: 0.4rem;
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  line-height: 1.65;
  color: var(--slate);
}

/* Section: single full-width body column (no sticky label) */
.cs-grid--body-only {
  grid-template-columns: minmax(0, 1fr);
}
/* Reflection — label row, full-width body row */
.cs-grid--reflection-wide {
  grid-template-rows: auto auto;
}
.cs-grid--reflection-wide .cs-section-inner--label {
  grid-column: 1;
  grid-row: 1;
}
.cs-grid--reflection-wide .cs-section-inner--body {
  grid-column: 1 / -1;
  grid-row: 2;
}
.cs-grid--reflection-wide .cs-reflection__body {
  max-width: none;
}
.cs-grid--reflection-wide .cs-reflection-lessons .cs-designed__serif-title {
  max-width: none;
}
/* Match case-study body type but span the wide row (default .cs-process__body is 54ch) */
.cs-grid--reflection-wide .cs-reflection-lessons .cs-process__body {
  max-width: none;
}

/* Hub · Funnel · Solve — Amazon model section */
.hfs-wrap {
  margin-top: 1.75rem;
  background: var(--void);
  padding: 48px 32px 56px;
  font-family: var(--mono);
  font-weight: 300;
  position: relative;
  overflow: hidden;
  width: 100%;
  max-width: 720px;
  box-sizing: border-box;
}
.hfs-wrap::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.018) 0, transparent 1px, transparent 4px),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.018) 0, transparent 1px, transparent 4px);
  background-size: 4px 4px;
  pointer-events: none;
  z-index: 0;
}
.hfs-eyebrow {
  position: relative;
  z-index: 1;
  font-size: 0.58rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 28px;
  display: block;
}
.hfs-outer {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  gap: 32px;
  max-width: 720px;
  margin: 0 auto;
}
.hfs-pyramid {
  flex: 0 0 300px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.hfs-tier-label {
  font-size: 0.55rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--fog);
  font-family: var(--mono);
  font-weight: 300;
  pointer-events: none;
}
.hfs-hub {
  background: rgba(110, 207, 189, 0.045);
  border: 0.5px solid rgba(110, 207, 189, 0.18);
  clip-path: polygon(0% 0%, 100% 0%, 88% 100%, 12% 100%);
  height: 80px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.25s ease;
  cursor: default;
}
.hfs-hub:hover {
  background: rgba(110, 207, 189, 0.09);
}
.hfs-funnel {
  background: rgba(110, 207, 189, 0.045);
  border: 0.5px solid rgba(110, 207, 189, 0.18);
  clip-path: polygon(12% 0%, 88% 0%, 74% 100%, 26% 100%);
  height: 112px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.25s ease;
  cursor: default;
}
.hfs-funnel:hover {
  background: rgba(110, 207, 189, 0.09);
}
.hfs-solve {
  background: rgba(110, 207, 189, 0.035);
  border: 0.5px solid rgba(110, 207, 189, 0.15);
  clip-path: polygon(26% 0%, 74% 0%, 62% 100%, 38% 100%);
  height: 84px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.25s ease;
  cursor: default;
}
.hfs-solve:hover {
  background: rgba(110, 207, 189, 0.08);
}
.hfs-descs {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.hfs-desc {
  opacity: 0.18;
  transition: opacity 0.25s ease, border-color 0.25s ease;
  padding: 0 0 0 16px;
  border-left: 1px solid transparent;
}
.hfs-desc.is-active {
  opacity: 1;
  border-left-color: rgba(110, 207, 189, 0.35);
}
.hfs-desc--hub {
  height: 82px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.hfs-desc--funnel {
  height: 114px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.hfs-desc--solve {
  height: 86px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.hfs-desc-key {
  font-size: 0.48rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 4px;
  display: block;
}
.hfs-desc-val {
  font-size: 0.64rem;
  letter-spacing: 0.03em;
  color: var(--ash);
  line-height: 1.7;
}
@media (max-width: 640px) {
  .hfs-wrap {
    padding: 32px 20px 40px;
  }
  .hfs-outer {
    flex-direction: column;
    align-items: stretch;
    gap: 24px;
  }
  .hfs-pyramid {
    flex: 0 0 auto;
    max-width: 320px;
    margin: 0 auto;
    width: 100%;
  }
  .channel-matrix .hfs-pyramid {
    max-width: none;
  }
  .channel-matrix .hfs-desc--hub,
  .channel-matrix .hfs-desc--funnel,
  .channel-matrix .hfs-desc--solve {
    height: auto;
    min-height: 4.5rem;
    padding-bottom: 0.5rem;
  }
  .hfs-desc--hub,
  .hfs-desc--funnel,
  .hfs-desc--solve {
    height: auto;
    min-height: 4.5rem;
    padding-bottom: 0.5rem;
  }
}

/* Full-bleed image */
.cs-fullbleed {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  position: relative;
}
.cs-fullbleed__frame {
  position: relative;
  width: 100%;
  height: 70vh;
  overflow: hidden;
}
.cs-fullbleed__frame::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 2px;
  height: 100%;
  background: var(--accent);
  opacity: 0.7;
  z-index: 2;
  pointer-events: none;
}
.cs-fullbleed:has(.channel-matrix) .cs-fullbleed__frame::before,
.cs-fullbleed__frame--channel-matrix::before {
  display: none;
}
.cs-fullbleed__frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(10%) contrast(1.04);
}
/* Amazon CS channel matrix — same split as .cs-problem-split (copy | matrix plot) */
.channel-matrix {
  --channel-wireframe-gap: clamp(0.4rem, 1.5vw, 0.85rem);
  /* Final design gallery: fixed phone column width (matches 366×756 mocks); height follows aspect */
  --channel-wireframe-phone-w: 13.125rem;
  width: 100%;
  color: var(--fog);
  font-family: var(--mono);
  font-weight: 300;
}
.channel-matrix__heading {
  margin: 0;
  padding: 0 0 1.5rem 0;
  max-width: 38ch;
  box-sizing: border-box;
}
.channel-matrix .cs-problem__copy .channel-matrix__title {
  margin: 0;
  padding: 0 0 1.25rem 0;
  max-width: 38ch;
  box-sizing: border-box;
}
.channel-matrix .cs-problem__copy::before {
  display: none;
}
.channel-matrix__legend {
  padding: 0;
}
.channel-matrix__intro {
  margin: 0 0 1.75rem;
  padding-bottom: 1.75rem;
  border-bottom: 1px solid rgba(58, 60, 66, 0.5);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  line-height: 1.75;
  color: var(--slate);
}
.channel-matrix__intro--no-divider {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}
.channel-matrix .cs-problem-split .cs-problem__visual .hfs-wrap {
  margin-top: 0;
  max-width: none;
  width: 100%;
}
.channel-matrix .hfs-outer {
  max-width: none;
  width: 100%;
  align-items: flex-start;
}
/* Share the row: pyramid capped so copy column keeps ~half the width */
.channel-matrix .hfs-pyramid {
  flex: 0 0 auto;
  width: min(260px, 46%);
  max-width: 100%;
}
.channel-matrix .hfs-descs {
  flex: 1 1 0;
  min-width: 0;
}
/* Auto height stops text from piling up when the column is narrow */
.channel-matrix .hfs-desc--hub,
.channel-matrix .hfs-desc--funnel,
.channel-matrix .hfs-desc--solve {
  height: auto;
  min-height: 82px;
  padding-bottom: 0.75rem;
}
.channel-matrix .hfs-desc--funnel {
  min-height: 114px;
}
.channel-matrix .hfs-desc--solve {
  min-height: 86px;
}
@media (max-width: 960px) {
  .channel-matrix .cs-problem-split .cs-problem__visual .hfs-wrap {
    margin-top: 1.75rem;
  }
  .channel-matrix .cs-problem-split .cs-problem__visual .cs-hero__eyebrow + .hfs-wrap {
    margin-top: 0;
  }
}

/* Wireframe grid — below Hub / Funnel / Solve split (copy left | scrollable wireframes right) */
/* --channel-wireframe-h set by JS ≈ 1.27× left column height */
.channel-matrix__wireframes {
  --channel-wireframe-h: 14rem;
  margin-top: 3rem;
  padding-top: 2.5rem;
  border-top: 1px solid rgba(58, 60, 66, 0.5);
  width: 100%;
  align-items: start;
}
.channel-matrix__wireframes .cs-problem__copy,
.channel-matrix__iteration .cs-problem__copy {
  padding-left: 0;
  padding-right: 1rem;
}
.channel-matrix__wireframes-lead {
  margin: 0 0 1.75rem;
  max-width: none;
}
.channel-matrix__wireframes-lead p {
  margin: 0 0 1.25rem;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  line-height: 1.75;
  color: var(--slate);
}
.channel-matrix__wireframes-lead p:last-child {
  margin-bottom: 0;
}
.channel-matrix__wireframes-lead .channel-matrix__wireframes-findings {
  margin: 0 0 0;
  padding-left: 1.35rem;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  line-height: 1.75;
  color: var(--slate);
  list-style-position: outside;
}
.channel-matrix__wireframes-lead .channel-matrix__wireframes-findings li {
  margin: 0 0 0.65rem;
  padding-left: 0.15rem;
}
.channel-matrix__wireframes-lead .channel-matrix__wireframes-findings li:last-child {
  margin-bottom: 0;
}
.channel-matrix__wireframes-lead p:has(+ .channel-matrix__wireframes-findings) {
  margin-bottom: 0.65rem;
}
.channel-matrix__wireframes-visual {
  min-width: 0;
}
.channel-matrix__wireframes-scroll-wrap {
  position: relative;
  min-width: 0;
}
.channel-matrix__wireframes-scroll-wrap::before,
.channel-matrix__wireframes-scroll-wrap::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2.75rem;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.28s ease;
}
.channel-matrix__wireframes-scroll-wrap::before {
  left: 0;
  background: linear-gradient(to right, var(--void) 0%, rgba(18, 19, 26, 0) 100%);
}
.channel-matrix__wireframes-scroll-wrap::after {
  right: 0;
  background: linear-gradient(to left, var(--void) 0%, rgba(18, 19, 26, 0) 100%);
}
.channel-matrix__wireframes-scroll-wrap.has-scroll-left::before {
  opacity: 1;
}
.channel-matrix__wireframes-scroll-wrap.has-scroll-right::after {
  opacity: 1;
}
.channel-matrix__wireframes-scroll {
  width: 100%;
  height: var(--channel-wireframe-h);
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  padding-bottom: 0.35rem;
}
.channel-matrix__wireframes-grid {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: var(--channel-wireframe-gap);
  width: max-content;
  height: 100%;
  align-items: stretch;
}
.channel-matrix__wireframe {
  margin: 0;
  flex: 0 0 auto;
  height: 100%;
  display: flex;
  align-items: center;
  min-width: 0;
}
.channel-matrix__wireframe .cs-problem__figure-frame {
  overflow: hidden;
  height: 100%;
  max-height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.channel-matrix__wireframe .cs-problem__figure-frame img {
  display: block;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* Final design strip — fixed column width so every mock matches Hub/Funnel (intrinsic PNG ratios differ) */
.channel-matrix__wireframes--uniform-phone {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}
.channel-matrix__wireframes--uniform-phone .channel-matrix__wireframes-scroll {
  min-height: var(--channel-wireframe-h);
  height: auto;
  overflow-y: visible;
}
.channel-matrix__wireframes--uniform-phone .channel-matrix__wireframes-grid {
  height: auto;
  align-items: flex-start;
}
/* Lock each phone column to the same width (flex item width, not img intrinsic width) */
.channel-matrix__wireframes--uniform-phone .channel-matrix__wireframe {
  box-sizing: border-box;
  flex: 0 0 var(--channel-wireframe-phone-w);
  width: var(--channel-wireframe-phone-w);
  min-width: 0;
  height: auto;
  align-items: stretch;
}
.channel-matrix__wireframes--uniform-phone .channel-matrix__wireframe .cs-problem__figure-frame {
  width: 100%;
  height: auto;
  max-height: none;
  overflow: visible;
}
.channel-matrix__wireframes--uniform-phone .channel-matrix__wireframe .cs-problem__figure-frame img {
  display: block;
  width: 100%;
  max-width: none;
  height: auto;
  max-height: none;
  object-fit: contain;
}

/* Next iteration — copy left | YouTube Short embed right (9:16) */
.channel-matrix__iteration {
  margin-top: 3rem;
  padding-top: 2.5rem;
  border-top: 1px solid rgba(58, 60, 66, 0.5);
  width: 100%;
  align-items: start;
}
.channel-matrix__iteration-visual {
  min-width: 0;
}
.channel-matrix__iteration-video-wrap {
  position: relative;
  width: 100%;
  max-width: 22rem;
  margin-inline: auto;
  aspect-ratio: 9 / 16;
  overflow: hidden;
  border-radius: 2px;
  background: rgba(0, 0, 0, 0.35);
}
.channel-matrix__iteration-youtube {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.channel-matrix__item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1rem;
  align-items: start;
  padding: 1.25rem 0;
}
.channel-matrix__icon {
  flex-shrink: 0;
  margin-top: 0.1rem;
}
.channel-matrix__label {
  font-size: 0.58rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fog);
  margin-bottom: 0.35rem;
}
.channel-matrix__desc {
  font-size: 0.68rem;
  color: var(--slate);
  line-height: 1.6;
}
.channel-matrix__matrix {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  padding: 0;
  align-items: center;
}
.channel-matrix__svg {
  max-width: 320px;
  width: 100%;
  height: auto;
}
.channel-matrix__axis {
  fill: var(--slate);
  font-size: 7px;
  font-family: var(--mono);
  letter-spacing: 0.12em;
}
.channel-matrix__axis--side {
  text-anchor: middle;
  dominant-baseline: middle;
}
.channel-matrix__bubble-label {
  fill: var(--accent);
  font-size: 8.5px;
  font-family: var(--mono);
  letter-spacing: 0.05em;
}
.channel-matrix__footnote {
  font-size: 0.6rem;
  letter-spacing: 0.04em;
  color: var(--slate);
  line-height: 1.65;
  max-width: 320px;
  width: 100%;
  margin: 0;
}
.channel-matrix__footnote-term {
  font-style: normal;
  color: var(--ash);
}

/* Platform analysis (SS / MU / AVA) — below matrix split; align with .cs-problem__copy / legend */
.channel-matrix > .pa-section {
  position: relative;
  z-index: 2;
  border-top: 1px solid var(--iron);
  padding: 3rem 1rem 1.375rem;
  padding-left: calc((100% - 3rem) * 0.025);
  width: 100%;
  margin: 0;
  box-sizing: border-box;
}

/* Tighter gap before the following section (Research block is long; channel-matrix only on Amazon CS page) */
.cs-section:has(.channel-matrix) {
  padding-bottom: 3rem;
}
.pa-eyebrow {
  font-size: 0.52rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--accent);
  display: block;
  margin-bottom: 0.75rem;
}
.pa-title {
  font-family: var(--serif);
  font-size: clamp(1.9rem, 4vw, 2.8rem);
  font-weight: 300;
  line-height: 1.05;
  color: var(--fog);
  max-width: 38ch;
  margin-bottom: 0.5rem;
}
.pa-title em {
  font-style: italic;
  color: var(--slate);
}
.pa-intro {
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  line-height: 1.8;
  color: var(--slate);
  max-width: 58ch;
  margin-top: 1rem;
  margin-bottom: 0.75rem;
}
.pa-section > .pa-intro:first-child {
  margin-top: 0;
}
.pa-rule {
  width: 40px;
  height: 1px;
  background: var(--iron);
  margin: 1.5rem 0 2.5rem;
  border: none;
}
.pa-platforms {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}
.pa-platforms .pa-platform:first-child {
  border-top: none;
}
.pa-platform {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 0;
  border-top: 1px solid var(--iron);
  padding: 2.75rem 0;
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.pa-platform.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.pa-platform:last-child {
  border-bottom: 1px solid var(--iron);
}
.pa-meta {
  padding-right: 2.5rem;
  padding-top: 2px;
}
.pa-name {
  font-family: var(--serif);
  font-size: clamp(1.45rem, 2.5vw, 1.9rem);
  font-weight: 300;
  line-height: 1.1;
  color: var(--fog);
  margin-bottom: 0.4rem;
}
.pa-abbr {
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  color: var(--accent);
  text-transform: uppercase;
  display: block;
}
.pa-desc {
  font-size: 0.64rem;
  letter-spacing: 0.04em;
  line-height: 1.7;
  color: var(--slate);
  margin-top: 1.1rem;
  max-width: 20ch;
}
.pa-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem 3rem;
}
.pa-col-label {
  font-size: 0.5rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin-bottom: 1.25rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.pa-col-label::before {
  content: '';
  display: block;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  flex-shrink: 0;
}
.pa-col-label--s { color: var(--accent); }
.pa-col-label--s::before { background: var(--accent); }
.pa-col-label--w { color: var(--warm); }
.pa-col-label--w::before { background: var(--warm); }
.pa-tags-wrap {
  position: relative;
  padding-left: 1rem;
}
.pa-tags-wrap::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 1px;
}
.pa-tags-wrap--s::before {
  background: linear-gradient(to bottom, var(--accent), transparent);
}
.pa-tags-wrap--w::before {
  background: linear-gradient(to bottom, var(--warm), transparent);
}
.pa-tags {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.pa-tag-title {
  font-size: 0.67rem;
  letter-spacing: 0.04em;
  line-height: 1.35;
  font-weight: 400;
  color: var(--ash);
  display: block;
}
.pa-tag-desc {
  font-size: 0.59rem;
  letter-spacing: 0.02em;
  line-height: 1.6;
  color: var(--slate);
  display: block;
  margin-top: 0.15rem;
}
.channel-matrix .pa-section > .pa-insight-label {
  margin-top: 3.5rem;
}
.pa-insight-label {
  font-size: 0.5rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  display: block;
  margin-bottom: 0.75rem;
}
.pa-insight-text {
  font-family: var(--serif);
  font-size: clamp(1.1rem, 2vw, 1.45rem);
  font-weight: 300;
  font-style: normal;
  line-height: 1.55;
  color: var(--ash);
  max-width: 52ch;
}

/* Synthesis: copy left, platform convergence canvas right */
.channel-matrix .pa-section .pa-synthesis-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: 2rem 2.75rem;
  align-items: start;
  width: 100%;
  margin-top: 0.25rem;
}
.channel-matrix .pa-section .pa-synthesis-row .pa-synthesis-copy {
  min-width: 0;
  padding-right: 0.5rem;
}
.channel-matrix .pa-section .pa-synthesis-row .pa-insight-text {
  margin: 0;
  max-width: none;
}
.channel-matrix .pa-section .pa-synthesis-row .pa-hmw-lead {
  font-size: 0.9rem;
  letter-spacing: 0.04em;
  line-height: 1.65;
  color: var(--slate);
  margin: 1.5rem 0 0.65rem;
  max-width: none;
}
.channel-matrix .pa-section .pa-synthesis-row .pa-hmw-list {
  margin: 0;
  padding: 0 0 0 1.15rem;
  font-size: 0.9rem;
  letter-spacing: 0.03em;
  line-height: 1.75;
  color: var(--slate);
  max-width: none;
}
.channel-matrix .pa-section .pa-synthesis-row .pa-hmw-list li {
  margin: 0.35rem 0;
}
.channel-matrix .pa-section .pa-synthesis-row .pa-hmw-list li:first-child {
  margin-top: 0;
}
.channel-matrix .pa-section .pa-synthesis-row .pa-hmw-list li:last-child {
  margin-bottom: 0;
}
@media (max-width: 800px) {
  .channel-matrix .pa-section .pa-synthesis-row {
    grid-template-columns: 1fr;
    gap: 1.75rem;
  }
  .channel-matrix .pa-section .pa-synthesis-row .pa-synthesis-copy {
    padding-right: 0;
  }
}

/* Platform convergence animation (amazon-customer-experience — pa-section) */
.channel-matrix .pa-section .pa-animation {
  --pc-s-fill: #dff4ef;
  --pc-w-fill: #fdecea;
  --pc-box-w: 100px;
  --pc-box-h: 58px;
  --pc-gap: 10px;
  --pc-row-gap: 10px;
  --pc-left: 24px;
  position: relative;
  z-index: 1;
  margin-top: 0;
  max-width: none;
  width: 100%;
  justify-self: stretch;
}
.channel-matrix .pa-section .pc-canvas {
  position: relative;
  width: 100%;
  min-height: 300px;
}
.channel-matrix .pa-section .pc-box {
  position: absolute;
  width: var(--pc-box-w);
  height: var(--pc-box-h);
  border-radius: 6px;
}
.channel-matrix .pa-section .pc-box--s { background: var(--pc-s-fill); }
.channel-matrix .pa-section .pc-box--w { background: var(--pc-w-fill); }
.channel-matrix .pa-section .pc-label {
  position: absolute;
  font-family: var(--mono);
  font-size: 0.58rem;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--slate);
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.channel-matrix .pa-section .pc-label svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}
@media (prefers-reduced-motion: reduce) {
  .channel-matrix .pa-section .pc-box { transition: none !important; }
  .channel-matrix .pa-section .pc-label { transition: none !important; }
}
@media (max-width: 700px) {
  .channel-matrix__heading,
  .channel-matrix .cs-problem__copy .channel-matrix__title {
    padding-bottom: 1.25rem;
  }
  .channel-matrix > .pa-section {
    padding: 2.5rem 0 1.125rem;
    padding-left: 0;
    padding-right: 0;
  }
  .pa-platform {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  .pa-meta {
    padding-right: 0;
    display: flex;
    align-items: baseline;
    gap: 1rem;
    flex-wrap: wrap;
  }
  .pa-meta .pa-desc {
    flex-basis: 100%;
    margin-top: 0.75rem;
    max-width: none;
  }
  .pa-body {
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem 1.5rem;
  }
}
@media (max-width: 480px) {
  .pa-body {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}

@media (max-width: 960px) {
  .pa-platform {
    grid-template-columns: 160px 1fr;
  }
}
.cs-fullbleed__caption {
  padding: 1rem 3rem 0;
  font-size: 0.55rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--slate);
}
.cs-fullbleed--pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}
.cs-fullbleed--pair .cs-fullbleed__frame {
  height: 60vh;
}

/* Process steps */
.cs-process__step {
  padding: 2rem 0;
  border-bottom: 1px solid var(--iron);
}
.cs-process__step:first-child {
  border-top: 1px solid var(--iron);
}
.cs-designed__serif-title + .cs-process__step {
  border-top: 1px solid var(--iron);
}
.cs-designed-split > .cs-designed-split__row:first-of-type .cs-process__step {
  border-top: none;
}
/* Row with copy only (no figure): span full section width, not one column of a 2-col grid */
.cs-designed-split__row > .cs-process__step:only-child {
  grid-column: 1 / -1;
}
.cs-designed-split__row > .cs-process__step:only-child .cs-process__body {
  max-width: none;
}
.cs-designed-split__row > .cs-process__step:only-child .cs-process__body + .cs-process__body {
  margin-top: 1.5rem;
}
.cs-process__num {
  font-size: 0.55rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--iron);
  margin-bottom: 0.65rem;
}
.cs-process__title {
  font-family: var(--serif);
  font-size: 1.25rem;
  font-weight: 300;
  line-height: 1.25;
  color: var(--fog);
  margin-bottom: 0.85rem;
}
.cs-process__body {
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  line-height: 1.75;
  color: var(--slate);
  max-width: 54ch;
}

/* Key decisions */
.cs-decision {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 2rem 3rem;
  padding: 2rem 0;
  border-bottom: 1px solid var(--iron);
}
.cs-decision:first-of-type {
  border-top: 1px solid var(--iron);
}
.cs-decision__q {
  font-family: var(--serif);
  font-size: 1.15rem;
  font-weight: 300;
  line-height: 1.35;
  color: var(--fog);
}
.cs-decision__a {
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  line-height: 1.75;
  color: var(--slate);
}

/* Pull quote / insight */
.cs-insight__quote {
  font-family: var(--serif);
  font-size: 1.45rem;
  font-style: italic;
  font-weight: 300;
  line-height: 1.45;
  color: var(--ash);
  padding-left: 1.25rem;
  border-left: 2px solid var(--accent);
  max-width: 42ch;
}
.cs-insight__attr {
  margin-top: 1rem;
  font-size: 0.55rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--slate);
}
.cs-insight__context {
  margin-top: 1.5rem;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  line-height: 1.75;
  color: var(--slate);
  max-width: 52ch;
}

/* Outcomes 2×2 */
.cs-outcomes__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem 3rem;
}
.cs-outcome__value {
  font-family: var(--serif);
  font-size: clamp(1.65rem, 3vw, 2.2rem);
  font-weight: 300;
  line-height: 1.1;
  color: var(--fog);
}
.cs-outcome__value em {
  font-style: italic;
  color: var(--accent);
  font-size: 0.55em;
  vertical-align: baseline;
  margin-left: 0.05em;
}
.cs-outcome__desc {
  margin-top: 0.65rem;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  line-height: 1.65;
  color: var(--slate);
}

/* Case study — design system bullet list (e.g. Resolv) */
.cs-design-list {
  margin: 1.35rem 0 0;
  padding-left: 1.2rem;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  line-height: 1.75;
  color: var(--slate);
  max-width: 52ch;
  list-style-position: outside;
}
.cs-design-list li {
  margin: 0 0 0.7rem;
}
.cs-design-list li:last-child {
  margin-bottom: 0;
}
.cs-design-list strong {
  font-weight: 500;
  color: var(--ash);
}

.cs-reflection__heading {
  font-family: var(--mono);
  font-size: 0.65rem;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 1rem;
  max-width: none;
}
.cs-reflection__heading:not(:first-child) {
  margin-top: 2.25rem;
}
.cs-reflection__body {
  font-family: var(--serif);
  font-size: 1.3rem;
  font-weight: 300;
  line-height: 1.55;
  color: var(--ash);
  max-width: 48ch;
}
.cs-reflection__body + .cs-reflection__body {
  margin-top: 1.35em;
}
.cs-reflection-lessons .cs-process__body + .cs-process__title {
  margin-top: 2.25rem;
}
/* Next case study */
.cs-next-wrap {
  padding: 0;
  border-top: 1px solid var(--iron);
}
.cs-next {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  padding: 3rem 3rem 3.5rem;
  text-decoration: none;
  color: inherit;
  transition: background 0.4s ease;
}
.cs-next:hover,
.cs-next:focus-visible {
  background: rgba(26, 28, 36, 0.35);
}
.cs-next__label {
  font-size: 0.55rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--slate);
  margin-bottom: 1rem;
}
.cs-next__row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem 2rem;
  width: 100%;
}
.cs-hero,
.cs-main,
.cs-next-wrap,
footer {
  position: relative;
  z-index: 2;
}
.cs-next__title {
  font-family: var(--serif);
  font-size: clamp(1.75rem, 3.5vw, 2.75rem);
  font-weight: 300;
  line-height: 1.1;
  color: var(--fog);
  transition: color 0.35s ease;
}
.cs-next__arrow {
  display: inline-block;
  margin-left: 0.35rem;
  transition: transform 0.4s cubic-bezier(0.33, 1, 0.68, 1);
}
.cs-next:hover .cs-next__title,
.cs-next:focus-visible .cs-next__title {
  color: var(--accent);
}
.cs-next:hover .cs-next__arrow,
.cs-next:focus-visible .cs-next__arrow {
  transform: translate(6px, 0);
}
.cs-next__cat {
  font-size: 0.52rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--iron);
  text-align: right;
}
.cs-next:focus-visible {
  outline: 1px solid var(--accent);
  outline-offset: 4px;
}

footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 2rem 3rem;
  border-top: 1px solid var(--iron);
  position: relative;
  z-index: 2;
}
.footer-copy { font-size: 0.58rem; letter-spacing: 0.15em; color: var(--iron); }

@keyframes cs-fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes cs-spotlightRise {
  from {
    opacity: 0;
    transform: translateY(20%) translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(20%) translateY(0);
  }
}
@keyframes cs-fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes cs-riseLeft {
  from {
    opacity: 0;
    transform: translate(var(--cs-shift), 60px) rotateZ(0deg);
    transform-origin: 50% 100%;
  }
  to {
    opacity: 1;
    transform: translate(var(--cs-shift), 0) rotateZ(calc(-1 * var(--cs-tilt-side)));
    transform-origin: 50% 100%;
  }
}
@keyframes cs-riseCenter {
  from {
    opacity: 0;
    transform: translate(0, 80px);
  }
  to {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes cs-riseRight {
  from {
    opacity: 0;
    transform: translate(calc(-1 * var(--cs-shift)), 50px) rotateZ(0deg);
    transform-origin: 50% 100%;
  }
  to {
    opacity: 1;
    transform: translate(calc(-1 * var(--cs-shift)), 0) rotateZ(var(--cs-tilt-side));
    transform-origin: 50% 100%;
  }
}

::-webkit-scrollbar { width: 3px; }
::-webkit-scrollbar-track { background: var(--void); }
::-webkit-scrollbar-thumb { background: var(--iron); }
::-webkit-scrollbar-thumb:hover { background: var(--accent); }

/* Mobile */
@media (max-width: 960px) {
  .cs-problem__cards {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .cs-problem-split {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .cs-designed-split__row {
    grid-template-columns: 1fr;
  }
  .cs-built-shipped__layout {
    grid-template-columns: 1fr;
  }
  .cs-designed-split .cs-designed-split__row .cs-process__step {
    padding-left: 0;
    padding-right: 0;
  }
  .channel-matrix__wireframes .cs-problem__copy,
  .channel-matrix__iteration .cs-problem__copy {
    padding-right: 0;
  }
  .cs-problem__copy {
    padding: 0;
  }
  .cs-problem__copy::before {
    display: none;
  }
  .channel-matrix > .pa-section {
    padding-left: 0;
    padding-right: 0;
  }
}

@media (max-width: 700px) {
  .cs-nav { padding: 1.75rem 1.5rem; }
  .cs-hero__inner {
    grid-template-columns: 1fr;
    min-height: auto;
  }
  .cs-hero__copy {
    padding: 7rem 1.5rem 2rem;
  }
  .cs-hero__stage {
    height: auto;
    padding: 2rem 1.5rem 4rem;
    justify-content: center;
  }
  .cs-hero__stage::after {
    display: none;
  }
  .cs-hero__stage--spotlight {
    height: min(74vh, 700px);
    min-height: 56vh;
    max-height: none;
    align-items: flex-end;
  }
  .cs-hero__stage--spotlight .cs-hero__spotlight img {
    max-width: min(100%, 92vw);
    max-height: min(70vh, 620px);
  }
  .cs-hero__meta {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  .cs-section { padding: 4rem 1.5rem; }
  .cs-section:has(.channel-matrix) {
    padding-bottom: 2rem;
  }
  .cs-section--fullbleed:has(> .cs-grid) {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
  .cs-grid {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }
  .cs-sticky-label {
    position: static;
  }
  .cs-stats {
    grid-template-columns: 1fr;
  }
  .cs-fullbleed__caption {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
  .cs-decision {
    grid-template-columns: 1fr;
  }
  .cs-outcomes__grid {
    grid-template-columns: 1fr;
  }
  .cs-fullbleed--pair {
    grid-template-columns: 1fr;
  }
  .cs-next {
    padding: 2.5rem 1.5rem;
  }
  .cs-next__cat {
    text-align: left;
    width: 100%;
  }
  footer {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.75rem 1.5rem;
  }
  .cs-hero__devices {
    --cs-phone-base: 110px;
    --cs-phone-side: 120px;
    --cs-phone-center: 138px;
    --cs-shift: 22px;
    --cs-tilt-side: 5deg;
    gap: 0;
  }
  .cs-device:nth-child(1) {
    transform: translate(var(--cs-shift), 0) rotateZ(calc(-1 * var(--cs-tilt-side)));
  }
  .cs-device--center {
    transform: none;
  }
  .cs-device:nth-child(3) {
    transform: translate(calc(-1 * var(--cs-shift)), 0) rotateZ(var(--cs-tilt-side));
  }
  @keyframes cs-riseLeft {
    from {
      opacity: 0;
      transform: translate(var(--cs-shift), 40px) rotateZ(0deg);
      transform-origin: 50% 100%;
    }
    to {
      opacity: 1;
      transform: translate(var(--cs-shift), 0) rotateZ(calc(-1 * var(--cs-tilt-side)));
      transform-origin: 50% 100%;
    }
  }
  @keyframes cs-riseCenter {
    from {
      opacity: 0;
      transform: translate(0, 50px);
    }
    to {
      opacity: 1;
      transform: translate(0, 0);
    }
  }
  @keyframes cs-riseRight {
    from {
      opacity: 0;
      transform: translate(calc(-1 * var(--cs-shift)), 40px) rotateZ(0deg);
      transform-origin: 50% 100%;
    }
    to {
      opacity: 1;
      transform: translate(calc(-1 * var(--cs-shift)), 0) rotateZ(var(--cs-tilt-side));
      transform-origin: 50% 100%;
    }
  }
}