/* ===========================
   Case Study Page Styles
   =========================== */

/* Hero */
.cs-hero {
  padding: 100px 0 0;
  text-align: center;
}

.cs-label {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--black);
  margin-bottom: 24px;
}

.cs-title {
  font-family: var(--font-serif);
  font-size: clamp(2.2rem, 4.5vw, 3.6rem);
  font-weight: 400;
  line-height: 1.25;
  max-width: 800px;
  margin: 0 auto;
  letter-spacing: -0.02em;
}

.cs-hero-image {
  margin-top: 64px;
  padding: 0 100px;
}

.cs-hero-image img {
  width: 100%;
  display: block;
}

/* About the Project */
.cs-about-grid {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 80px;
}

.cs-about-main .cs-label {
  margin-bottom: 24px;
}

.cs-about-sidebar {
  display: flex;
  flex-direction: column;
  gap: 48px;
}

.cs-about-meta .cs-label {
  margin-bottom: 16px;
}

.cs-about-meta p:not(.cs-label) {
  font-size: 1rem;
  line-height: 1.8;
  color: var(--black);
}

/* Sections */
.cs-section {
  padding: 100px 0;
}

.cs-section--gray {
  background: #f8f8f8;
}

.cs-section--dark {
  background: var(--black);
  color: var(--white);
}

.cs-section--dark .cs-section-title {
  color: var(--white);
}

.cs-section--dark .cs-body-text p {
  color: #ccc;
}

.cs-section-title {
  font-family: var(--font-serif);
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  font-weight: 700;
  margin-bottom: 40px;
  letter-spacing: -0.02em;
}

/* Section Divider (between sections) */
.cs-section-divider {
  border: none;
  border-top: 1px solid #e0e0e0;
  margin: 0 auto;
  max-width: 1200px;
}

/* Divider (inside sections) */
.cs-divider {
  border: none;
  border-top: 1px solid #e0e0e0;
  margin: 48px 0;
}

/* Problem Items */
.cs-problem-item {
  margin-bottom: 40px;
}

.cs-problem-item p,
.cs-problem-item li {
  font-size: 1.05rem;
  line-height: 1.8;
  color: var(--black);
}

.cs-problem-item ul {
  padding-left: 24px;
  margin: 12px 0;
}

.cs-problem-item li {
  margin-bottom: 4px;
}

.cs-problem-title {
  font-family: var(--font-sans);
  font-size: 1.15rem;
  font-weight: 700;
  margin-bottom: 12px;
  color: var(--black);
}

.cs-x-icon {
  color: #d32f2f;
  margin-right: 6px;
}

.cs-eyes-icon {
  margin-right: 6px;
}

/* Pull Quote */
.cs-pullquote {
  text-align: center;
  padding: 64px 40px;
  margin: 48px 0;
  border: none;
  background: none;
}

.cs-pullquote-icon {
  display: block;
  margin: 0 auto 20px;
  color: var(--black);
  opacity: 0.25;
}

.cs-pullquote {
  font-family: var(--font-serif);
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 700;
  line-height: 1.4;
  color: var(--black);
}

/* Subtitle */
.cs-subtitle {
  font-family: var(--font-serif);
  font-size: 1.6rem;
  font-weight: 700;
  margin-bottom: 32px;
  color: var(--black);
}

/* Body text */
.cs-body-text {
  max-width: 900px;
}

.cs-body-text p {
  font-size: 1.05rem;
  line-height: 1.8;
  color: var(--black);
  margin-bottom: 20px;
}

.cs-body-text ul {
  padding-left: 24px;
  margin-bottom: 20px;
}

.cs-body-text li {
  font-size: 1.05rem;
  line-height: 1.8;
  color: var(--black);
  margin-bottom: 6px;
}

/* Problem cards */
.cs-problems-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  margin-top: 60px;
}

.cs-problems-grid--four {
  grid-template-columns: repeat(4, 1fr);
}

.cs-problem-card {
  padding: 36px;
  border: 1px solid #e5e5e5;
  border-radius: 0;
  background: var(--white);
  transition: box-shadow 0.3s ease;
}

.cs-problem-card:hover {
  box-shadow: 0 8px 32px rgba(0,0,0,0.08);
}

.cs-problem-card h3 {
  font-family: var(--font-sans);
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 16px;
  color: var(--black);
}

.cs-problem-card p {
  font-size: 0.95rem;
  line-height: 1.7;
  color: #555;
  margin-bottom: 12px;
}

.cs-problem-card ul {
  padding-left: 20px;
  margin-top: 8px;
}

.cs-problem-card li {
  font-size: 0.95rem;
  line-height: 1.6;
  color: #555;
  margin-bottom: 4px;
}

/* Colored card variants */
.cs-card--green {
  border-left: 4px solid #2e7d32;
}

.cs-card--yellow {
  border-left: 4px solid #f9a825;
}

.cs-card--red {
  border-left: 4px solid #d32f2f;
}

/* Subsections */
.cs-subsection {
  margin-top: 60px;
}

.cs-subsection-title {
  font-family: var(--font-sans);
  font-size: 1.2rem;
  font-weight: 700;
  margin-bottom: 20px;
  color: var(--black);
}

.cs-subsection ul {
  padding-left: 24px;
}

.cs-subsection li {
  font-size: 1.05rem;
  line-height: 1.8;
  color: #444;
  margin-bottom: 6px;
}

/* Two-card grid */
.cs-two-card-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  margin-top: 48px;
}

/* Column layouts */
.cs-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  margin-top: 48px;
}

.cs-two-col h3 {
  font-family: var(--font-serif);
  font-size: 1.6rem;
  font-weight: 700;
  margin-bottom: 20px;
}

.cs-two-col p {
  font-size: 1.05rem;
  line-height: 1.8;
  color: #444;
  margin-bottom: 16px;
}

.cs-two-col ul {
  padding-left: 24px;
}

.cs-two-col li {
  font-size: 1.05rem;
  line-height: 1.8;
  color: #444;
  margin-bottom: 6px;
}

.cs-three-col {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  margin-top: 32px;
}

.cs-three-col h4 {
  font-size: 1.05rem;
  font-weight: 700;
  margin-bottom: 12px;
}

.cs-three-col ul {
  padding-left: 20px;
}

.cs-three-col li {
  font-size: 0.95rem;
  line-height: 1.7;
  color: #555;
  margin-bottom: 4px;
}

/* Card sorting */
.cs-card-sorting {
  margin-top: 40px;
}

.cs-card-col {
  padding: 36px;
  border-radius: 0;
}

.cs-card-col h3 {
  font-family: var(--font-sans);
  font-size: 1.2rem;
  font-weight: 700;
  margin-bottom: 20px;
}

.cs-card-col li {
  color: #333;
}

.cs-card-col--green {
  background: #d4edda;
  border: 1px solid #a3d9b1;
}

.cs-card-col--yellow {
  background: #fff8dc;
  border: 1px solid #f0e68c;
}

.cs-card-col--red {
  background: #fde8e8;
  border: 1px solid #f5a3a3;
}

/* Callout */
.cs-callout {
  margin-top: 48px;
  padding: 32px 40px;
  background: #f8f8f8;
  border-left: 4px solid var(--black);
  font-size: 1.05rem;
  line-height: 1.7;
  color: #333;
  font-style: italic;
}

/* Blockquote */
.cs-body-text blockquote {
  margin: 28px 0;
  padding: 24px 32px;
  background: #f8f8f8;
  border-left: 4px solid #ddd;
  font-size: 1.05rem;
  line-height: 1.7;
  color: #555;
  font-style: italic;
  border-radius: 0;
}

/* Themes grid */
.cs-themes-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin-top: 32px;
  margin-bottom: 60px;
}

.cs-theme {
  padding: 32px;
  border: 1px solid #e5e5e5;
  transition: box-shadow 0.3s ease;
}

.cs-theme:hover {
  box-shadow: 0 8px 32px rgba(0,0,0,0.08);
}

.cs-theme h4 {
  font-size: 1.05rem;
  font-weight: 700;
  margin-bottom: 16px;
}

.cs-theme ul {
  padding-left: 0;
  list-style: none;
}

.cs-theme li {
  font-size: 0.95rem;
  line-height: 1.7;
  color: #555;
  margin-bottom: 8px;
  font-style: italic;
  padding-left: 16px;
  position: relative;
}

.cs-theme li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 10px;
  width: 6px;
  height: 6px;
  background: #ccc;
  border-radius: 50%;
}

/* Flow breakdown */
.cs-flow-breakdown {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  margin-top: 32px;
}

.cs-flow-item {
  padding: 32px;
  background: var(--white);
  border: 1px solid #e5e5e5;
  border-radius: 0;
}

.cs-flow-item h4 {
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 12px;
}

.cs-flow-item p {
  font-size: 0.95rem;
  line-height: 1.6;
  color: #555;
  margin-bottom: 12px;
  font-style: italic;
}

.cs-flow-item ul {
  padding-left: 18px;
}

.cs-flow-item li {
  font-size: 0.9rem;
  line-height: 1.6;
  color: #666;
  margin-bottom: 4px;
}

/* Flow pills */
.cs-flow-pills {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 24px 0 32px;
}

.cs-flow-pills span {
  display: inline-block;
  padding: 12px 20px;
  background: #eef6ff;
  border: 1px solid #c5ddf5;
  border-radius: 0;
  font-size: 0.95rem;
  color: #1a3a5c;
  font-weight: 500;
}

/* Requirements grid (3x2) */
.cs-req-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  margin-top: 60px;
}

.cs-card-quote {
  margin-top: 16px;
  font-size: 0.9rem;
  font-style: italic;
  line-height: 1.6;
  color: #555;
}

/* Requirements cards */
.cs-requirements {
  margin-top: 48px;
}

.cs-req-card {
  padding: 36px;
  border: 1px solid #e5e5e5;
  border-radius: 0;
  background: var(--white);
}

.cs-req-card h3 {
  font-family: var(--font-sans);
  font-size: 1.15rem;
  font-weight: 700;
  margin-bottom: 16px;
}

.cs-req-card p {
  font-size: 0.95rem;
  line-height: 1.7;
  color: #555;
  margin-bottom: 12px;
}

.cs-req-card ul {
  padding-left: 20px;
  margin-bottom: 16px;
}

.cs-req-card li {
  font-size: 0.95rem;
  line-height: 1.6;
  color: #555;
  margin-bottom: 4px;
}

.cs-req-card blockquote {
  margin-top: 20px;
  padding: 16px 20px;
  background: #f8f8f8;
  border-left: 3px solid #ddd;
  font-size: 0.9rem;
  font-style: italic;
  color: #666;
  border-radius: 0;
}

.cs-req-note {
  font-style: italic;
  color: #888 !important;
  font-size: 0.85rem !important;
}

/* Wireframe versions */
.cs-versions {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  margin-top: 32px;
}

.cs-version h4 {
  font-family: var(--font-serif);
  font-size: 1.3rem;
  font-weight: 400;
  margin-bottom: 16px;
}

.cs-version-card {
  overflow: hidden;
}

.cs-version-card img {
  width: 100%;
  display: block;
}

/* Image layouts */
.cs-image-full {
  margin-top: 60px;
  overflow: hidden;
}

.cs-image-full img {
  width: 100%;
  display: block;
}

.cs-image-crop {
  overflow: hidden;
}

.cs-image-crop img {
  margin: -6px -8px;
  width: calc(100% + 16px);
  max-width: none;
}

.cs-image-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 48px;
}

.cs-image-row--2col {
  grid-template-columns: repeat(2, 1fr);
}

.cs-image-block {
  overflow: hidden;
}

.cs-image-block img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Handoff grid */
.cs-handoff-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin-top: 40px;
}

.cs-handoff-grid img {
  width: 100%;
  border-radius: 0;
  border: 1px solid #e5e5e5;
  display: block;
  background: var(--white);
}

/* Final screens grid */
.cs-final-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin-top: 40px;
}

.cs-final-grid img {
  width: 100%;
  display: block;
}

/* Journey Experience Map */
.cs-journey-map {
  --journey-color: #306CFE;
  margin-top: 60px;
}

.cs-journey-arrow {
  display: flex;
  justify-content: center;
  padding: 32px 0;
}

.cs-journey-arrow svg {
  color: #999;
}

.cs-journey-row {
  display: grid;
  grid-template-columns: 100px 1fr;
}

.cs-journey-label {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 8px 4px;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #666;
  writing-mode: vertical-lr;
  transform: rotate(180deg);
}

.cs-journey-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  position: relative;
}

.cs-journey-cell:first-child {
  border-left: none;
  background-image: repeating-linear-gradient(to bottom, #ccc 0px, #ccc 4px, transparent 4px, transparent 8px);
  background-size: 1px 100%;
  background-repeat: no-repeat;
  background-position: left;
}

.cs-journey-grid::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(to right, #e0e0e0 70%, transparent 100%);
}

.cs-journey-row:first-child .cs-journey-grid::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(to right, #e0e0e0 70%, transparent 100%);
}

.cs-journey-row:last-child .cs-journey-grid::after {
  background: linear-gradient(to right, #e0e0e0 70%, transparent 100%);
}

.cs-journey-grid--curve {
  display: block;
  background-image: repeating-linear-gradient(to bottom, #ccc 0px, #ccc 4px, transparent 4px, transparent 8px);
  background-size: 1px 100%;
  background-repeat: no-repeat;
  background-position: left;
}

.cs-journey-cell {
  padding: 16px;
  font-size: 0.78rem;
  line-height: 1.6;
  color: #444;
  position: relative;
}

.cs-journey-cell::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 1px;
  height: 100%;
  background: repeating-linear-gradient(to bottom, #ccc 0px, #ccc 4px, transparent 4px, transparent 8px);
}

.cs-journey-cell:last-child::after {
  display: none;
}

.cs-journey-cell:last-child {
}

.cs-journey-cell p {
  font-size: 0.78rem;
  line-height: 1.6;
  color: #444;
  margin-bottom: 0;
}

.cs-journey-cell--italic p {
  font-style: italic;
}

.cs-journey-cell ul {
  padding-left: 16px;
  margin: 0;
}

.cs-journey-cell li {
  font-size: 0.78rem;
  line-height: 1.5;
  color: #444;
  margin-bottom: 4px;
}

.cs-journey-phase {
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.03em;
  color: var(--black);
}

/* Curve area */
.cs-curve-area {
  position: relative;
  height: 300px;
}

.cs-curve-area--5col::before {
  background-image: repeating-linear-gradient(
    to right,
    transparent 0%,
    transparent calc(20% - 0.5px),
    #ddd calc(20% - 0.5px),
    #ddd 20%
  ) !important;
}

.cs-curve-area::before {
  z-index: 0;
  content: '';
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    to right,
    transparent 0%,
    transparent calc(16.666% - 0.5px),
    #ddd calc(16.666% - 0.5px),
    #ddd 16.666%
  );
  -webkit-mask-image: repeating-linear-gradient(to bottom, black 0px, black 4px, transparent 4px, transparent 8px),
    linear-gradient(to right, black 70%, transparent 100%);
  -webkit-mask-composite: destination-in;
  mask-image: repeating-linear-gradient(to bottom, black 0px, black 4px, transparent 4px, transparent 8px),
    linear-gradient(to right, black 70%, transparent 100%);
  mask-composite: intersect;
}

.cs-curve-baseline {
  position: absolute;
  top: 45%;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(to right, #ccc 70%, transparent 100%);
  z-index: 0;
  -webkit-mask-image: repeating-linear-gradient(to right, black 0px, black 4px, transparent 4px, transparent 8px);
  mask-image: repeating-linear-gradient(to right, black 0px, black 4px, transparent 4px, transparent 8px);
}

.cs-curve-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.cs-curve-point {
  position: absolute;
  transform: translate(-50%, -50%);
  z-index: 2;
}

.cs-curve-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--journey-color);
  border: 3px solid var(--white);
  box-shadow: 0 0 0 1px var(--journey-color);
}

.cs-curve-tooltip {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  background: #eef3ff;
  border: 1px solid #c5d5fe;
  padding: 8px 12px;
  font-size: 0.72rem;
  line-height: 1.4;
  color: var(--black);
  white-space: nowrap;
  text-align: center;
}

.cs-curve-tooltip--above {
  bottom: calc(100% + 12px);
}

.cs-curve-tooltip--below {
  top: calc(100% + 12px);
}

/* Annotated screenshot layout */
.cs-annotated-wrap {
  display: grid;
  grid-template-columns: 220px 1fr 220px;
  gap: 28px;
  margin-top: 48px;
  align-items: start;
}

.cs-annotated-left,
.cs-annotated-right {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.cs-annotated-left {
  padding-top: 10%;
}

.cs-annotated-right {
  padding-top: 8%;
}

.cs-annotated-center {
  position: relative;
}

.cs-annotated-img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 4px;
}

/* Card styles */
.cs-annotated-card {
  padding: 20px;
  background: rgba(48, 108, 254, 0.1);
  border: 1.5px solid #306CFE;
  border-radius: 8px;
  transition: box-shadow 0.3s ease;
}

.cs-annotated-card:hover {
  box-shadow: 0 4px 20px rgba(48,108,254,0.12);
}

.cs-annotated-card h4 {
  font-family: var(--font-sans);
  font-size: 0.85rem;
  font-weight: 700;
  margin-bottom: 6px;
  color: var(--black);
}

.cs-annotated-card p {
  font-size: 0.8rem;
  line-height: 1.55;
  color: #555;
  margin: 0;
}

/* Dots on the image */
.cs-dot {
  position: absolute;
  width: 12px;
  height: 12px;
  background: #306CFE;
  border-radius: 50%;
  border: 2.5px solid var(--white);
  box-shadow: 0 0 0 1.5px #306CFE, 0 0 12px rgba(48,108,254,0.4);
  z-index: 2;
  pointer-events: none;
  transform: translate(-50%, -50%);
  animation: cs-dot-pulse 2.4s ease-in-out infinite;
}

/* Dot positions: on the edge of the image, aligned with card centers */
.cs-dot--1 { top: 17%; left: 0; transform: translate(-50%, -50%); }
.cs-dot--2 { top: 52%; left: 0; transform: translate(-50%, -50%); }
.cs-dot--3 { top: 19.5%; right: 0; left: auto; transform: translate(50%, -50%); }
.cs-dot--4 { top: 54.5%; right: 0; left: auto; transform: translate(50%, -50%); }

/* Connector lines: from card border to dot edge */
.cs-dot--1::after,
.cs-dot--2::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 50%;
  width: 28px;
  height: 1.5px;
  background: #306CFE;
  transform: translateY(-50%);
}

.cs-dot--3::after,
.cs-dot--4::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 28px;
  height: 1.5px;
  background: #306CFE;
  transform: translateY(-50%);
}

/* Left-only variant (no right column) */
.cs-annotated-wrap--left-only {
  grid-template-columns: 220px auto;
  justify-content: center;
  align-items: stretch;
}

.cs-annotated-wrap--left-only .cs-annotated-left {
  padding-top: 0;
  gap: 0;
  justify-content: space-around;
}

.cs-annotated-wrap--left-only .cs-annotated-img {
  max-width: 650px;
}

/* Dot positions for left-only 3-card layout */
.cs-dot--a { top: 15.5%; left: 0; transform: translate(-50%, -50%); }
.cs-dot--b { top: 48.5%; left: 0; transform: translate(-50%, -50%); }
.cs-dot--c { top: 83%; left: 0; transform: translate(-50%, -50%); }

/* Left-side connector lines for a/b/c dots (to card border) */
.cs-dot--a::after,
.cs-dot--b::after,
.cs-dot--c::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 50%;
  width: 28px;
  height: 1.5px;
  background: #306CFE;
  transform: translateY(-50%);
}

/* Right-only variant (no left column) */
.cs-annotated-wrap--right-only {
  grid-template-columns: auto 220px;
  justify-content: center;
  align-items: stretch;
}

.cs-annotated-wrap--right-only .cs-annotated-right {
  padding-top: 0;
  gap: 0;
  justify-content: space-around;
}

.cs-annotated-wrap--right-only .cs-annotated-img {
  max-width: 650px;
}

/* Dot positions for right-only 2-card layout */
.cs-dot--d { top: 25%; right: 0; left: auto; transform: translate(50%, -50%); }
.cs-dot--e { top: 75%; right: 0; left: auto; transform: translate(50%, -50%); }

/* Dot positions for left-only 2-card layout */
.cs-dot--f { top: 25%; left: 0; transform: translate(-50%, -50%); }
.cs-dot--g { top: 75%; left: 0; transform: translate(-50%, -50%); }

.cs-dot--f::after,
.cs-dot--g::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 50%;
  width: 28px;
  height: 1.5px;
  background: #306CFE;
  transform: translateY(-50%);
}

/* Right-side connector lines for d/e dots (to card border) */
.cs-dot--d::after,
.cs-dot--e::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 28px;
  height: 1.5px;
  background: #306CFE;
  transform: translateY(-50%);
}

/* Dot positions for Browse Similar right-only 2-card */
.cs-dot--h { top: 25%; right: 0; left: auto; transform: translate(50%, -50%); }
.cs-dot--i { top: 75%; right: 0; left: auto; transform: translate(50%, -50%); }

.cs-dot--h::after,
.cs-dot--i::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 28px;
  height: 1.5px;
  background: #306CFE;
  transform: translateY(-50%);
}

/* Dot position for Recently Viewed left-only 1-card */
.cs-dot--j { top: 50%; left: 0; transform: translate(-50%, -50%); }

.cs-dot--j::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 50%;
  width: 28px;
  height: 1.5px;
  background: #306CFE;
  transform: translateY(-50%);
}

/* Dot positions for More Ways to Explore right-only 2-card */
.cs-dot--k { top: 25%; right: 0; left: auto; transform: translate(50%, -50%); }
.cs-dot--l { top: 75%; right: 0; left: auto; transform: translate(50%, -50%); }

.cs-dot--k::after,
.cs-dot--l::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 28px;
  height: 1.5px;
  background: #306CFE;
  transform: translateY(-50%);
}

@keyframes cs-dot-pulse {
  0%, 100% { box-shadow: 0 0 0 1.5px #306CFE, 0 0 12px rgba(48,108,254,0.4); }
  50% { box-shadow: 0 0 0 1.5px #306CFE, 0 0 20px rgba(48,108,254,0.6), 0 0 40px rgba(48,108,254,0.15); }
}

/* ===========================
   Responsive
   =========================== */

@media (max-width: 1024px) {
  .cs-section {
    padding: 80px 0;
  }

  .cs-problems-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .cs-problems-grid--four {
    grid-template-columns: 1fr;
  }

  .cs-three-col {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .cs-req-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .cs-flow-breakdown {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .cs-versions {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .cs-image-row {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .cs-themes-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .cs-annotated-wrap,
  .cs-annotated-wrap--left-only {
    grid-template-columns: 1fr;
  }

  .cs-annotated-left,
  .cs-annotated-right {
    order: 2;
  }

  .cs-annotated-center {
    order: 1;
  }

  .cs-dot,
  .cs-dot--left {
    display: none;
  }
}

@media (max-width: 768px) {
  .cs-about-grid {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .cs-hero {
    padding: 60px 0 0;
  }

  .cs-hero-image {
    padding: 0 40px;
  }

  .cs-hero-title {
    font-size: 2rem;
  }

  .cs-section {
    padding: 64px 0;
  }

  .cs-section-title {
    font-size: 2rem;
  }

  .cs-pullquote {
    padding: 40px 24px;
    font-size: 1.1rem;
  }

  .cs-subsection-title {
    font-size: 1.1rem;
  }

  .cs-two-card-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .cs-two-col {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .cs-handoff-grid {
    grid-template-columns: 1fr;
  }

  .cs-final-grid {
    grid-template-columns: 1fr;
  }

  .cs-callout {
    padding: 24px;
  }
}

@media (max-width: 768px) {
  .cs-journey-map {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .cs-journey-map > * {
    min-width: 700px;
  }

  .cs-curve-area {
    min-width: 700px;
  }
}

@media (max-width: 480px) {
  .cs-hero {
    padding: 40px 0 0;
  }

  .cs-hero-title {
    font-size: 1.6rem;
  }

  .cs-hero-image {
    margin-top: 40px;
    padding: 0;
  }

  .cs-section {
    padding: 48px 0;
  }

  .cs-section-title {
    font-size: 1.7rem;
    margin-bottom: 28px;
  }

  .cs-body-text p,
  .cs-body-text li {
    font-size: 0.95rem;
  }

  .cs-pullquote {
    padding: 32px 20px;
    font-size: 1rem;
  }

  .cs-image-full {
    margin-top: 40px;
  }

  .cs-themes-grid {
    gap: 24px;
  }

  .cs-theme h4 {
    font-size: 1rem;
  }

  .cs-problem-card {
    padding: 24px;
  }

  .cs-card-col {
    padding: 24px;
  }

  .cs-flow-pills span {
    font-size: 0.85rem;
  }
}

/* ===========================
   Stylized UI Components
   =========================== */

.cs-component-showcase {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: start;
  margin-top: 32px;
  overflow: visible;
}

.cs-component-showcase--reverse .cs-component-details { order: 2; }
.cs-component-showcase--reverse .cs-component-image   { order: 1; }

.cs-component-image {
  display: flex;
  justify-content: center;
}

/* Images display at 50% of native pixels (exported at 2x) via HTML width attr */
.cs-component-img {
  max-width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
}


.cs-component-title {
  font-family: var(--font-serif);
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 12px;
  color: var(--black);
}

.cs-component-desc {
  font-size: 1.05rem;
  line-height: 1.7;
  color: #333;
  margin-bottom: 24px;
}

.cs-component-details h4 {
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 16px;
  color: var(--black);
}

.cs-component-details ul {
  list-style: none;
  padding: 0;
  margin: 0 0 20px;
}

.cs-component-details ul li {
  position: relative;
  padding-left: 20px;
  margin-bottom: 12px;
  font-size: 1rem;
  line-height: 1.6;
  color: #333;
}

.cs-component-details ul li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 10px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #306CFE;
}

.cs-component-closing {
  font-size: 1rem;
  line-height: 1.6;
  color: #333;
  font-style: italic;
}

.cs-dialog-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

@media (max-width: 768px) {
  .cs-component-showcase {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .cs-component-details { order: 1 !important; }

  .cs-component-image { order: 2 !important; }

  .cs-component-img {
    width: 100% !important;
    height: auto !important;
  }

  .cs-dialog-grid {
    grid-template-columns: 1fr;
  }

}

/* ===========================
   Hi Fi Designs
   =========================== */

.cs-hifi-showcase {
  display: grid;
  grid-template-columns: 55% 1fr;
  gap: 64px;
  align-items: center;
  margin-top: 32px;
}

.cs-hifi-showcase--reverse {
  grid-template-columns: 1fr 55%;
}

.cs-hifi-showcase--reverse .cs-hifi-content { order: 1; }
.cs-hifi-showcase--reverse .cs-hifi-image   { order: 2; }

.cs-hifi-image img {
  max-width: 100%;
  height: auto;
  display: block;
}

.cs-hifi-content {
  padding-top: 24px;
}

.cs-hifi-title {
  font-family: var(--font-serif);
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 12px;
  color: var(--black);
}

.cs-hifi-desc {
  font-size: 1.05rem;
  line-height: 1.7;
  color: #333;
  margin-bottom: 24px;
}

.cs-hifi-desc em {
  font-style: italic;
}

.cs-hifi-quote {
  padding: 36px;
  border: 1px solid #e5e5e5;
  border-radius: 0;
  background: var(--white);
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.7;
  color: #333;
  transition: box-shadow 0.3s ease;
}

.cs-hifi-quote:hover {
  box-shadow: 0 8px 32px rgba(0,0,0,0.08);
}

@media (max-width: 768px) {
  .cs-hifi-showcase {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .cs-hifi-content {
    padding-top: 0;
  }

  .cs-hifi-image img {
    width: 100% !important;
  }
}

/* ===========================
   User Testing Backlog
   =========================== */

/* Testing Metrics */
.cs-testing-metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-top: 48px;
}

.cs-metric-card {
  padding: 32px 24px;
  border: 1px solid #e5e5e5;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: box-shadow 0.3s ease;
}

.cs-metric-card:hover {
  box-shadow: 0 8px 32px rgba(0,0,0,0.08);
}

.cs-metric-number {
  font-family: var(--font-serif);
  font-size: 2rem;
  font-weight: 700;
  color: var(--black);
  letter-spacing: -0.02em;
}

.cs-metric-label {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #666;
}

/* Testing Table */
.cs-testing-table-wrap {
  margin-top: 24px;
  overflow-x: auto;
}

.cs-testing-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
  line-height: 1.6;
}

.cs-testing-table thead tr {
  border-bottom: 2px solid var(--black);
}

.cs-testing-table th {
  padding: 14px 16px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--black);
  text-align: center;
  white-space: nowrap;
}

.cs-testing-th--task {
  text-align: left !important;
  width: 50%;
}

.cs-testing-table td {
  padding: 18px 16px;
  border-bottom: 1px solid #eee;
  text-align: center;
  vertical-align: middle;
  color: #333;
}

.cs-testing-td--task {
  text-align: left !important;
  font-size: 0.95rem;
  color: #333;
  padding-right: 32px;
  line-height: 1.5;
}

.cs-testing-td--rate {
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--black);
}

.cs-testing-td--rate-low {
  color: #c62828;
}

.cs-testing-table tbody tr:hover {
  background: #fafafa;
}

/* Testing dot indicators */
.cs-test-dot {
  display: inline-block;
  width: 14px;
  height: 14px;
  min-width: 14px;
  border-radius: 50%;
  vertical-align: middle;
  border: none;
  outline: none;
  box-shadow: none;
  position: static;
}

.cs-test-dot--pass {
  background-color: #2e7d32;
}

.cs-test-dot--iterate {
  background-color: #f9a825;
}

.cs-test-dot--fail {
  background-color: #c62828;
}

/* Legend */
.cs-testing-legend {
  display: flex;
  align-items: center;
  gap: 32px;
  margin-top: 20px;
}

.cs-legend-item {
  display: inline-flex;
  align-items: center;
  font-size: 0.8rem;
  font-weight: 500;
  color: #666;
  letter-spacing: 0.03em;
  white-space: nowrap;
}

.cs-legend-item .cs-test-dot {
  width: 10px;
  height: 10px;
  min-width: 10px;
  flex-shrink: 0;
  margin-right: 10px;
}

/* Findings Grid */
.cs-findings-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 24px;
}

.cs-finding-card {
  padding: 36px;
  border: 1px solid #e5e5e5;
  transition: box-shadow 0.3s ease;
}

.cs-finding-card:hover {
  box-shadow: 0 8px 32px rgba(0,0,0,0.08);
}

.cs-finding-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.cs-finding-severity {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 0;
}

.cs-finding-severity--3 {
  background: #ffebee;
  color: #c62828;
}

.cs-finding-severity--2 {
  background: #fff8e1;
  color: #e65100;
}

.cs-finding-severity--1 {
  background: #e8f5e9;
  color: #2e7d32;
}

.cs-finding-tag {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #999;
}

.cs-finding-card h3 {
  font-family: var(--font-serif);
  font-size: 1.15rem;
  font-weight: 700;
  margin-bottom: 12px;
  color: var(--black);
}

.cs-finding-card p {
  font-size: 0.95rem;
  line-height: 1.7;
  color: #555;
}

@media (max-width: 1024px) {
  .cs-testing-metrics {
    grid-template-columns: repeat(2, 1fr);
  }

  .cs-findings-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .cs-testing-metrics {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }

  .cs-metric-card {
    padding: 24px 16px;
  }

  .cs-metric-number {
    font-size: 1.5rem;
  }

  .cs-testing-table {
    font-size: 0.85rem;
  }

  .cs-testing-th--task {
    min-width: 200px;
  }

  .cs-testing-table th,
  .cs-testing-table td {
    padding: 12px 10px;
  }

  .cs-findings-grid {
    grid-template-columns: 1fr;
  }
}

/* ===========================
   Developer Handoff Gallery
   =========================== */

.cs-handoff-gallery {
  margin-top: 48px;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.cs-handoff-item {
  margin-bottom: 16px;
}

.cs-handoff-label {
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--black);
  margin-bottom: 12px;
}

.cs-handoff-item img {
  max-width: 100%;
  height: auto;
  display: block;
}

.cs-handoff-item--scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid #e5e5e5;
  padding: 24px;
  background: #fafafa;
}

.cs-handoff-item--scroll img {
  max-width: none;
  height: 600px;
  width: auto;
}

/* ===========================
   Process Diagram
   =========================== */


/* Pills row */




/* Iteration arc */

/* Tasks grid */






/* Inline SVG wireframes — scale like the <img> variant they replace */
.cs-version-svg svg {
  width: 100%;
  height: auto;
  display: block;
}

/* Two-column variant — for wireframes that are near full-screen and unreadable at a third width */
.cs-versions--2col {
  grid-template-columns: repeat(2, 1fr);
}
@media (max-width: 1024px) {
  .cs-versions--2col {
    grid-template-columns: 1fr;
  }
}

/* Inline SVG final-feature wireframes — behave exactly like the <img> they replace */
div.cs-annotated-img {
  overflow: hidden;
}
div.cs-annotated-img svg {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 4px;
}

/* Blend Metrics final features: the wireframes have different proportions to the
   Marketeq screens, so these dots need their own vertical positions. The base
   .cs-dot--1..4 rules still supply side, transform and connector lines. */
.cs-dot--bm-1 { top: 27.8%; }
.cs-dot--bm-2 { top: 75.9%; }
.cs-dot--bm-3 { top: 24.3%; }
.cs-dot--bm-4 { top: 72.5%; }

/* Reusable annotation dots for the added Blend Metrics final features.
   Vertical position is set inline per dot, so no new letter class per annotation. */
.cs-dot--bm-l { left: 0; right: auto; transform: translate(-50%, -50%); }
.cs-dot--bm-r { right: 0; left: auto; transform: translate(50%, -50%); }
.cs-dot--bm-l::after,
.cs-dot--bm-r::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 28px;
  height: 1.5px;
  background: #306CFE;
  transform: translateY(-50%);
}
.cs-dot--bm-l::after { right: 50%; }
.cs-dot--bm-r::after { left: 50%; }

/* Blend Metrics: annotation cards laid out in a row beneath the image. For
   artwork whose subjects sit side by side (e.g. the three sidebar tabs), a
   left/right rail puts the cards nowhere near what they describe; a row under
   the image lets each card point straight up at its own panel. */
.cs-annotated-wrap--below {
  display: block;
}

.cs-annotated-below {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 46px;
}

/* Dot on the image's bottom edge, dropping a leader down toward its card. */
.cs-dot--bm-b {
  top: auto;
  bottom: 0;
  right: auto;
  transform: translate(-50%, 50%);
}

.cs-dot--bm-b::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1.5px;
  height: 30px;
  background: #306CFE;
  transform: translateX(-50%);
}

/* Stacked single column: the horizontal dot positions no longer map to a card. */
@media (max-width: 900px) {
  .cs-annotated-below {
    grid-template-columns: 1fr;
  }

  .cs-annotated-wrap--below .cs-dot {
    display: none;
  }
}

/* Blend Metrics: --left-only / --right-only zero the rail gap and lean on
   justify-content: space-around for spacing. When the cards nearly fill the
   rail there is no free space left to distribute, so they collapse into each
   other. Restore a floor. gap is a *minimum*, so space-around still
   distributes whatever slack remains — and the shared variants, which
   marketeq-projects also uses, stay untouched. */
.cs-annotated-wrap--spaced .cs-annotated-left,
.cs-annotated-wrap--spaced .cs-annotated-right {
  gap: 28px;
}

/* Full-width variant. Near full-screen artwork (the ~1300px step library popup)
   is unreadable in the default half-width column, which nests inside another
   two-column grid and lands it at ~256px. */
.cs-versions--1col {
  grid-template-columns: 1fr;
}
/* Full-width variant. Only for showcases laying several designs out side by
   side — the default 50/50 split squeezes them through two nested grids and
   lands each one around 256px. Single designs stay in the 50/50 layout. */
.cs-component-showcase--full {
  grid-template-columns: 1fr;
  gap: 28px;
}
.cs-component-showcase--full .cs-component-details {
  max-width: 780px;
}
/* Designs sit side by side across the full width, never stacked vertically. */
.cs-component-showcase--full .cs-dialog-grid {
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  gap: 24px;
  align-items: start;
  justify-items: center;
}

/* Step library screens: each state is its own dialog, so give each one an
   outline and a caption. Without the border the three screens bleed into the
   page and read as one run-on strip; without captions the three states
   (browse / search / empty) aren't distinguishable at a glance. */
.cs-dialog-item {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.cs-dialog-item .cs-component-img {
  border: 1px solid #DCDCDC;
}

.cs-dialog-item figcaption {
  font-size: 12px;
  font-weight: 700;
  color: #888888;
  text-align: center;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* Three small components of differing native sizes (692 / 692 / 264 wide).
   Across a full-width row they cover only ~62% of the band and the 264px one
   would have to upscale to fill a track. Stack them in the image column
   instead: a 2-col grid would leave an empty fourth slot. */
.cs-dialog-grid--col {
  grid-template-columns: 1fr;
  gap: 20px;
  justify-items: center;
}

.cs-dialog-grid--col .cs-component-img {
  width: auto;
  max-width: 100%;
}

/* Menus & Flyouts: three columns of equal width. The weighted tracks held every
   image to one shared scale, which made sense on paper but left the filter
   dropdown visibly smaller than the other two in the row. Equal columns read
   better even though the filter is a smaller component natively — its asset was
   re-cropped from source (264 -> 326 wide) so it holds up at this size. */
.cs-dialog-grid--menus,
.cs-component-showcase--full .cs-dialog-grid--menus {
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  align-items: start;
  justify-items: stretch;
}

.cs-dialog-grid--menus .cs-component-img {
  width: 100%;
  height: auto;
}


/* Where the image column runs far taller than the copy — three stacked
   components against four bullets — the text would sit in a pool of white with
   nothing beside it. Pin it so it tracks the images instead of stranding them. */
.cs-component-showcase--sticky .cs-component-details {
  position: sticky;
  top: 96px;
  align-self: start;
}

@media (max-width: 900px) {
  .cs-component-showcase--sticky .cs-component-details {
    position: static;
  }
}

/* Developer handoff. Every asset is a 1x export (the sources are 2x) and sits
   at its own native width — images flow along the row and wrap to the next one
   when they no longer fit, rather than being forced into fixed columns. Nothing
   is stretched up and no aspect ratio is touched; the only images that scale are
   the ones wider than the row, which max-width shrinks proportionally to fit. */
.cs-handoff-figs {
  display: flex;
  flex-wrap: wrap;
  gap: 40px 24px;
  align-items: flex-start;
  margin-top: 40px;
}

.cs-handoff-fig {
  margin: 0;
  flex: 0 0 auto;          /* keep native width — never shrink to pack a row */
  max-width: 100%;         /* except when wider than the row: scale down to fit */
}

.cs-handoff-fig img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Drag & Drop: the three states stack down the image column rather than running
   across one wide strip, so each one sits at roughly half the content width
   beside the copy. */
.cs-dialog-grid--drag {
  grid-template-columns: 1fr;
  gap: 20px;
}

/* User Research: survey charts, interview questions and pull quotes. */
.cs-research-charts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 48px 24px;
  margin-top: 44px;
  align-items: start;
}

.cs-research-chart {
  margin: 0;
}

.cs-research-chart h4 {
  margin: 0 0 20px;
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.45;
  color: var(--black);
  min-height: 3.9em;
}

.cs-research-chart-svg svg {
  width: 100%;
  height: auto;
  display: block;
}

.cs-research-chart figcaption {
  margin-top: 14px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #AAAAAA;
}

.cs-research-questions {
  margin: 36px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: q;
  max-width: 780px;
}

.cs-research-questions li {
  counter-increment: q;
  position: relative;
  padding: 18px 0 18px 52px;
  border-bottom: 1px solid #ECECEC;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--black);
}

.cs-research-questions li::before {
  content: counter(q);
  position: absolute;
  left: 0;
  top: 18px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(48, 108, 254, 0.1);
  border: 1.5px solid #306CFE;
  color: #306CFE;
  font-size: 0.8rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cs-research-quotes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 40px;
  align-items: start;
}

.cs-research-quote {
  margin: 0;
  padding: 28px;
  background: #FAFAFA;
  border-left: 3px solid #306CFE;
  border-radius: 0 8px 8px 0;
}

.cs-research-quote blockquote {
  margin: 0;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--black);
}

.cs-research-quote blockquote::before { content: '\201C'; }
.cs-research-quote blockquote::after  { content: '\201D'; }

.cs-research-quote figcaption {
  margin-top: 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.cs-research-quote figcaption span {
  font-size: 0.8rem;
  font-weight: 700;
  color: #888888;
}

.cs-research-quote figcaption em {
  font-style: normal;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #306CFE;
}

@media (max-width: 900px) {
  .cs-research-quotes { grid-template-columns: 1fr; }
  .cs-research-charts { grid-template-columns: 1fr; }
  .cs-research-chart h4 { min-height: 0; }
}

/* Two-up findings. The default grid is three columns; Referrizer surfaced two
   findings, and a third empty cell reads as a missing card rather than a choice. */
.cs-findings-grid--two {
  grid-template-columns: repeat(2, 1fr);
}

@media (max-width: 900px) {
  .cs-findings-grid--two {
    grid-template-columns: 1fr;
  }
}

/* The design process diagram is a single exported svg with its type outlined, so
   it needs no font and no reconstruction. It replaces a hand-built version that
   had the iteration arc looping the wrong two steps. */
.cs-process-figure {
  margin: 60px 0 0;
}

.cs-process-figure img {
  width: 100%;
  height: auto;
  display: block;
}

/* ============================================================
   MOBILE POLISH PASS
   Phone-only. Everything above (desktop + tablet) is untouched.
   <=768px fixes structure (journey map, stacked comment cards,
   three-up grids, card padding); <=600px steps the type scale down.
   Appended last so it wins the cascade over higher-specificity
   desktop rules like `.cs-component-showcase--full .cs-dialog-grid`.
   ============================================================ */

@media (max-width: 768px) {
  /* Journey experience map. Stays a horizontal scroller, but the rotated
     PHASE/EMOTIONS/ACTIONS gutter and the cells are tightened so more of the
     matrix reads per screen and the next phase peeks in as a scroll cue.
     The emotion curve gets min-width:0 so it fills its 1fr cell and lines up
     with the phase columns instead of running 100px wider than them. */
  .cs-journey-row { grid-template-columns: 52px 1fr; }
  .cs-journey-label { font-size: 0.56rem; padding: 6px 2px; letter-spacing: 0.05em; }
  .cs-journey-cell { padding: 12px 10px; font-size: 0.72rem; }
  .cs-journey-cell p,
  .cs-journey-cell li { font-size: 0.72rem; }
  .cs-journey-arrow { padding: 20px 0; }
  .cs-journey-map > * { min-width: 600px; }
  .cs-curve-area,
  .cs-journey-grid--curve { min-width: 0; }

  /* Three-up dialog grids that outrank the earlier mobile rule on specificity
     or source order. Force every variant to a single column on phones. */
  .cs-dialog-grid,
  .cs-dialog-grid--menus,
  .cs-dialog-grid--col,
  .cs-component-showcase--full .cs-dialog-grid,
  .cs-component-showcase--full .cs-dialog-grid--menus {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  /* Annotated "comment" cards. On desktop the left/right columns spread their
     cards along a tall image (gap:0 + space-around). Stacked on mobile that
     collapses to zero gap and the cards touch. Give every stacked card one
     even 20px gap, top-aligned, and flatten the seam between the two groups. */
  .cs-annotated-wrap,
  .cs-annotated-wrap--left-only,
  .cs-annotated-wrap--right-only,
  .cs-annotated-wrap--spaced,
  .cs-annotated-wrap--below {
    gap: 20px;
  }
  .cs-annotated-left,
  .cs-annotated-right,
  .cs-annotated-wrap--left-only .cs-annotated-left,
  .cs-annotated-wrap--right-only .cs-annotated-right,
  .cs-annotated-wrap--spaced .cs-annotated-left,
  .cs-annotated-wrap--spaced .cs-annotated-right {
    padding-top: 0;
    gap: 20px;
    justify-content: flex-start;
  }

  /* Card padding trimmed for narrow screens. */
  .cs-hifi-quote { padding: 24px; }
  .cs-req-card { padding: 24px; }
  .cs-callout { padding: 24px; }
}

@media (max-width: 600px) {
  /* Type scale — cut to a tight, professional mobile size. Desktop untouched. */
  .cs-title { font-size: 1.6rem; line-height: 1.25; }
  .cs-section-title { font-size: 1.25rem; line-height: 1.2; margin-bottom: 20px; }
  .cs-subtitle { font-size: 1.12rem; margin-bottom: 18px; }
  .cs-subsection-title { font-size: 0.95rem; }
  .cs-problem-title { font-size: 1rem; }
  .cs-component-title,
  .cs-hifi-title,
  .cs-two-col h3 { font-size: 1.1rem; }
  .cs-pullquote { font-size: 1.1rem; }

  .cs-body-text p,
  .cs-body-text li,
  .cs-problem-item p,
  .cs-problem-item li,
  .cs-two-col p,
  .cs-two-col li,
  .cs-component-desc,
  .cs-hifi-desc,
  .cs-hifi-quote,
  .cs-req-card,
  .cs-callout,
  .cs-component-details ul li {
    font-size: 0.95rem;
    line-height: 1.7;
  }

  /* Spacing: tighten the CSS-defined margins/padding that were sized for desktop
     so the mobile rhythm isn't cavernous. (The big inline margins in the markup
     are handled with clamp() at the source.) */
  .cs-pullquote { margin: 28px 0; padding: 28px 16px; }
  .cs-divider { margin: 28px 0; }
  .cs-problem-item { margin-bottom: 24px; }

  /* Card padding — tighter on phones so text isn't boxed in by the frame.
     (Container already adds 20px, so 18px card padding keeps a comfortable
     read without wasting a third of the width on gutters.) */
  .cs-problem-card,
  .cs-card-col,
  .cs-callout,
  .cs-hifi-quote,
  .cs-finding-card,
  .cs-req-card { padding: 18px; }
  .cs-callout { margin-top: 28px; }
  .cs-annotated-card { padding: 16px; }
}

/* ============================================================
   JOURNEY MAP — MOBILE / TABLET (scaled, not restacked)
   On small screens the real matrix (phases, emotion curve, points) is kept
   intact so it still reads as a journey session — it's laid out at a fixed
   design width and scaled down to fit by components.js. The scaler wrapper is
   display:contents above 900px, so desktop layout is byte-for-byte unchanged.
   Below 900px it becomes a clipping box whose height JS sets to the scaled map.
   The mobile-tightening from the earlier pass is reverted here so the scaled
   map keeps its full desktop proportions.
   ============================================================ */
.cs-journey-scaler { display: contents; }

@media (max-width: 900px) {
  .cs-journey-scaler {
    display: block;
    overflow: hidden;
    margin-top: 32px;
  }

  /* Restore desktop proportions inside the scaled map. */
  .cs-journey-map { margin-top: 0; }
  .cs-journey-row { grid-template-columns: 100px 1fr; }
  .cs-journey-label { font-size: 0.65rem; padding: 8px 4px; letter-spacing: 0.08em; }
  .cs-journey-cell { padding: 16px; font-size: 0.78rem; }
  .cs-journey-cell p,
  .cs-journey-cell li { font-size: 0.78rem; }
  .cs-journey-arrow { padding: 24px 0; }
  .cs-journey-map > * { min-width: 0; }
  .cs-curve-area,
  .cs-journey-grid--curve { min-width: 0; }
}