/* =========================
   XIAOHONGSHU vs TIKTOK
========================= */

.case-xhs {
    --case-accent: #ff4f4f;
    --case-muted: #9f9f9d;
    --case-gray: #f5f5f5;
  }
  
  /* =========================
     HERO
  ========================= */
  
  .case-xhs .case-hero {
    padding: 110px 0 60px;
  }
  
  .case-xhs .case-hero-inner {
    max-width: 1160px;
    margin: 0 auto;
    padding: 0 var(--page-pad-x);
  }
  
  .case-xhs .case-kicker {
    margin: 0 0 14px;
    font-size: 16px;
    font-weight: 700;
    color: var(--case-muted);
  }
  
  .case-xhs .case-title {
    margin: 0 0 18px;
    font-size: 42px;
    font-weight: 800;
    letter-spacing: 0.4px;
  }
  
  .case-xhs .case-subtitle {
    margin: 0;
    max-width: 720px;
    font-size: 18px;
    line-height: 1.6;
  }
  
  /* =========================
     SECTIONS
  ========================= */
  
  .case-xhs .case-section {
    padding: 72px 0 40px;
  }
  
  .case-xhs .case-section--gray {
    background: var(--case-gray);
  }
  
  .case-xhs .case-inner {
    max-width: 1160px;
    margin: 0 auto;
    padding: 0 var(--page-pad-x);
  }
  
  /* =========================
     TYPOGRAPHY
  ========================= */
  
  .case-xhs .case-copy {
    display: grid;
    gap: 14px;
    max-width: 120ch;
  }
  
  .case-xhs .case-body {
    margin: 0;
    font-size: 13px;
    line-height: 1.75;
    color: #2b2b2b;
  }
  
  .case-xhs .case-subhead {
    margin: 48px 0 10px;
    font-size: 26px;
    font-weight: 800;
  }
  
  .case-xhs .case-subkicker {
    margin: 0 0 18px;
    font-size: 12px;
    font-weight: 700;
    color: var(--case-muted);
  }
  
  /* =========================
     RESPONSIVE
  ========================= */
  
  @media (max-width: 980px) {
    .case-xhs .case-title {
      font-size: 32px;
    }
  }

/* =========================
   XHS CASE STUDY – HERO
========================= */

.case-xhs {
    padding-top: 72px;
  }
  
  .case-xhs__hero {
    max-width: 1160px;
    margin: 0 auto;
    padding: 0 var(--page-pad-x);
  
    display: flex;
    flex-direction: column;
  }
  
  /* kicker */
  .case-xhs .case-kicker {
    margin: 0 0 14px;
    font-size: 14px;
    font-weight: 600;
    color: #9f9f9d;
  }
  
  /* title */
  .case-xhs .case-title {
    margin: 0 0 18px;
    font-size: 32px;
    font-weight: 800;
    line-height: 1.15;
    color: #111;
  }
  
  /* description */
  .case-xhs .case-deck {
    max-width: 120ch;
    font-size: 16px;
    line-height: 1.6;
    color: #2b2b2b;
  }
  
  /* visual block */
  .case-xhs__hero-visual {
    margin-top: 48px;
  
    display: flex;
    justify-content: center;
  }
  
  /* image itself */
  .case-xhs__hero-visual img {
    width: 100%;
    max-width: 1160px;
    height: auto;
    display: block;
    padding-top: 60px;
  }
  

/* =========================
   XHS – OVERVIEW BLOCK
========================= */

.case-xhs__block {
    padding: 90px 0 96px;
  }
  
  .case-xhs__block--gray {
    background: #f5f5f5; /* same gray as other pages */
  }
  
  .case-xhs__inner {
    max-width: 1160px;
    margin: 0 auto;
    padding: 0 var(--page-pad-x);
  }
  
  /* red kicker */
  .case-xhs__kicker {
    margin: 0 0 18px;
    font-size: 14px;
    font-weight: 800;
    color: #f91f15; /* your case red */
    letter-spacing: 0.18px;
  }
  
  /* big section headings */
  .case-xhs__section-title {
    margin: 0 0 18px;
    font-size: 26px;
    font-weight: 800;
    line-height: 1.15;
    color: #111;
  }
  
  .case-xhs__section-title--spaced {
    margin-top: 58px;
  }
  
  /* paragraph body */
  .case-xhs__body {
    margin: 0;
    max-width: 120ch;
    font-size: 14px;
    line-height: 1.75;
    color: #2b2b2b;
  }
  
  /* two lists */
  .case-xhs__overview-lists {
    margin-top: 26px;
    display: grid;
    gap: 20px;
  }
  
  .case-xhs__list-title {
    margin: 0 0 8px;
    font-size: 12px;
    font-weight: 800;
    color: #111;
  }
  
  .case-xhs__list ul {
    margin: 0;
    padding-left: 18px;
  }
  
  .case-xhs__list li {
    margin: 6px 0;
    font-size: 13px;
    line-height: 1.7;
    color: #2b2b2b;
  }
  
  /* "Individual Project" line */
  .case-xhs__subtle {
    margin: 6px 0 14px;
    font-size: 12px;
    font-weight: 700;
    color: #9f9f9d;
  }
  
  /* role bullets */
  .case-xhs__role-list {
    margin: 0;
    padding-left: 18px;
  }
  
  .case-xhs__role-list li {
    margin: 6px 0;
    font-size: 13px;
    line-height: 1.7;
    color: #2b2b2b;
  }
  
  /* responsive */
  @media (max-width: 980px) {
    .case-xhs__section-title {
      font-size: 28px;
    }
  }
  

/* =========================
   XHS – KEY FINDINGS (Pink)
========================= */

.case-xhs__block--pink{
    background: #fff3f3; /* soft pink like your other case */
  }
  
  .case-xhs__red-title{
    margin: 0 0 18px;
    font-size: 26px;
    font-weight: 800;
    color: #f91f15;
    line-height: 1.2;
  }
  
  .case-xhs__red-title--spaced{
    margin-top: 56px;
  }
  
  /* Callout with vertical line */
  .case-xhs__callout{
    margin: 8px 0 34px;
    padding-left: 18px;
    border-left: 3px solid #111; /* vertical line */
  }
  
  .case-xhs__callout-text{
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
    color: #111;
  }
  
  .case-xhs__callout-text strong{
    font-weight: 800;
  }
  
  /* “Core Findings” label */
  .case-xhs__label{
    margin: 0 0 14px;
    font-size: 12px;
    font-weight: 800;
    color: #111;
  }
  
  /* Numbered findings */
  .case-xhs__findings{
    margin: 0;
    padding-left: 18px; /* aligns numbers like your screenshot */
    display: grid;
    gap: 18px;
  }
  
  .case-xhs__findings > li{
    font-size: 13px;
    line-height: 1.7;
    color: #111;
  }
  
  .case-xhs__findings > li::marker{
    font-weight: 700;
    color: #111;
  }
  
  /* Sub-bullets under each number */
  .case-xhs__findings ul{
    margin: 8px 0 0;
    padding-left: 18px;
    display: grid;
    gap: 6px;
  }
  
  .case-xhs__findings ul li{
    font-size: 13px;
    line-height: 1.7;
    color: #111;
  }
  
  /* Closing sentence under findings */
  .case-xhs__closing{
    margin: 18px 0 0;
    font-size: 13px;
    line-height: 1.7;
    color: #111;
    max-width: 120ch;
  }
  
  /* Why this matters bullets */
  .case-xhs__body--wide{
    max-width: 120ch;
  }
  
  .case-xhs__bullets{
    margin: 14px 0 0;
    padding-left: 18px;
  }
  
  .case-xhs__bullets li{
    margin: 6px 0;
    font-size: 13px;
    line-height: 1.7;
    color: #111;
  }
  


/* =========================
   XHS – RESEARCH QUESTION + METHOD (White)
========================= */

.case-xhs__block--white{
    background: #fff;
  }
  
  .case-xhs__section-title{
    margin: 0 0 14px;
    font-size: 26px;
    font-weight: 800;
    color: #111;
    line-height: 1.2;
  }
  
  .case-xhs__section-title--spaced{
    margin-top: 56px; /* space between question and methodology */
  }
  
  /* base body copy (reuse if you already have one) */
  .case-xhs__body{
    margin: 0 0 16px;
    font-size: 13px;
    line-height: 1.75;
    color: #111;
    max-width: 120ch;
  }
  
  .case-xhs__rq{
    max-width: 120ch; /* slightly wider like the screenshot */
  }
  
  .case-xhs__method-intro{
    margin-top: 0;
  }
  
  /* Method bullets: spacing + indents to match */
  .case-xhs__bullets--method{
    margin: 10px 0 18px;
    padding-left: 18px;
  }
  
  .case-xhs__bullets--method li{
    margin: 6px 0;
    font-size: 13px;
    line-height: 1.7;
    color: #111;
  }
  
  .case-xhs__method-note{
    margin: 0; /* last paragraph sits tight like figma */
  }

  /* =========================
   XHS – PLATFORM COMPARISON (Gray)
========================= */

.case-xhs__block--gray{
    background: #f5f5f5; /* same gray used on other pages */
  }
  
  /* 2-column grid */
  .case-xhs__compare-grid{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 96px; /* wide gap like Figma */
    align-items: start;
  }
  
  /* section title: big + bold black */
  .case-xhs__section-title{
    margin: 0 0 18px;
    font-size: 26px;
    font-weight: 800;
    line-height: 1.2;
    color: #111;
  }
  
  /* red mini labels */
  .case-xhs__label-red{
    margin: 0 0 6px;
    font-size: 12px;
    font-weight: 700;
    color: #ff2d2d; /* red accent */
  }
  
  .case-xhs__label-red--spaced{
    margin-top: 22px;
  }
  
  /* small black meta line under label */
  .case-xhs__meta{
    margin: 0 0 14px;
    font-size: 12px;
    line-height: 1.6;
    color: #111;
  }
  
  /* bullets */
  .case-xhs__bullets{
    margin: 0;
    padding-left: 18px;
  }
  
  .case-xhs__bullets--tight{
    margin: 0 0 18px;
  }
  
  .case-xhs__bullets--tight li{
    margin: 6px 0;
    font-size: 12px;
    line-height: 1.7;
    color: #111;
  }
  
  /* UX Impact / UX Insight label */
  .case-xhs__ux-label{
    margin: 0 0 6px;
    font-size: 12px;
    font-weight: 700;
    color: #111;
  }
  
  .case-xhs__ux-label--spaced{
    margin-top: 14px;
  }
  
  /* impact sentence */
  .case-xhs__body--impact{
    margin: 0;
    max-width: 60ch;
  }
  
  /* left column blocks spacing */
  .case-xhs__subblock{
    padding-top: 6px;
  }
  
  .case-xhs__subblock--spaced{
    margin-top: 56px; /* big gap between Xiaohongshu and TikTok blocks */
  }
  
  /* right column blocks spacing */
  .case-xhs__right-block{
    padding-top: 6px;
  }
  
  .case-xhs__right-block--spaced{
    margin-top: 64px; /* gap before second right section */
  }
  
  .case-xhs__section-title--spaced {
    padding-top: 60px;
  }
  /* Responsive: stack into one column */
  @media (max-width: 980px){
    .case-xhs__compare-grid{
      grid-template-columns: 1fr;
      gap: 56px;
    }
  
    .case-xhs__subblock--spaced{
      margin-top: 40px;
    }
  
    .case-xhs__right-block--spaced{
      margin-top: 42px;
    }
  }
  

/* =========================
   XHS – TRUST FUNNEL DIVIDER
========================= */

.case-xhs__trust-funnel{
    background: #fff;
    border-top: 3px solid #ff2d2d;
    border-bottom: 3px solid #ff2d2d;
    padding: 48px 0;
  }
  
  /* Title stays aligned to content column */
  .case-xhs__trust-title{
    margin: 0 0 18px;
    font-size: 16px;
    font-weight: 500;
    color: #111;
    max-width: 1160px;      /* matches your case inner width */
    margin-left: auto;
    margin-right: auto;
  }
  
  /* Arrow flow is centered independently */
  .case-xhs__trust-flow{
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    color: #ff2d2d;
    letter-spacing: 0.2px;
  
    text-align: center;   /* 👈 centers the diagram */
  }
  
  /* Responsive */
  @media (max-width: 980px){
    .case-xhs__trust-flow{
      font-size: 18px;
      line-height: 1.4;
      padding: 0 24px; /* keeps arrows from touching edges */
    }
  }
  


/* =========================
   XHS – LAST SECTIONS
========================= */

.case-xhs{
    --xhs-red: #ff2d2d;
    --xhs-pink: #fff3f3;
    --xhs-gray: #f5f5f5;
    --xhs-muted: #9f9f9d;
  }
  
  /* section wrappers */
  .case-xhs__section{
    padding: 88px 0;
  }
  
  .case-xhs__section--white{ background: #fff; }
  .case-xhs__section--pink{ background: var(--xhs-pink); }
  
  .case-xhs__inner{
    max-width: 1160px;
    margin: 0 auto;
    padding: 0 var(--page-pad-x);
  }
  
  /* headings */
  .case-xhs__h2{
    margin: 0 0 22px;
    font-size: 30px;
    line-height: 1.15;
    font-weight: 800;
    color: #111;
  }
  
  .case-xhs__h2--accent{
    color: var(--xhs-red);
  }
  
  /* body */
  .case-xhs__body{
    margin: 0;
    font-size: 13px;
    line-height: 1.75;
    color: #111;
    max-width: 120ch;
  }
  
  .case-xhs__body--wide{
    max-width: 140ch; /* matches your wide single-line feel */
  }
  
  /* groups + lists */
  .case-xhs__bullets{
    display: grid;
    gap: 22px;
  }
  
  .case-xhs__group{ margin: 0; }
  .case-xhs__group--tight{ margin-top: 6px; }
  
  .case-xhs__label{
    margin: 0 0 6px;
    font-size: 12px;
    line-height: 1.4;
    color: #111;
  }
  
  .case-xhs__list{
    margin: 0;
    padding-left: 18px;
    font-size: 13px;
    line-height: 1.65;
    color: #111;
  }
  
  .case-xhs__list li{ margin: 4px 0; }
  
  .case-xhs__list--spaced li{ margin: 6px 0; }
  
  /* responsive */
  @media (max-width: 980px){
    .case-xhs__section{ padding: 72px 0; }
  
    .case-xhs__h2{
      font-size: 26px;
    }
  
    .case-xhs__body--wide{
      max-width: 100%;
    }
  }
  
  .footer__email {
    text-decoration: none;
    cursor: pointer;
  }
  
  .footer__email:hover {
    text-decoration: underline;
  }
  
  .nav__brand:hover {
    opacity: 0.8;
  }
  
  .nav__brand {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.1px;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
  }
  
  .nav__link,
.nav__brand {
  transition: opacity 0.15s ease;
}

.nav__link:hover,
.nav__brand:hover {
  opacity: 0.8;
}