.color-page_section__Q6MA4 {
  padding: 120px 8vw;
}

.color-page_sectionDark____tQA {
  background-color: var(--card);
}

.color-page_container__t__ST {
  max-width: 820px;
  margin: 0 auto;
}

.color-page_containerWide__H7XDl {
  max-width: 1200px;
  margin: 0 auto;
}

.color-page_label__Abyg1 {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.3em;
  color: #e50914;
  margin-bottom: 16px;
}

.color-page_title__9oAmQ {
  font-size: clamp(24px, 4vw, 40px);
  font-weight: 700;
  color: var(--foreground);
  margin-bottom: 24px;
  line-height: 1.3;
}

.color-page_body__d77LR {
  font-size: 15px;
  line-height: 1.8;
  color: var(--muted-foreground);
  word-break: keep-all;
}

.color-page_emphasis__sOaQp {
  font-weight: 500;
  color: var(--foreground);
}

.color-page_accent__hnPa_ {
  color: #e50914;
}

.color-page_divider__ei3OL {
  width: 48px;
  height: 1px;
  background-color: #e50914;
  margin-bottom: 32px;
}

.color-page_verticalDivider___f6IK {
  width: 1px;
  height: 80px;
  background-color: #e50914;
  margin: 0 auto 32px;
}

/* Hero */
.color-page_hero__egtJR {
  position: relative;
  min-height: 70vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
}

.color-page_heroBg__Mg_YZ {
  position: absolute;
  inset: 0;
}

.color-page_heroOverlay____aWD {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.4) 40%, var(--background) 100%);
}

.color-page_heroContent__xSXCY {
  position: relative;
  z-index: 1;
  padding: 0 5vw;
}

.color-page_heroTitle__visWn {
  font-size: clamp(36px, 6vw, 72px);
  font-weight: 800;
  color: #ffffff;
  margin-bottom: 20px;
  line-height: 1.1;
}

.color-page_heroSub__KgD83 {
  font-size: clamp(14px, 2vw, 18px);
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.6;
}

/* Grid layouts */
.color-page_grid2__RAGhD {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: start;
}

.color-page_grid3__c1Tnb {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.color-page_baRow__QjhzA {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 16px;
  align-items: center;
}

.color-page_arrow__vjRPc {
  color: var(--muted-foreground);
  font-size: 24px;
  padding: 0 8px;
}

.color-page_baLabel__sRTib {
  font-size: 11px;
  letter-spacing: 0.2em;
  color: var(--muted-foreground);
  margin-top: 8px;
  text-align: center;
}

/* Cards */
.color-page_card__WQ7V8 {
  background-color: var(--card);
  border-left: 2px solid #e50914;
  padding: 32px;
  border-radius: 4px;
}

.color-page_cardStep__n8_g_ {
  font-size: 12px;
  letter-spacing: 0.3em;
  color: #e50914;
  margin-bottom: 12px;
}

.color-page_cardTitle__hYjF8 {
  font-size: 20px;
  font-weight: 700;
  color: var(--foreground);
  margin-bottom: 8px;
}

.color-page_cardSubtitle__aZvX9 {
  font-size: 14px;
  color: var(--muted-foreground);
  margin-bottom: 16px;
}

.color-page_cardBody__mnSIe {
  font-size: 14px;
  line-height: 1.75;
  color: var(--muted-foreground);
  word-break: keep-all;
}

/* Compare cards */
.color-page_compareLeft___ueue {
  background-color: var(--card);
  border-left: 2px solid var(--border);
  padding: 32px;
  border-radius: 4px;
}

.color-page_compareRight__S3Y9q {
  background-color: var(--card);
  border-left: 2px solid #e50914;
  padding: 32px;
  border-radius: 4px;
}

/* Detail block */
.color-page_detailBlock__f5Y9W {
  background-color: var(--card);
  border-left: 1px solid #e50914;
  padding: 32px 48px;
  margin-top: 32px;
}

.color-page_detailBlockDark__1bdYL {
  background-color: var(--card-hover);
  border-left: 1px solid #e50914;
  padding: 32px 48px;
  margin-bottom: 24px;
}

/* Quote */
.color-page_quoteSection__zjZZz {
  background-color: var(--card);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 100px 5vw;
  text-align: center;
}

.color-page_quoteText__h0oUQ {
  font-size: clamp(20px, 3vw, 32px);
  font-weight: 200;
  color: var(--foreground);
  line-height: 1.8;
  max-width: 600px;
  margin: 0 auto;
}

.color-page_quoteAuthor__2HGWn {
  font-size: 13px;
  letter-spacing: 0.3em;
  color: var(--muted-foreground);
  margin-top: 32px;
}

/* Workflow steps */
.color-page_stepNumber__JCUqq {
  font-size: 48px;
  font-weight: 800;
  color: rgba(229, 9, 20, 0.3);
  line-height: 1;
  margin-bottom: 16px;
}

/* Workflow image grid */
.color-page_workflowImageGrid__jySOe {
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 16px;
  height: 520px;
  margin-top: 48px;
}

.color-page_workflowImageMain__kx6Ic {
  grid-row: 1 / -1;
}

/* Gallery grid */
.color-page_galleryGrid__uboqi {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}

.color-page_galleryMain__gsn9a {
  grid-row: 1 / -1;
}

/* Color swatch */
.color-page_swatchRow__6pOhw {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 8px;
}

.color-page_swatch__K96YI {
  width: 48px;
  height: 48px;
  border-radius: 6px;
  position: relative;
  border: 1px solid var(--border);
}

.color-page_swatchX__3J05E {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted-foreground);
  font-size: 18px;
  font-weight: 300;
}

.color-page_swatchLabel__apbSD {
  font-size: 13px;
  line-height: 1.6;
  color: var(--muted-foreground);
}

.color-page_swatchGroup__t7aSt {
  margin-bottom: 28px;
}

.color-page_swatchGroupTitle__2occf {
  font-size: 14px;
  color: var(--foreground);
  margin-bottom: 12px;
  font-weight: 500;
}

/* Skintone section */
.color-page_skintoneGrid__9sC8C {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 48px;
  align-items: center;
  margin-top: 48px;
}

/* Closing */
.color-page_closing___Yfh1 {
  text-align: center;
  padding: 120px 5vw;
}

.color-page_closingTitle__WhCka {
  font-size: clamp(24px, 4vw, 40px);
  font-weight: 300;
  color: var(--foreground);
  line-height: 1.6;
}

.color-page_closingSub__Kmypw {
  font-size: clamp(14px, 2vw, 18px);
  color: var(--muted-foreground);
  margin-top: 24px;
  line-height: 1.8;
}

/* Step 03 wrapper */
.color-page_step3Wrapper__UMLIf {
  max-width: 400px;
  margin: 0 auto;
}

/* Responsive */
@media (max-width: 768px) {
  .color-page_section__Q6MA4 {
    padding: 64px 5vw;
  }

  .color-page_grid2__RAGhD,
  .color-page_grid3__c1Tnb {
    grid-template-columns: 1fr;
  }

  .color-page_baRow__QjhzA {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .color-page_arrow__vjRPc {
    transform: rotate(90deg);
    text-align: center;
  }

  .color-page_workflowImageGrid__jySOe {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    height: auto;
  }

  .color-page_workflowImageMain__kx6Ic {
    grid-row: auto;
  }

  .color-page_galleryGrid__uboqi {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }

  .color-page_galleryMain__gsn9a {
    grid-row: auto;
  }

  .color-page_skintoneGrid__9sC8C {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .color-page_detailBlock__f5Y9W,
  .color-page_detailBlockDark__1bdYL {
    padding: 24px;
  }

  .color-page_step3Wrapper__UMLIf {
    max-width: none;
  }
}