/* ==========================
   CASE STUDY — Minimal
   ========================== */

.case-page {
  max-width: 640px;
  margin: 0 auto;
  padding: 48px 24px 80px 64px;
  position: relative;
}

/* ---- Theme + lang toggles in case studies ---- */
.case-theme-toggle {
  position: absolute;
  top: 48px;
  right: 0;
  z-index: 100;
}
.case-lang-toggle {
  position: absolute;
  top: 48px;
  right: 32px;
  z-index: 100;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text3);
  padding: 6px;
  transition: color 0.2s;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.03em;
}
.case-lang-toggle:hover {
  color: var(--text);
}

/* ---- Sidebar (includes back button) ---- */
.case-sidebar {
  position: fixed;
  left: max(24px, calc((100vw - 640px) / 2 - 240px));
  top: 48px;
  width: 180px;
}

/* Per-item blur — applied only to sidebar links that vertically intersect
   with the solution-screen row. The sidebar itself stays put.
   Keep the existing color transition for hover states. */
.case-sidebar .case-back,
.case-sidebar .case-nav-link,
.case-sidebar .case-cta {
  transition: color 0.15s, filter 200ms ease-out;
}
.case-sidebar .case-back.is-blurred,
.case-sidebar .case-nav-link.is-blurred,
.case-sidebar .case-cta.is-blurred {
  filter: blur(4px);
}

.case-back {
  display: block;
  font-size: 14px;
  font-weight: 400;
  color: var(--text3);
  text-decoration: none;
  letter-spacing: 1px;
  margin-bottom: 24px;
  transition: color 0.15s;
}

.case-back:hover {
  color: var(--text);
}

.case-cta {
  display: inline;
  margin-top: 20px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 1px;
  color: var(--text2);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.15s;
}

.case-cta:hover {
  color: var(--text);
  text-decoration-color: #C8DDD4;
}

.case-sidebar ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.case-sidebar li {
  margin-bottom: 12px;
}

.case-nav-link {
  font-size: 14px;
  font-weight: 400;
  color: var(--text3);
  text-decoration: none;
  letter-spacing: 1px;
  transition: color 0.15s;
  display: block;
  line-height: 1.4;
}

.case-nav-link:hover {
  color: var(--text2);
}

.case-nav-link.active {
  color: var(--text);
  font-weight: 500;
}

/* ---- Content ---- */
.case-content {
  padding-top: 32px;
}

.case-header {
  margin-bottom: 48px;
}

.case-meta {
  font-size: 14px;
  color: var(--text3);
  letter-spacing: 1px;
  margin-bottom: 16px;
}

.case-title {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.5px;
  line-height: 1.6;
  margin-bottom: 12px;
}

.case-role {
  font-size: 14px;
  color: var(--text3);
  letter-spacing: 1px;
}

/* ---- Cover video ---- */
.case-cover-video {
  width: 100%;
  display: block;
  margin-top: 32px;
}

/* ---- AI role callout ---- */
.ai-role-callout {
  margin: 0 0 48px;
  padding: 20px 24px;
  border: 1px dashed #C8DDD4;
  border-radius: 8px;
  background: rgba(200, 221, 212, 0.06);
}

.ai-role-callout p.ai-role-title {
  font-size: 13px;
  font-weight: 600;
  color: #4a6b5c;
  letter-spacing: 0.5px;
  margin: 0 0 12px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.ai-role-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.ai-role-callout .ai-role-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ai-role-callout .ai-role-list li {
  font-size: 13px;
  color: var(--text2);
  letter-spacing: 0.3px;
  line-height: 1.6;
  padding-left: 16px;
  margin-bottom: 0;
  position: relative;
}

.ai-role-callout .ai-role-list li::before {
  content: '→';
  position: absolute;
  left: 0;
  top: 0;
  width: auto;
  height: auto;
  background: none;
  border-radius: 0;
  color: #C8DDD4;
}

/* ---- Sections ---- */
.case-content section {
  margin-bottom: 48px;
}

.case-h2 {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 1px;
  margin-bottom: 20px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}

.case-h3 {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 1px;
  color: var(--text);
  margin-top: 28px;
  margin-bottom: 8px;
}

.case-content p {
  font-size: 14px;
  color: var(--text);
  line-height: 2;
  letter-spacing: 1px;
  margin-bottom: 16px;
}

.case-content ul {
  list-style: none;
  padding: 0;
  margin: 0 0 20px;
}

.case-content li {
  font-size: 14px;
  color: var(--text);
  line-height: 2;
  letter-spacing: 1px;
  margin-bottom: 8px;
  padding-left: 24px;
  position: relative;
}

.case-content li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 10px;
  width: 12px;
  height: 12px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C8DDD4' stroke-width='2'%3E%3Cpath d='M9 18l6-6-6-6'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
}

/* ---- Overview: Content Needs diagram ---- */
/* ---- Content Needs: Morphing Animation ---- */
.cn-morph {
  margin: 32px 0;
  padding: 24px;
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  height: 392px;
}

.cn-morph-title {
  text-align: center;
  font-size: 13px;
  font-weight: 500;
  color: var(--text2);
  letter-spacing: 0.5px;
  margin-bottom: 16px;
  transition: color 0.5s;
}

/* Label row — fixed height container for bracket / merged label */
.cn-morph-label-row {
  height: 20px;
  margin-bottom: 12px;
  position: relative;
}

/* Merged label — centered above zones in state 2 */
.cn-morph-merged-label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.3px;
  color: #3a9e6e;
  opacity: 0;
  position: absolute;
  inset: 0;
  transition: opacity 0.5s;
}

/* Opportunity bracket */
.cn-morph-bracket {
  display: flex;
  align-items: center;
  gap: 10px;
  opacity: 0;
  position: absolute;
  inset: 0;
  transition: opacity 0.5s;
}

.cn-morph-bracket-line {
  flex: 1;
  height: 1px;
  border-top: 1px dashed #e89b3f;
}

.cn-morph-bracket-text {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.5px;
  color: #e89b3f;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Body: the two zones */
.cn-morph-body {
  display: flex;
  gap: 12px;
  align-items: stretch;
  min-height: 130px;
  border-radius: 8px;
  border: 1px solid transparent;
  background: transparent;
  transition: background 0.6s, border-color 0.6s;
}

.cn-morph-zone {
  border-radius: 8px;
  padding: 14px 12px;
  transition: background 0.6s, border-color 0.6s, border-radius 0.6s cubic-bezier(0.4, 0, 0.2, 1), border-style 0.3s;
}

.cn-morph-zone--left {
  flex: 1 1 55%;
  background: #FFF5F5;
  border: 1px dashed #e8a0a0;
}

.cn-morph-zone--right {
  flex: 1 1 40%;
  background: #F0FAF5;
  border: 1px solid #C8DDD4;
}

.cn-morph-zone--right .cn-morph-chip {
  flex: 1 1 100%;
  min-width: 100%;
}

.cn-morph-zone-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.3px;
  margin-bottom: 10px;
  white-space: nowrap;
  height: 18px;
  overflow: hidden;
  transition: color 0.6s, opacity 0.6s, height 0.6s cubic-bezier(0.4, 0, 0.2, 1), margin 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

#cn-morph-label-left { color: #c25050; }
#cn-morph-label-right { color: #3a9e6e; }

.cn-morph-zone-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
  transition: background 0.5s;
}

.cn-morph-zone-dot--gap { background: #e85d5d; }
.cn-morph-zone-dot--covered { background: #C8DDD4; }

.cn-morph-chips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.cn-morph-chip {
  flex: 1 1 calc(50% - 3px);
  min-width: calc(50% - 3px);
  padding: 10px 12px;
  background: #fff;
  border: 1px dashed #e8a0a0;
  border-radius: 6px;
  text-align: center;
  font-size: 12px;
  letter-spacing: 0.3px;
  color: var(--text2);
  line-height: 1.4;
  transition: border-color 0.5s, border-style 0.3s, background 0.5s;
}

.cn-morph-chip--green {
  border: 1px solid #C8DDD4;
  background: #fff;
}

.cn-morph-arrow {
  display: flex;
  align-items: center;
  font-size: 16px;
  color: var(--text3);
  flex-shrink: 0;
  width: 20px;
  overflow: hidden;
  transition: opacity 0.6s, width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.cn-morph-caption {
  margin-top: 16px;
  font-size: 12px;
  color: var(--text3);
  letter-spacing: 0.5px;
  line-height: 1.5;
  text-align: center;
  transition: opacity 0.3s;
}

/* ---- State 1: Opportunity ---- */
.cn-morph[data-state="1"] .cn-morph-bracket {
  opacity: 1;
}

.cn-morph[data-state="1"] .cn-morph-zone--left {
  border-color: #e89b3f;
  background: #FFF8EE;
}

.cn-morph[data-state="1"] #cn-morph-label-left {
  color: #e89b3f;
}

.cn-morph[data-state="1"] .cn-morph-zone-dot--gap {
  background: #e89b3f;
}

.cn-morph[data-state="1"] .cn-morph-zone--left .cn-morph-chip {
  border-color: #e89b3f;
  background: #FFF8EE;
}

/* ---- State 2: Merged ---- */
.cn-morph[data-state="2"] .cn-morph-bracket {
  opacity: 0;
}

.cn-morph[data-state="2"] .cn-morph-merged-label {
  opacity: 1;
}

.cn-morph[data-state="2"] .cn-morph-body {
  background: #F0FAF5;
  border: 1px solid #C8DDD4;
  border-radius: 8px;
}

.cn-morph[data-state="2"] .cn-morph-arrow {
  opacity: 0;
}

.cn-morph[data-state="2"] .cn-morph-zone--left {
  background: transparent;
  border-color: transparent;
  border-style: solid;
}

.cn-morph[data-state="2"] .cn-morph-zone--right {
  background: transparent;
  border-color: transparent;
}

.cn-morph[data-state="2"] .cn-morph-zone-label {
  visibility: hidden;
}

.cn-morph[data-state="2"] .cn-morph-zone-dot--gap {
  background: #C8DDD4;
}

.cn-morph[data-state="2"] .cn-morph-zone--left .cn-morph-chip {
  border-color: #C8DDD4;
  border-style: solid;
  background: #F5FBF8;
}

/* ---- Research: Insight Cards ---- */
.insight-cards {
  margin: 32px 0;
}

.insight-card {
  padding: 16px 20px;
  border: 1px solid var(--border);
  border-radius: 8px;
  margin-bottom: 12px;
  position: relative;
  transition: border-color 0.2s;
}

.insight-card:hover {
  border-color: #C8DDD4;
}

.insight-card-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 1px;
  padding: 3px 8px;
  border-radius: 3px;
  margin-bottom: 8px;
}

.insight-card-badge--user {
  background: #e8f0fe;
  color: #1a73e8;
}

.insight-card-badge--business {
  background: #fef7e0;
  color: #b8860b;
}

.insight-card-title {
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  letter-spacing: 0.5px;
  line-height: 1.5;
  margin-bottom: 4px;
}

.insight-card-desc {
  font-size: 13px;
  color: var(--text3);
  letter-spacing: 0.5px;
  line-height: 1.5;
}

/* ---- Business Intent: Stakeholder Map ---- */
/* Team goals */
.team-goals {
  margin: 28px 0;
}

.team-goal-row {
  display: flex;
  gap: 24px;
  padding: 16px 0;
  border-top: 1px solid var(--border);
}

.team-goal-row:last-child {
  border-bottom: 1px solid var(--border);
}

.team-goal-name {
  flex-shrink: 0;
  width: 110px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: 0.5px;
  padding-top: 1px;
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.team-goal-icon {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  color: var(--text3);
  position: relative;
  top: 2px;
}

.team-goal-detail {
  flex: 1;
  min-width: 0;
}

.team-goal-need {
  font-size: 13px;
  color: var(--text2);
  letter-spacing: 0.3px;
  line-height: 1.6;
  margin-bottom: 6px;
}

.team-goal-target {
  font-size: 12px;
  font-weight: 500;
  color: #4a6b5c;
  letter-spacing: 0.3px;
  line-height: 1.5;
  padding: 8px 12px;
  border: 1px dashed #C8DDD4;
  border-radius: 6px;
  background: rgba(200, 221, 212, 0.06);
  display: inline-block;
}

@media (max-width: 500px) {
  .team-goal-row {
    flex-direction: column;
    gap: 6px;
  }
  .team-goal-name {
    width: auto;
  }
}

@media (max-width: 700px) {
  .cn-morph {
    height: auto;
  }

  .cn-morph-body {
    flex-direction: column;
    gap: 8px;
  }

  .cn-morph-arrow {
    justify-content: center;
    transform: rotate(90deg);
    width: auto;
    height: 20px;
  }

  .cn-morph[data-state="2"] .cn-morph-arrow {
    opacity: 0;
  }
}

/* ---- Impact list ---- */
.impact-list {
  list-style: none;
  padding: 0;
  margin: 0 0 20px;
}

.impact-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  color: var(--text);
  line-height: 2;
  letter-spacing: 1px;
  margin-bottom: 16px;
  padding-left: 0 !important;
}

.impact-item::before {
  display: none !important;
}

.impact-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  margin-top: 8px;
  color: #C8DDD4;
}

/* ---- Emphasis line ---- */
.case-emphasis {
  font-weight: 500;
  font-style: italic;
}

.callout-box {
  margin: 24px 0;
  padding: 20px 24px;
  border: 1px dashed #C8DDD4;
  border-radius: 8px;
  background: rgba(200, 221, 212, 0.06);
}

.callout-box p {
  font-size: 13px;
  color: var(--text2);
  letter-spacing: 0.3px;
  line-height: 1.6;
  margin: 0;
}

.callout-box p.callout-box-title {
  font-size: 13px;
  font-weight: 600;
  color: #4a6b5c;
  letter-spacing: 0.5px;
  margin: 0 0 12px;
}

/* ---- Annotated Phone (Scroll-driven) ---- */
.annotated-track {
  position: relative;
  margin: 32px 0 0;
}

.annotated-inline {
  display: flex;
  gap: 32px;
  align-items: flex-start;
}

.annotated-phone-frame {
  position: sticky;
  top: 120px;
  flex-shrink: 0;
  width: 220px;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--bg2);
}

.annotated-phone-frame img {
  width: 100%;
  display: block;
}

/* Red highlight overlays — one per problem */
.annotated-highlight {
  position: absolute;
  background: rgba(200, 60, 60, 0.2);
  border: 1.5px solid rgba(200, 60, 60, 0.45);
  border-radius: 6px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
}

.annotated-highlight.is-active {
  opacity: 1;
  animation: annotated-pulse 2s ease-in-out infinite;
}

@keyframes annotated-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(200, 60, 60, 0.15); }
  50% { box-shadow: 0 0 0 4px rgba(200, 60, 60, 0.1); }
}

/* Problem steps */
.annotated-scroll-steps {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.annotated-step {
  opacity: 0.3;
  transition: opacity 0.4s ease;
}

.annotated-step.is-active {
  opacity: 1;
}

.annotated-track .annotated-step-title {
  font-size: 13px;
  font-weight: 600;
  color: #4a6b5c;
  letter-spacing: 0.3px;
  line-height: 1.4;
  margin: 0 0 8px;
}

.annotated-track .annotated-step-desc {
  font-size: 13px;
  color: var(--text2);
  letter-spacing: 0.3px;
  line-height: 1.7;
  margin: 0;
}

@media (max-width: 600px) {
  .annotated-inline {
    flex-direction: column;
    align-items: center;
  }
  .annotated-phone-frame {
    position: relative;
    top: 0;
    width: 200px;
  }
  .annotated-step {
    opacity: 1;
  }
  .annotated-highlight {
    display: none;
  }
}

/* ---- Quote ---- */
.case-quote {
  font-size: 14px;
  font-style: italic;
  color: var(--text3);
  line-height: 2;
  letter-spacing: 1px;
  margin-bottom: 20px;
  padding-left: 16px;
  border-left: 2px solid var(--border2);
}

/* ---- Journey Diagram ---- */
.journey-diagram {
  margin: 32px 0;
  padding: 24px 0;
}

.journey-opportunity {
  text-align: center;
  margin-bottom: 12px;
}

.journey-opportunity-label {
  color: #C8DDD4;
  font-weight: 500;
  letter-spacing: 1px;
}

.journey-flow {
  display: flex;
  align-items: stretch;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
}

.journey-step {
  flex: 1 1 0;
  min-width: 110px;
  max-width: 220px;
  padding: 14px 10px;
  text-align: center;
  letter-spacing: 1px;
  line-height: 1.5;
  display: flex;
  align-items: center;
  justify-content: center;
}
.journey-arrow {
  flex: 0 0 auto;
}

/* reserveLangSpace() applies white-space:nowrap + min-width:<measured> to any
   [data-en] element not in its exclusion list. Too aggressive for flex cells,
   headings, and wider items — undo it where wrapping is desirable. */
.journey-step [data-en],
.journey-step[data-en],
.case-h2[data-en],
.case-h3[data-en] {
  white-space: normal !important;
  min-width: 0 !important;
}
/* For item-style boxes we keep min-width (layout stability across langs)
   and only need to allow the text to wrap. */
.direction-item[data-en],
.direction-item [data-en],
.labyrinth-leaf[data-en],
.labyrinth-mobile-pill[data-en] {
  white-space: normal !important;
}

/* Opt OUT of reserveLangSpace()'s min-height reservation for multi-line
   body content whose height naturally differs between languages.
   Reserving one language's height leaves awkward whitespace in the other.
   The 0.25s height transition in main.js absorbs the adjustment smoothly.
   Also undo the nowrap so text can wrap naturally inside the row. */
.impact-item [data-en],
.impact-item[data-en],
.spectrum-scroll-hint [data-en],
.page-tab-scroll-hint [data-en] {
  min-height: 0 !important;
  min-width: 0 !important;
  white-space: normal !important;
}

.journey-step--solid {
  border: 1.5px solid var(--text);
  color: var(--text);
  font-weight: 500;
}

.journey-step--dashed {
  border: 1.5px dashed var(--text3);
  color: var(--text2);
}

.journey-arrow {
  color: var(--text3);
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.journey-platforms {
  display: flex;
  align-items: flex-start;
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px dashed var(--border2);
}

.journey-platform-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.journey-platform-group:first-child {
  flex: 3;
}

.journey-platform-end {
  flex: 1;
  text-align: right;
}

.journey-platform-label {
  color: var(--text2);
  letter-spacing: 1px;
}

.journey-platform-icons {
  color: var(--text3);
  letter-spacing: 1px;
}

@media (max-width: 700px) {
  .journey-flow {
    flex-direction: column;
    gap: 4px;
  }
  .journey-arrow {
    transform: rotate(90deg);
  }
  .journey-platforms {
    flex-direction: column;
    gap: 12px;
  }
  .journey-platform-end {
    text-align: left;
  }
}

/* ---- Labyrinth Framework ---- */
.labyrinth {
  margin: 32px 0;
  padding: 32px 0 16px;
  position: relative;
}

.labyrinth-note {
  color: var(--text3);
  font-style: italic;
  margin-bottom: 20px;
}

.labyrinth-grid {
  display: flex;
  gap: 16px;
  position: relative;
  z-index: 2;
}

.labyrinth-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.labyrinth-cat {
  font-weight: 500;
  color: var(--text);
  letter-spacing: 1px;
  padding-bottom: 8px;
  border-bottom: 1.5px solid var(--text);
  text-align: center;
  margin-bottom: 4px;
}

.labyrinth-leaf {
  padding: 10px 8px;
  color: var(--text2);
  letter-spacing: 1px;
  border: 1px dashed var(--border2);
  text-align: center;
  cursor: default;
  transition: all 0.25s ease;
}

.labyrinth-leaf.is-source {
  background: #C8DDD4;
  color: #111111;
  border-color: #C8DDD4;
  font-weight: 500;
  border-style: solid;
}

.labyrinth-leaf.is-connected {
  background: rgba(200, 221, 212, 0.25);
  border-color: #C8DDD4;
  color: var(--text);
  border-style: solid;
}

.labyrinth-leaf.is-dimmed {
  opacity: 0.3;
}

.labyrinth-user {
  margin-top: 12px;
  padding: 10px 8px;
  background: #C8DDD4;
  color: #111111;
  font-weight: 500;
  letter-spacing: 1px;
  text-align: center;
}

.labyrinth-svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

.labyrinth-svg line {
  stroke: #C8DDD4;
  stroke-width: 1.5;
  stroke-dasharray: 4 3;
  opacity: 0;
  transition: opacity 0.25s ease;
}

.labyrinth-svg line.is-visible {
  opacity: 0.6;
}

.labyrinth-path {
  text-align: center;
  color: var(--text3);
  font-style: italic;
  letter-spacing: 1px;
  margin-top: 16px;
  height: 56px;
  transition: opacity 0.25s ease;
}

@media (min-width: 701px) {
  .labyrinth-mobile {
    display: none !important;
  }
}

@media (max-width: 700px) {
  .labyrinth-grid {
    display: none;
  }
  .labyrinth-svg {
    display: none;
  }
  .labyrinth-note {
    display: none;
  }
  .labyrinth-path {
    height: auto;
    min-height: 0;
  }
  .labyrinth-mobile {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }
  .labyrinth-mobile-row {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .labyrinth-mobile-cat {
    font-weight: 500;
    color: var(--text);
    letter-spacing: 1px;
    padding-bottom: 6px;
    border-bottom: 1.5px solid var(--text);
  }
  .labyrinth-mobile-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }
  .labyrinth-mobile-pill {
    padding: 8px 16px;
    border: 1px dashed var(--border2);
    color: var(--text2);
    letter-spacing: 1px;
    cursor: pointer;
    transition: all 0.25s ease;
    -webkit-tap-highlight-color: transparent;
  }
  .labyrinth-mobile-pill.is-source {
    background: #C8DDD4;
    color: #111111;
    border-color: #C8DDD4;
    font-weight: 500;
    border-style: solid;
  }
  .labyrinth-mobile-pill.is-connected {
    background: rgba(200, 221, 212, 0.25);
    border-color: #C8DDD4;
    color: var(--text);
    border-style: solid;
  }
  .labyrinth-mobile-pill.is-dimmed {
    opacity: 0.3;
  }
  .labyrinth-mobile-user {
    padding: 10px 16px;
    background: #C8DDD4;
    color: #111111;
    font-weight: 500;
    letter-spacing: 1px;
    text-align: center;
  }
  .labyrinth-mobile-result {
    text-align: center;
    color: var(--text3);
    font-style: italic;
    letter-spacing: 1px;
    min-height: 44px;
    line-height: 1.6;
  }
  .labyrinth-mobile-hint {
    text-align: center;
    color: var(--text3);
    font-style: italic;
    letter-spacing: 1px;
  }
}

/* Hidden on desktop, shown via media query */

/* ---- Content Spectrum ---- */
.spectrum {
  margin: 32px 0;
  padding: 24px 0;
  user-select: none;
}

.spectrum-ends {
  display: flex;
  justify-content: space-between;
  margin-bottom: 16px;
}

.spectrum-end {
  font-weight: 500;
  letter-spacing: 1px;
}

.spectrum-end--inspire {
  color: #C8DDD4;
}

.spectrum-end--sell {
  color: var(--text2);
}

.spectrum-track {
  position: relative;
  height: 64px;
  margin-bottom: 12px;
}

.spectrum-line {
  position: absolute;
  top: 35%;
  left: 0;
  right: 0;
  height: 1px;
  border-top: 1px dashed var(--border2);
}

.spectrum-zone {
  position: absolute;
  left: 25%;
  right: 25%;
  top: 35%;
  height: 1px;
  border-left: 1px dashed var(--border2);
  border-right: 1px dashed var(--border2);
  pointer-events: none;
  transition: border-color 0.3s;
}

.spectrum-zone.is-active {
  border-color: #C8DDD4;
}

.spectrum-zone-label {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  color: var(--text3);
  letter-spacing: 2px;
  white-space: nowrap;
  transition: color 0.3s;
}

.spectrum-zone.is-active .spectrum-zone-label {
  color: #C8DDD4;
}

.spectrum-handle {
  position: absolute;
  top: 35%;
  left: 50%;
  width: 18px;
  height: 18px;
  margin-top: -9px;
  margin-left: -9px;
  background: #C8DDD4;
  border-radius: 50%;
  cursor: grab;
  z-index: 3;
  transition: transform 0.15s;
}

.spectrum-handle::before {
  content: '';
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  border: 1.5px solid rgba(200, 221, 212, 0.5);
  animation: spectrum-pulse 2s ease-in-out infinite;
}

.spectrum-handle::after {
  content: '';
  position: absolute;
  inset: -16px;
  border-radius: 50%;
  border: 1px solid rgba(200, 221, 212, 0.25);
  animation: spectrum-pulse 2s ease-in-out 0.4s infinite;
}

@keyframes spectrum-pulse {
  0%, 100% { transform: scale(0.85); opacity: 1; }
  50% { transform: scale(1.1); opacity: 0.4; }
}

.spectrum-handle:hover {
  transform: scale(1.15);
}

.spectrum-handle.is-dragging {
  cursor: grabbing;
  transform: scale(1.2);
}

.spectrum-handle.is-dragging::before,
.spectrum-handle.is-dragging::after {
  animation: none;
  opacity: 0.6;
  transform: scale(1);
}

.spectrum-markers {
  position: absolute;
  top: 35%;
  left: 0;
  right: 0;
  pointer-events: none;
}

.spectrum-marker {
  position: absolute;
  top: 0;
  width: 6px;
  height: 6px;
  margin-top: -3px;
  margin-left: -3px;
  border-radius: 50%;
  background: var(--border2);
  transition: background 0.3s, transform 0.3s;
}

.spectrum-marker.is-active {
  background: #C8DDD4;
  transform: scale(1.4);
}

.spectrum-active-label {
  text-align: center;
  font-weight: 500;
  color: var(--text);
  letter-spacing: 1px;
  min-height: 28px;
  margin-bottom: 4px;
  transition: opacity 0.2s;
}

.spectrum-active-sub {
  text-align: center;
  color: var(--text3);
  letter-spacing: 1px;
  min-height: 20px;
}

.spectrum-hint {
  text-align: center;
  color: var(--text3);
  font-style: italic;
  letter-spacing: 1px;
  margin-top: 16px;
}

/* ---- Page Tabs (Landing / Curation / Destination) ---- */
.page-tabs {
  margin: 32px -24px;
  padding: 32px 24px;
  background: rgba(0,0,0,0.025);
  border-radius: 0;
}

.page-tabs-nav {
  display: flex;
  justify-content: center;
}

.page-tabs-nav-inner {
  display: inline-flex;
  position: relative;
  border-radius: 100px;
  padding: 4px;
  background: rgba(0,0,0,0.06);
}

/* Sliding indicator behind active tab */
.page-tabs-indicator {
  position: absolute;
  top: 4px;
  bottom: 4px;
  border-radius: 100px;
  background: var(--text);
  transition: left 0.35s cubic-bezier(0.4, 0, 0.2, 1), width 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 0;
}

.page-tab-btn {
  padding: 8px 20px;
  background: none;
  border: none;
  border-radius: 100px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 13px;
  font-weight: 400;
  color: var(--text3);
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: color 0.25s;
  text-align: center;
  -webkit-tap-highlight-color: transparent;
  white-space: nowrap;
  position: relative;
  z-index: 1;
}

.page-tab-btn:hover {
  color: var(--text2);
}

.page-tab-btn.is-active {
  color: #fff;
  font-weight: 500;
}

.page-tab-desc {
  font-size: 13px;
  color: var(--text2);
  letter-spacing: 0.5px;
  line-height: 1.6;
  text-align: center;
  margin: 16px auto 4px;
  max-width: 320px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.page-tab-phone-outer {
  position: relative;
  margin-top: 12px;
}

.page-tab-phone {
  width: 280px;
  aspect-ratio: 9 / 19.5;
  margin: 0 auto;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid var(--border);
  position: relative;
  background: var(--bg);
}

.page-tab-frame {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.page-tab-frame::-webkit-scrollbar {
  display: none;
}

.page-tab-frame.is-active {
  opacity: 1;
  pointer-events: auto;
}

.page-tab-frame img {
  width: 100%;
  display: block;
}

/* Scroll indicator for page tabs phone */
.page-tab-scrollbar {
  position: absolute;
  right: 3px;
  top: 8px;
  bottom: 8px;
  width: 3px;
  border-radius: 2px;
  background: transparent;
  opacity: 0;
  transition: opacity 0.3s;
  z-index: 2;
}

.page-tab-phone:hover .page-tab-scrollbar {
  opacity: 1;
}

.page-tab-scroll-thumb {
  position: absolute;
  top: 0;
  width: 100%;
  border-radius: 2px;
  background: var(--text3);
  opacity: 0.4;
  transition: top 0.1s;
}

.page-tab-scroll-hint {
  position: absolute;
  left: calc(50% + 140px + 16px);
  top: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  color: var(--text3);
  letter-spacing: 1px;
  font-size: 14px;
  transition: opacity 0.4s ease;
  writing-mode: vertical-rl;
  white-space: nowrap;
}

.page-tab-scroll-hint.is-hidden {
  opacity: 0;
}

.page-tab-scroll-hint svg {
  width: 14px;
  height: 14px;
  animation: scroll-hint-bounce 1.5s ease-in-out infinite;
}

@media (max-width: 700px) {
  .page-tab-phone {
    width: 240px;
  }

  .page-tab-scroll-hint {
    position: static;
    writing-mode: horizontal-tb;
    justify-content: center;
    margin-top: 8px;
  }
}

/* ---- Spectrum Preview ---- */
.spectrum-preview-outer {
  position: relative;
  margin-top: 24px;
}

.spectrum-preview {
  position: relative;
  width: 280px;
  aspect-ratio: 9 / 19.5;
  margin: 0 auto;
  border: 1px solid var(--border2);
  border-radius: 20px;
  overflow: hidden;
}

/* ---- Scroll-synced Annotation ---- */
.spectrum-annotation {
  position: absolute;
  right: calc(50% + 140px + 16px);
  top: 0;
  bottom: 0;
  width: 160px;
  overflow: hidden;
  pointer-events: none;
}

.spectrum-annotation-card {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  text-align: right;
  padding-right: 12px;
  border-right: 1px dashed var(--border2);
  transform: translateY(100px);
  opacity: 0;
  filter: blur(4px);
  transition: transform 0.4s ease, opacity 0.4s ease, filter 0.4s ease;
}

.spectrum-annotation-card.is-active {
  transform: translateY(-50%);
  opacity: 1;
  filter: blur(0);
}

.spectrum-annotation-card.is-exiting {
  transform: translateY(calc(-100% - 60px));
  opacity: 0;
  filter: blur(4px);
}

.spectrum-annotation-badge {
  display: inline-block;
  font-size: 14px;
  letter-spacing: 1px;
  font-weight: 500;
  padding: 2px 8px;
  margin-bottom: 6px;
}

.spectrum-annotation-badge--inspiring {
  background: rgba(200, 221, 212, 0.2);
  color: #C8DDD4;
}

.spectrum-annotation-badge--blog {
  background: rgba(250, 204, 21, 0.15);
  color: #d4a017;
}

.spectrum-annotation-badge--product {
  background: rgba(239, 68, 68, 0.12);
  color: #ef4444;
}

.spectrum-annotation-title {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.5px;
  color: var(--text);
  line-height: 1.5;
  margin-bottom: 4px;
}

.spectrum-annotation-desc {
  font-size: 14px;
  letter-spacing: 0.5px;
  color: var(--text3);
  line-height: 1.5;
}

@media (max-width: 700px) {
  .spectrum-annotation {
    display: none;
  }
}

.spectrum-preview-frame {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.4s ease;
  background: var(--bg);
  overflow-y: auto;
  pointer-events: none;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.spectrum-preview-frame::-webkit-scrollbar {
  display: none;
}

.spectrum-preview-frame.is-active {
  opacity: 1;
  pointer-events: auto;
}

/* Placeholder content (removed when real images are added) */
.spectrum-preview-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100%;
  padding: 24px;
  text-align: center;
}

.spectrum-preview-badge {
  font-size: 14px;
  letter-spacing: 2px;
  color: #C8DDD4;
  font-weight: 500;
  margin-bottom: 12px;
  text-transform: uppercase;
}

.spectrum-preview-title {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 1px;
  color: var(--text);
  margin-bottom: 8px;
}

.spectrum-preview-desc {
  font-size: 14px;
  letter-spacing: 1px;
  color: var(--text3);
  line-height: 1.6;
}

.spectrum-preview-img {
  width: 100%;
  display: block;
}

/* Scroll indicator */
.spectrum-scroll-indicator {
  position: absolute;
  right: 6px;
  top: 12px;
  bottom: 12px;
  width: 3px;
  border-radius: 3px;
  background: var(--border);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
  z-index: 2;
}

.spectrum-preview:hover .spectrum-scroll-indicator {
  opacity: 1;
}

.spectrum-scroll-thumb {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  border-radius: 3px;
  background: var(--text3);
  transition: height 0.15s ease, top 0.15s ease;
}

.spectrum-scroll-hint {
  position: absolute;
  left: calc(50% + 140px + 16px);
  top: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  color: var(--text3);
  letter-spacing: 1px;
  font-size: 14px;
  transition: opacity 0.4s ease;
  writing-mode: vertical-rl;
}

@media (max-width: 700px) {
  .spectrum-scroll-hint {
    position: static;
    writing-mode: horizontal-tb;
    justify-content: center;
    margin-top: 8px;
  }
}

.spectrum-scroll-hint.is-hidden {
  opacity: 0;
}

.spectrum-scroll-hint svg {
  width: 14px;
  height: 14px;
  animation: scroll-hint-bounce 1.5s ease-in-out infinite;
}

@keyframes scroll-hint-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(3px); }
}

.spectrum-preview-caption {
  font-size: 14px;
  color: var(--text3);
  letter-spacing: 1px;
  text-align: center;
  margin-top: 8px;
}

/* ==========================
   Design evolution — 3-stop slider
   (reuses .spectrum-* machinery above; only the stop-labels and arrow
   treatment are new, plus a slight preview/track tightening)
   ========================== */
.evolution-section {
  margin: 48px 0 48px;
  font-family: 'Plus Jakarta Sans', sans-serif;
}
.evolution-section .case-h2 {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}
.evolution-subtitle {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 14px;
  color: var(--text3);
  letter-spacing: 1px;
  margin: 4px 0 0;
}
.evolution-rule {
  border: none;
  border-top: 1px solid var(--border);
  margin: 16px 0 32px;
}

.spectrum.evolution {
  padding-top: 0;
}
/* Stop labels row — each label is absolutely positioned to sit directly
   above its matching marker (16.667% / 50% / 83.333%). */
.evolution-labels {
  position: relative;
  height: 32px;
  margin-bottom: 4px;
}
.evolution-stop {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  width: 160px;
  max-width: 30vw;
  text-align: center;
  transition: opacity 0.3s;
}
.evolution-stop:nth-child(1) { left: 16.667%; }
.evolution-stop:nth-child(2) { left: 50%; }
.evolution-stop:nth-child(3) { left: 83.333%; }
.evolution-stop-title {
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  letter-spacing: 0.5px;
  margin-bottom: 2px;
}
.evolution-stop-sub {
  font-size: 12px;
  color: var(--text3);
  letter-spacing: 0.3px;
  line-height: 1.4;
}
.evolution-stop:not(.is-active) {
  opacity: 0.5;
}

/* The → arrows live on the track between stops, faintly. */
.evolution-arrow {
  position: absolute;
  top: 35%;
  transform: translate(-50%, -50%);
  color: rgba(0, 0, 0, 0.3);
  font-size: 16px;
  line-height: 1;
  pointer-events: none;
  z-index: 1;
  user-select: none;
}
/* Handle must sit above the arrows */
.spectrum.evolution .spectrum-handle { z-index: 4; }
/* Smooth handle motion also on left (during snap/click-to-jump) */
.spectrum.evolution .spectrum-handle { transition: transform 0.15s; }

/* Single-image preview — no scroll. Frame aspect matches the Control and
   Final mockup PNGs (590 × 1313) so those fit pixel-perfect with no crop.
   The wider Sketch mockup (+ its 1.12 zoom below) gets trimmed at the
   sides rather than the bottom. */
.spectrum.evolution .spectrum-preview {
  width: 272px;
  aspect-ratio: 590 / 1313;
}
/* Kill every source of inner padding: drop the frame's white background
   (so any baked-in transparent edges on the PNGs don't render as white
   "padding"), and pin the image to the frame corners. */
.spectrum.evolution .spectrum-preview-frame {
  overflow: hidden;
  background: transparent;
  padding: 0;
  margin: 0;
}
/* Each mockup fills the phone frame edge-to-edge. object-fit: cover keeps
   aspect ratio. object-position: center top anchors the image to the top
   of the frame so the status bar / title always stays visible, and any
   overflow is trimmed off the bottom (kinder than cropping from the middle,
   which otherwise clipped the bottom nav). */
.spectrum.evolution .spectrum-preview-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  padding: 0;
  margin: 0;
  object-fit: cover;
  object-position: center top;
  display: block;
}
/* The solution-sketch PNG was exported with a transparent bleed around the
   phone content, AND its source aspect (643/1366) is wider than Control/Final.
   Combined with a top-anchored crop, that pushed the bottom of the mockup
   out of frame. For this one image only:
     • object-position: center center → balance the crop top and bottom
     • transform-origin: center center → zoom from middle, not from the top
     • scale(1.08) → enough to eat the transparent bleed without
       sacrificing visible phone content at the bottom
*/
.spectrum.evolution [data-frame="1"] .spectrum-preview-img {
  object-position: center center;
  transform: scale(1.08);
  transform-origin: center center;
}
.spectrum.evolution .spectrum-scroll-indicator,
.spectrum.evolution .spectrum-scroll-hint,
.spectrum.evolution .spectrum-annotation,
.spectrum.evolution .spectrum-preview-caption {
  display: none;
}

@media (max-width: 700px) {
  .evolution-stop { width: 104px; }
  .evolution-stop-title { font-size: 12px; }
  .evolution-stop-sub { font-size: 11px; }
  .evolution-labels { height: 64px; }
  .evolution-arrow { font-size: 13px; }
}

/* Dark-mode tweak for the arrows only (everything else already adapts) */
[data-theme="dark"] .evolution-arrow {
  color: rgba(255, 255, 255, 0.3);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .evolution-arrow {
    color: rgba(255, 255, 255, 0.3);
  }
}

/* ==========================
   Design showcase — two autoplaying phone videos side-by-side
   (reuses the evolution phone-frame proportions for visual consistency)
   ========================== */
.showcase-section {
  margin: 48px 0 48px;
  font-family: 'Plus Jakarta Sans', sans-serif;
}
.showcase-section .case-h2 {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}
.showcase-subtitle {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 14px;
  color: var(--text3);
  letter-spacing: 1px;
  margin: 4px 0 0;
}
.showcase-rule {
  border: none;
  border-top: 1px solid var(--border);
  margin: 16px 0 32px;
}

.showcase-videos {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 32px;
  flex-wrap: wrap;
}
.showcase-video {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

/* Default variant: video cropped into a phone mockup frame (onboarding) */
.showcase-video-frame {
  position: relative;
  width: 272px;
  aspect-ratio: 590 / 1313;
  border: 1px solid var(--border2);
  border-radius: 20px;
  overflow: hidden;
  background: var(--bg);
}
.showcase-video-frame video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}

/* Wide variant: video already contains its own 3-screen composition, so
   render it at its natural aspect with just rounded corners — no frame. */
.showcase-video--wide {
  flex: 0 1 auto;
}
.showcase-video-raw {
  display: block;
  max-height: 600px;
  width: auto;
  height: auto;
  max-width: 100%;
  border-radius: 20px;
  background: transparent;
}

.showcase-video figcaption {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: var(--text2);
  letter-spacing: 0.5px;
}

@media (max-width: 640px) {
  .showcase-videos {
    gap: 16px;
  }
  .showcase-video-frame {
    width: calc(50vw - 24px);
    max-width: 272px;
  }
  .showcase-video-raw {
    max-height: none;
    width: 100%;
  }
}

/* ==========================
   The Future — two phone mockups side-by-side above the body text.
   Frames split the available content width evenly; never wrap.
   ========================== */
.future-previews {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 16px;
  flex-wrap: nowrap;
  margin: 24px 0 32px;
}
.future-preview-frame {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  aspect-ratio: 590 / 1311;
  border: 1px solid var(--border2);
  border-radius: 20px;
  overflow: hidden;
  background: var(--bg);
}
.future-preview-frame img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}

@media (max-width: 700px) {
  .spectrum-modules {
    flex-wrap: wrap;
    gap: 4px;
  }
}

/* ---- Images ---- */
.case-img {
  width: 100%;
  display: block;
  margin: 24px 0;
}

.case-img-click {
  cursor: zoom-in;
  transition: opacity 0.15s ease;
}

.case-img-click:hover {
  opacity: 0.85;
}

.case-img-caption {
  font-size: 14px;
  color: var(--text3);
  letter-spacing: 1px;
  margin-top: -16px;
  margin-bottom: 24px;
}

/* ---- Lightbox ---- */
.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: zoom-out;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.lightbox.is-open {
  opacity: 1;
  visibility: visible;
}

.lightbox-img {
  max-width: 90vw;
  max-height: 90vh;
  object-fit: contain;
  transform: scale(0.95);
  transition: transform 0.3s ease;
}

.lightbox.is-open .lightbox-img {
  transform: scale(1);
}

/* ---- Footer ---- */
.case-footer {
  margin-top: 64px;
  padding-top: 32px;
  border-top: 1px solid var(--border);
}

/* ---- Mobile Header & Menu ---- */
.case-mobile-header {
  display: none;
}

.case-mobile-menu {
  display: none;
}

@media (max-width: 700px) {
  /* Hide desktop sidebar */
  .case-sidebar {
    display: none;
  }

  /* Lang + theme toggles sit inside the mobile header row. Switch to
     position:fixed so they stay pinned when the user scrolls (absolute
     positioning would let them scroll out of view behind the sticky header). */
  .case-lang-toggle,
  .case-theme-toggle {
    position: fixed;
    z-index: 1001;
    top: 14px;
  }
  .case-lang-toggle { right: 88px; }
  .case-theme-toggle { right: 56px; }

  /* Direction chart — stack top-to-bottom on mobile (absolute positioning
     at fixed %-coords collides on narrow viewports).
     !important used because the base .direction-chart-area rule is declared
     later in the file than this @media block, so cascade would otherwise
     favor the base height: 560px / position: relative. */
  .direction-chart-area {
    position: static !important;
    height: auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 16px 0 !important;
  }
  .direction-chart-axis { display: none !important; }
  .direction-chart-label--top,
  .direction-chart-label--bottom {
    position: static !important;
    transform: none !important;
    margin: 0 !important;
    padding: 4px 0 !important;
  }
  .direction-chart-label--top { order: 0 !important; }
  .direction-item { order: 1 !important; }
  .direction-chart-label--bottom { order: 2 !important; }
  .direction-item {
    position: static !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    white-space: normal !important;
    max-width: 280px !important;
    text-align: center !important;
  }

  /* Sticky mobile header */
  .case-mobile-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    padding: 12px 24px;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
  }

  .case-mobile-back {
    font-size: 14px;
    font-weight: 400;
    color: var(--text3);
    text-decoration: none;
    letter-spacing: 1px;
    transition: color 0.15s;
  }

  .case-mobile-back:hover {
    color: var(--text);
  }

  /* Hamburger */
  .case-mobile-hamburger {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    width: 32px;
    height: 32px;
    padding: 6px;
    background: none;
    border: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }

  .case-mobile-hamburger span {
    display: block;
    width: 100%;
    height: 1.5px;
    background: var(--text);
    transition: transform 0.3s ease, opacity 0.3s ease;
    transform-origin: center;
  }

  .case-mobile-hamburger.is-open span:nth-child(1) {
    transform: translateY(5.5px) rotate(45deg);
  }

  .case-mobile-hamburger.is-open span:nth-child(2) {
    opacity: 0;
  }

  .case-mobile-hamburger.is-open span:nth-child(3) {
    transform: translateY(-5.5px) rotate(-45deg);
  }

  /* Menu overlay */
  .case-mobile-menu {
    display: block;
    position: fixed;
    top: 57px;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 999;
    background: var(--bg);
    padding: 24px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
  }

  .case-mobile-menu.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  .case-mobile-menu ul {
    list-style: none;
    padding: 0;
    margin: 0 0 24px;
  }

  .case-mobile-menu li {
    margin-bottom: 16px;
  }

  .case-mobile-menu-link {
    font-size: 14px;
    color: var(--text2);
    text-decoration: none;
    letter-spacing: 1px;
    transition: color 0.15s;
  }

  .case-mobile-menu-link:hover {
    color: var(--text);
  }

  /* Page adjustments */
  .case-page {
    padding: 72px 24px 64px;
  }

  .case-content {
    padding-top: 8px;
  }
}

/* ---- Dark Mode ---- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    /* Morph animation */
    .cn-morph-zone--left {
      background: rgba(232, 93, 93, 0.08);
      border-color: rgba(232, 93, 93, 0.25);
    }
    .cn-morph-zone--right {
      background: rgba(200, 221, 212, 0.08);
      border-color: rgba(200, 221, 212, 0.25);
    }
    .cn-morph-chip {
      background: var(--bg2);
      border-color: rgba(232, 93, 93, 0.25);
      color: var(--text2);
    }
    .cn-morph-chip--green {
      border-color: rgba(200, 221, 212, 0.25);
      background: var(--bg2);
    }
    .cn-morph-zone-label,
    #cn-morph-label-left { color: #e8a0a0; }
    #cn-morph-label-right { color: #b5ccc3; }
    .cn-morph-bracket-line { border-color: rgba(232, 155, 63, 0.4); }
    .cn-morph-bracket-text { color: #e8b060; }

    /* State 1: Opportunity */
    .cn-morph[data-state="1"] .cn-morph-zone--left {
      border-color: rgba(232, 155, 63, 0.3);
      background: rgba(232, 155, 63, 0.08);
    }
    .cn-morph[data-state="1"] #cn-morph-label-left { color: #e8b060; }
    .cn-morph[data-state="1"] .cn-morph-zone-dot--gap { background: #e89b3f; }
    .cn-morph[data-state="1"] .cn-morph-zone--left .cn-morph-chip {
      border-color: rgba(232, 155, 63, 0.3);
      background: rgba(232, 155, 63, 0.06);
    }

    /* State 2: Merged */
    .cn-morph[data-state="2"] .cn-morph-body {
      background: rgba(200, 221, 212, 0.06);
      border-color: rgba(200, 221, 212, 0.2);
    }
    .cn-morph[data-state="2"] .cn-morph-zone--left {
      background: transparent;
      border-color: transparent;
    }
    .cn-morph[data-state="2"] .cn-morph-zone--right {
      background: transparent;
      border-color: transparent;
    }
    .cn-morph[data-state="2"] .cn-morph-zone--left .cn-morph-chip {
      border-color: rgba(200, 221, 212, 0.25);
      background: var(--bg2);
    }

    /* Team goals */
    .team-goal-target {
      color: #b5ccc3;
      border-color: rgba(200, 221, 212, 0.3);
      background: rgba(200, 221, 212, 0.06);
    }

    /* AI role callout & callout box */
    .ai-role-callout,
    .callout-box {
      border-color: rgba(200, 221, 212, 0.3);
      background: rgba(200, 221, 212, 0.04);
    }
    .ai-role-callout p.ai-role-title,
    .callout-box p.callout-box-title {
      color: #b5ccc3;
    }

    /* Annotated scroll */
    .annotated-track .annotated-step-title {
      color: #b5ccc3;
    }
    .annotated-highlight {
      background: rgba(220, 70, 70, 0.3);
      border-color: rgba(220, 70, 70, 0.55);
    }

    /* Insight cards */
    .insight-card-badge--user {
      background: rgba(26, 115, 232, 0.15);
      color: #6eaaff;
    }
    .insight-card-badge--business {
      background: rgba(184, 134, 11, 0.15);
      color: #d4a843;
    }

    /* Journey diagram */
    .journey-step--solid {
      background: var(--bg2);
    }

    /* Segmented control */
    .page-tabs-nav-inner {
      background: rgba(255, 255, 255, 0.08);
    }
    .page-tab-btn.is-active {
      color: var(--bg);
    }
  }
}

[data-theme="dark"] {
  /* Morph animation */
  .cn-morph-zone--left {
    background: rgba(232, 93, 93, 0.08);
    border-color: rgba(232, 93, 93, 0.25);
  }
  .cn-morph-zone--right {
    background: rgba(200, 221, 212, 0.08);
    border-color: rgba(200, 221, 212, 0.25);
  }
  .cn-morph-chip {
    background: var(--bg2);
    border-color: rgba(232, 93, 93, 0.25);
    color: var(--text2);
  }
  .cn-morph-chip--green {
    border-color: rgba(200, 221, 212, 0.25);
    background: var(--bg2);
  }
  .cn-morph-zone-label,
  #cn-morph-label-left { color: #e8a0a0; }
  #cn-morph-label-right { color: #b5ccc3; }
  .cn-morph-bracket-line { border-color: rgba(232, 155, 63, 0.4); }
  .cn-morph-bracket-text { color: #e8b060; }

  /* State 1: Opportunity */
  .cn-morph[data-state="1"] .cn-morph-zone--left {
    border-color: rgba(232, 155, 63, 0.3);
    background: rgba(232, 155, 63, 0.08);
  }
  .cn-morph[data-state="1"] #cn-morph-label-left { color: #e8b060; }
  .cn-morph[data-state="1"] .cn-morph-zone-dot--gap { background: #e89b3f; }
  .cn-morph[data-state="1"] .cn-morph-zone--left .cn-morph-chip {
    border-color: rgba(232, 155, 63, 0.3);
    background: rgba(232, 155, 63, 0.06);
  }

  /* State 2: Merged */
  .cn-morph[data-state="2"] .cn-morph-body {
    background: rgba(200, 221, 212, 0.06);
    border-color: rgba(200, 221, 212, 0.2);
  }
  .cn-morph[data-state="2"] .cn-morph-zone--left {
    background: transparent;
    border-color: transparent;
  }
  .cn-morph[data-state="2"] .cn-morph-zone--right {
    background: transparent;
    border-color: transparent;
  }
  .cn-morph[data-state="2"] .cn-morph-zone--left .cn-morph-chip {
    border-color: rgba(200, 221, 212, 0.25);
    background: var(--bg2);
  }

  /* Team goals */
  .team-goal-target {
    color: #b5ccc3;
    border-color: rgba(200, 221, 212, 0.3);
    background: rgba(200, 221, 212, 0.06);
  }

  /* AI role callout & callout box */
  .ai-role-callout,
  .callout-box {
    border-color: rgba(200, 221, 212, 0.3);
    background: rgba(200, 221, 212, 0.04);
  }
  .ai-role-callout p.ai-role-title,
  .callout-box p.callout-box-title {
    color: #b5ccc3;
  }

  /* Annotated scroll */
  .annotated-track .annotated-step-title {
    color: #b5ccc3;
  }
  .annotated-highlight {
    background: rgba(220, 70, 70, 0.3);
    border-color: rgba(220, 70, 70, 0.55);
  }

  /* Insight cards */
  .insight-card-badge--user {
    background: rgba(26, 115, 232, 0.15);
    color: #6eaaff;
  }
  .insight-card-badge--business {
    background: rgba(184, 134, 11, 0.15);
    color: #d4a843;
  }

  /* Journey diagram */
  .journey-step--solid {
    background: var(--bg2);
  }

  /* Segmented control */
  .page-tabs-nav-inner {
    background: rgba(255, 255, 255, 0.08);
  }
  .page-tab-btn.is-active {
    color: var(--bg);
  }
}

/* ---- Direction Chart (Curation Spectrum) ---- */
.direction-chart {
  margin: 48px 0 40px;
}

.direction-chart-hint {
  font-size: 0.72rem;
  color: var(--text3);
  font-style: italic;
  margin-bottom: 16px;
  letter-spacing: 0.02em;
}

.direction-chart-area {
  position: relative;
  width: 100%;
  height: 560px;
}

.direction-chart-axis {
  position: absolute;
  left: 50%;
  top: 28px;
  bottom: 28px;
  width: 1px;
  background: var(--border2);
  transform: translateX(-50%);
}

.direction-chart-label {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.65rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text3);
  text-align: center;
}
/* reserveLangSpace() reserved min-width from nowrap measurement; combined
   with the default text-align:start this left-aligned the label inside a
   wider box and shifted the visual center away from the axis. text-align:
   center above fixes EN, this zeroes the reservation so the box fits the
   actual text in whichever language is showing. */
.direction-chart-label[data-en] {
  min-width: 0 !important;
}

.direction-chart-label--top {
  top: 0;
}

.direction-chart-label--bottom {
  bottom: 0;
}

/* Item base */
.direction-item {
  position: absolute;
  font-size: 0.75rem;
  font-weight: 500;
  padding: 7px 14px;
  border-radius: 4px;
  cursor: default;
  text-align: center;
  transition: opacity 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
  white-space: nowrap;
  z-index: 1;
}
/* The absolute-positioned item uses its natural width for layout, but
   reserveLangSpace() reserves the max of both languages as min-width so
   there's no layout shift on toggle. We center the text inside that
   reserved box so the shorter language isn't left-aligned with trailing gap. */
.direction-item[data-en] { text-align: center; }

.direction-item:hover {
  transform: scale(1.05);
  z-index: 3;
}

/* Tooltip on hover */
.direction-item::before {
  content: attr(data-cat);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%) scale(0.9);
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: capitalize;
  color: var(--text2);
  background: var(--bg);
  border: 1px solid var(--border2);
  padding: 2px 8px;
  border-radius: 3px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.direction-item:hover::before {
  opacity: 1;
  transform: translateX(-50%) scale(1);
}

/* Content items — blog yellow style */
.direction-item--content {
  background: rgba(250, 204, 21, 0.18);
  color: #a07c10;
  border: 1px solid rgba(250, 204, 21, 0.25);
}
.direction-item--content:hover {
  box-shadow: 0 4px 16px rgba(250, 204, 21, 0.2);
}

/* Blog items — green/inspiring style */
.direction-item--blog {
  background: rgba(200, 221, 212, 0.25);
  color: #5a8a72;
  border: 1px solid rgba(200, 221, 212, 0.4);
}
.direction-item--blog:hover {
  box-shadow: 0 4px 16px rgba(200, 221, 212, 0.35);
}

/* Product items — red product style */
.direction-item--product {
  background: rgba(239, 68, 68, 0.1);
  color: #c53030;
  border: 1px solid rgba(239, 68, 68, 0.18);
}
.direction-item--product:hover {
  box-shadow: 0 4px 16px rgba(239, 68, 68, 0.15);
}

/* Hover: dim siblings */
.direction-chart-area.has-hover .direction-item {
  opacity: 0.25;
  transition: opacity 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.direction-chart-area.has-hover .direction-item.is-highlighted {
  opacity: 1;
}

/* Legend */
.direction-chart-legend {
  display: flex;
  gap: 20px;
  margin-top: 20px;
  justify-content: center;
}

.direction-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.7rem;
  color: var(--text2);
  font-weight: 500;
}

.direction-swatch {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 2px;
}

.direction-swatch--content {
  background: rgba(250, 204, 21, 0.35);
  border: 1px solid rgba(250, 204, 21, 0.5);
}

.direction-swatch--blog {
  background: rgba(200, 221, 212, 0.5);
  border: 1px solid rgba(200, 221, 212, 0.7);
}

.direction-swatch--product {
  background: rgba(239, 68, 68, 0.18);
  border: 1px solid rgba(239, 68, 68, 0.3);
}

/* ---- Scroll takeover dots ---- */
.scroll-dots {
  position: fixed;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  z-index: 999;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}
.scroll-dots.is-visible {
  opacity: 1;
}
.scroll-dots span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  border: 1.5px solid rgba(0,0,0,0.4);
  background: transparent;
  transition: background 0.3s ease, border-color 0.3s ease;
}
.scroll-dots span.is-filled {
  background: rgba(0,0,0,0.7);
  border-color: rgba(0,0,0,0.7);
}

/* ---- HMW Ideation Teaser ---- */
.hmw-teaser {
  position: relative;
  width: 100%;
  height: 280px;
  background: #EFEFEF;
  border: 1px solid transparent;
  border-radius: 4px;
  overflow: hidden;
  cursor: pointer;
  margin: 32px 0 32px;
  transition: border-color 0.2s ease;
}
.hmw-teaser:hover {
  border-color: rgba(0,0,0,0.15);
}
.hmw-teaser-dots {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(0,0,0,0.12) 1px, transparent 1px);
  background-size: 20px 20px;
  pointer-events: none;
}
.hmw-teaser-stickies {
  position: absolute;
  inset: 10px 10px 44px;
}
.hmw-sticky {
  position: absolute;
  width: 64px;
  height: 64px;
  padding: 6px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 400;
  font-size: 0.55rem;
  line-height: 1.3;
  white-space: normal;
  word-break: break-word;
  color: rgba(0,0,0,0.5);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12);
  transition: translate 0.4s ease;
  --dx: 0px;
  --dy: 0px;
}
.hmw-teaser:hover .hmw-sticky {
  translate: var(--dx) var(--dy);
}
.hmw-teaser-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 40px;
  background: rgba(255,255,255,0.8);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
}
.hmw-teaser-info {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.hmw-teaser-label {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 9px;
  font-variant: small-caps;
  letter-spacing: 1px;
  color: rgba(0,0,0,0.35);
  line-height: 1;
}
.hmw-teaser-stat {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 12px;
  color: rgba(0,0,0,0.8);
  line-height: 1.3;
}
.hmw-teaser-cta {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 12px;
  color: rgba(0,0,0,0.7);
}

/* ---- HMW Fullscreen Overlay ---- */
.hmw-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
}
.hmw-overlay.is-open {
  display: block;
}
/* Floating title — top left */
.hmw-overlay-float-title {
  position: fixed;
  top: 20px;
  left: 20px;
  z-index: 1002;
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: rgba(255,255,255,0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 10px 16px;
  border-radius: 10px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.08);
  pointer-events: none;
}
.hmw-overlay-title {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 10px;
  font-variant: small-caps;
  letter-spacing: 1px;
  color: rgba(0,0,0,0.35);
}
.hmw-overlay-question {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 13px;
  color: rgba(0,0,0,0.5);
}
/* Floating close — top right, aligned with title pill */
.hmw-close-btn {
  position: fixed;
  top: 24px;
  right: 24px;
  z-index: 1002;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(0,0,0,0.45);
  background: rgba(255,255,255,0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: none;
  border-radius: 50%;
  box-shadow: 0 2px 12px rgba(0,0,0,0.08);
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.hmw-close-btn:hover {
  background: rgba(255,255,255,1);
  color: rgba(0,0,0,0.85);
}
/* Floating synthesize — bottom center */
.hmw-synth-btn {
  position: fixed;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1002;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.8rem;
  font-weight: 500;
  background: #1A1A1A;
  color: #F5E6C8;
  border: none;
  padding: 10px 20px;
  border-radius: 100px;
  cursor: pointer;
  box-shadow: 0 4px 24px rgba(0,0,0,0.2);
  transition: filter 0.2s;
  display: none;
}
.hmw-overlay.is-open .hmw-synth-btn {
  display: block;
}
.hmw-synth-btn:hover {
  filter: brightness(1.3);
}
/* Viewport — full overlay */
.hmw-overlay-viewport {
  position: absolute;
  inset: 0;
  overflow: hidden;
  cursor: grab;
  background-color: #EFEFEF;
  background-image: radial-gradient(circle, rgba(0,0,0,0.15) 1px, transparent 1px);
  background-size: 20px 20px;
}
.hmw-overlay-viewport:active {
  cursor: grabbing;
}
.hmw-overlay-canvas {
  position: absolute;
  width: 2000px;
  height: 1400px;
}
.hmw-ov-sticky {
  position: absolute;
  width: 100px;
  height: 120px;
  padding: 8px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.7rem;
  line-height: 1.4;
  color: rgba(0,0,0,0.85);
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(0,0,0,0.1);
  will-change: transform;
  pointer-events: none;
}
.hmw-ov-label {
  position: absolute;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: rgba(0,0,0,0.6);
  opacity: 0;
  transition: opacity 300ms ease;
  pointer-events: none;
  white-space: nowrap;
}
.hmw-ov-label.is-visible {
  opacity: 1;
}

/* ==========================
   "What would you choose?" interactive section
   ========================== */
.choose-section {
  margin: 48px 0 64px;
  font-family: 'Plus Jakarta Sans', sans-serif;
}
.choose-section .case-h2 {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}
.choose-subtitle {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: var(--text3);
  letter-spacing: 1px;
  margin: 4px 0 0;
}
.choose-rule {
  border: none;
  border-top: 1px solid var(--border);
  margin: 16px 0 32px;
}

/* Card row — larger cards, centered on full viewport (breakout) */
.choose-row {
  display: flex;
  justify-content: center;
  gap: 24px;
  /* Full-viewport breakout with 40px padding each side.
     50% refers to half of the content column (inside .case-page padding). */
  width: 100vw;
  margin-left: calc(-50vw + 50% - 20px);
  padding-left: 40px;
  padding-right: 40px;
  box-sizing: border-box;
}
.choose-card {
  background: transparent;
  flex: 0 1 240px;
  max-width: 240px;
  min-width: 0;
  cursor: pointer;
  text-align: center;
  padding: 12px 0;
  border: none;
  transition: opacity 300ms ease;
}
.choose-card-img-wrap {
  position: relative;
  width: 100%;
}
.choose-card-img-wrap img {
  width: 100%;
  height: auto;
  max-height: 400px;
  object-fit: contain;
  display: block;
  border-radius: 16px;
  border: 1px solid var(--border);
  transition: border-color 200ms ease;
}
/* All four solution PNGs are now flush-cropped (~590x1311, no drop-shadow
   bleed). Add consistent vertical breathing room inside every frame so
   the phone mockup doesn't sit edge-to-edge. */
.choose-card .choose-card-img-wrap img {
  padding: 9px 0;
  box-sizing: border-box;
}
.choose-card:hover .choose-card-img-wrap img {
  border-color: var(--border2);
}
.choose-card.is-selected .choose-card-img-wrap img {
  border-color: var(--text);
}

/* Expand icon */
.choose-expand-icon {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 18px;
  height: 18px;
  color: var(--text2);
  opacity: 0;
  transition: opacity 200ms ease;
  cursor: pointer;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 2px;
}
.choose-card:hover .choose-expand-icon {
  opacity: 0.4;
}
.choose-expand-icon:hover {
  opacity: 0.7 !important;
}

.choose-card.is-dimmed {
  opacity: 0.3;
}
.choose-card-name {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--text);
  margin: 10px 0 2px;
}
.choose-card-desc {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.7rem;
  font-weight: 400;
  color: var(--text3);
  line-height: 1.4;
}

/* Fullscreen popup — FLIP animation driven by JS, so the background
   and close button fade independently of the image transform. */
.choose-fs-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0);
  backdrop-filter: blur(0px);
  -webkit-backdrop-filter: blur(0px);
  transition:
    background 450ms cubic-bezier(0.22, 1, 0.36, 1),
    backdrop-filter 450ms cubic-bezier(0.22, 1, 0.36, 1),
    -webkit-backdrop-filter 450ms cubic-bezier(0.22, 1, 0.36, 1);
}
.choose-fs-overlay.is-visible {
  background: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.choose-fs-content {
  position: relative;
  max-width: 90vw;
  max-height: 90vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.choose-fs-content img,
.choose-fs-img {
  max-width: 100%;
  max-height: 90vh;
  display: block;
  border-radius: 16px;
  will-change: transform;
  backface-visibility: hidden;
}
/* Floating close button top-right of the viewport, with a soft glass look. */
.choose-fs-close {
  position: absolute;
  top: 24px;
  right: 24px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.22);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.92);
  opacity: 0;
  transform: scale(0.85);
  transition:
    opacity 250ms ease-out 180ms,
    transform 280ms cubic-bezier(0.34, 1.56, 0.64, 1) 180ms,
    background 200ms ease;
}
.choose-fs-overlay.is-visible .choose-fs-close {
  opacity: 1;
  transform: scale(1);
}
.choose-fs-overlay.is-closing .choose-fs-close {
  opacity: 0;
  transform: scale(0.85);
  transition:
    opacity 150ms ease-in,
    transform 150ms ease-in;
}
.choose-fs-close:hover {
  background: rgba(255, 255, 255, 0.22);
}

/* Reveal panel */
/* Reveal animates its real height so the section below ("The Ending")
   slides up/down smoothly — same feel as the homepage language switch. */
.choose-reveal {
  margin-top: 32px;
  overflow: hidden;
  height: 0;
  opacity: 0;
  transform: translateY(8px);
  transition: height 300ms ease,
              opacity 250ms ease-out,
              transform 300ms ease-out;
}
.choose-reveal.is-initial {
  /* No-op — base state already matches initial (height: 0, opacity: 0). */
}
.choose-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
  /* height is set inline by JS (measured scrollHeight) so the transition
     has a real target value to animate toward. */
}
.choose-reveal.is-swapping .choose-reveal-content {
  opacity: 0;
  transition: opacity 150ms ease;
}
.choose-reveal.is-visible .choose-reveal-content {
  opacity: 1;
  transition: opacity 150ms ease;
}
.choose-reveal-content {
  /* no bg — transparent on page */
}
.choose-reveal-header {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 1px;
  color: var(--text);
  margin: 0 0 20px;
}
.choose-reveal-header .ri-highlight {
  text-decoration: underline dashed #C8DDD4;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}
.choose-reveal-block {
  margin-bottom: 16px;
}
.choose-reveal-label {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text3);
  margin-bottom: 8px;
}
.choose-reveal-body {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--text);
}
/* Highlight box — matches the ".callout-box" style ("We saw an opportunity")
   used elsewhere in this case study: dashed border, faint green background,
   mixed-case title in the brand green. */
.choose-highlight-box {
  background: rgba(200, 221, 212, 0.06);
  border: 1px dashed #C8DDD4;
  border-radius: 8px;
  padding: 20px 24px;
  margin-top: 16px;
}
.choose-highlight-box .choose-reveal-label {
  font-size: 13px;
  font-weight: 600;
  color: #4a6b5c;
  letter-spacing: 0.5px;
  text-transform: none;
  line-height: 1.4;
  margin: 0 0 12px;
}
.choose-highlight-box .choose-reveal-body {
  font-size: 13px;
  color: var(--text2);
  letter-spacing: 0.3px;
  line-height: 1.6;
  margin: 0;
}
/* Gray variant — used when user picks a non-selected solution to explain
   why it wasn't the one we shipped. Same shape, neutral palette. */
.choose-highlight-box.is-muted {
  background: var(--bg2);
  border-color: var(--border);
}
.choose-highlight-box.is-muted .choose-reveal-label {
  color: var(--text2);
}

/* Dark-mode overrides for the green highlight-box title so the brand-green
   tint stays legible against the darker background. */
[data-theme="dark"] .choose-highlight-box .choose-reveal-label {
  color: #a8c6b9;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .choose-highlight-box .choose-reveal-label {
    color: #a8c6b9;
  }
}
/* The muted (gray) variant should override that tint back to neutral. */
[data-theme="dark"] .choose-highlight-box.is-muted .choose-reveal-label {
  color: var(--text2);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .choose-highlight-box.is-muted .choose-reveal-label {
    color: var(--text2);
  }
}

@media (max-width: 768px) {
  .choose-row {
    width: auto;
    margin-left: 0;
    padding-left: 0;
    padding-right: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
  .choose-card {
    flex: none;
    max-width: none;
  }
  .choose-card-img-wrap img {
    max-height: none;
  }
  .choose-card {
    padding: 8px 0;
  }
  .choose-expand-icon {
    opacity: 0.4;
  }
}