/*
 * Vector Future typography system
 * Semantic mapping based on the measured Zhipu Chinese product-site hierarchy.
 * This file owns typography only. It intentionally does not change layout,
 * component structure, backgrounds, borders, imagery, or interaction logic.
 */

:root {
  --font-sans: "Microsoft YaHei", SimHei, SimSun, KaiTi, "Microsoft JhengHei";

  --type-display-lg-size: 2rem;
  --type-display-lg-line: 2.5rem;
  --type-h1-size: 2rem;
  --type-h1-line: 3rem;
  --type-h2-size: 1.75rem;
  --type-h2-line: 2.1875rem;
  --type-heading-lg-size: 1.5rem;
  --type-heading-lg-line: 2rem;
  --type-heading-md-size: 1rem;
  --type-heading-md-line: 1.5rem;
  --type-body-lg-size: 1rem;
  --type-body-lg-line: 1.5rem;
  --type-body-size: 0.875rem;
  --type-body-line: 1.25rem;
  --type-body-long-line: 1.4rem;
  --type-caption-size: 0.75rem;
  --type-caption-line: 1.125rem;
  --type-ui-caption-line: 1rem;

  --text-primary: #000000;
  --text-strong: #0a0a0a;
  --text-80: rgba(0, 0, 0, 0.8);
  --text-70: rgba(0, 0, 0, 0.7);
  --text-60: rgba(0, 0, 0, 0.6);
  --text-50: rgba(0, 0, 0, 0.5);
  --text-muted: #828b97;
  --text-muted-secondary: #8b8d98;
  --text-ui-dark: #1e1f24;
  --text-inverse: #ffffff;
  --text-inverse-80: rgba(255, 255, 255, 0.8);
  --text-inverse-50: rgba(255, 255, 255, 0.5);
}

html,
body,
body *,
body *::before,
body *::after,
button,
input,
select,
textarea,
optgroup {
  font-family: var(--font-sans) !important;
}

body {
  font-size: var(--type-body-size);
  line-height: var(--type-body-line);
  font-weight: 400;
  color: var(--text-primary);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

/* Display: homepage campaign statement and final conversion statement. */
:where(.display, .hero-title, .home-hero-title, #home h1) {
  font-size: var(--type-display-lg-size) !important;
  line-height: var(--type-display-lg-line) !important;
  font-weight: 600 !important;
  letter-spacing: normal !important;
  color: var(--text-primary) !important;
}

/* Page-level titles. */
:where(h1, .page-title, .subpage-hero h1, .cases-parallax-hero h1) {
  font-size: var(--type-h1-size) !important;
  line-height: var(--type-h1-line) !important;
  font-weight: 500 !important;
  letter-spacing: -0.8px !important;
  color: var(--text-primary) !important;
}

/* The homepage hero is the sole display-level h1; keep it above the generic h1 rule. */
.home-v2 #home h1,
.home-v2 #home .home-hero-title,
.home-v2 #home .display {
  font-size: var(--type-display-lg-size) !important;
  line-height: var(--type-display-lg-line) !important;
  font-weight: 600 !important;
  letter-spacing: normal !important;
  color: var(--text-primary) !important;
}

/* Section-level titles. */
:where(h2, .section-title, .method-sticky-title, .cta-growth-title, .case-close h2) {
  font-size: var(--type-h2-size) !important;
  line-height: var(--type-h2-line) !important;
  font-weight: 500 !important;
  letter-spacing: -0.03em !important;
  color: var(--text-strong) !important;
}

/* Editorial and case feature titles. */
:where(
  .parallax-case-copy h2,
  .industry-overview-copy h2,
  .about-statement h2,
  .case-study-section > header h2,
  .case-section-intro h2
) {
  font-size: var(--type-heading-lg-size) !important;
  line-height: var(--type-heading-lg-line) !important;
  font-weight: 500 !important;
  letter-spacing: normal !important;
}

/* Card and subsection titles. */
:where(
  h3,
  h4,
  .card-title,
  .product-row h3,
  .methodology-row h3,
  .industry-card h2,
  .industry-card h3,
  .case-card h3,
  .mega-nav-item h3,
  .footer h3
) {
  font-size: var(--type-heading-md-size) !important;
  line-height: var(--type-heading-md-line) !important;
  font-weight: 500 !important;
  letter-spacing: normal !important;
  color: var(--text-primary) !important;
}

/* Large descriptions and lead paragraphs. */
:where(
  .lede,
  .hero-lede,
  .page-lede,
  .section-lede,
  .section-intro,
  .subpage-hero__copy > p,
  .cases-hero-copy > p,
  .construction-lede,
  .case-hero-copy > p,
  .about-lead-copy > p
) {
  font-size: var(--type-body-lg-size) !important;
  line-height: var(--type-body-lg-line) !important;
  font-weight: 400 !important;
  letter-spacing: normal !important;
  color: var(--text-60) !important;
}

/* Default body copy. */
p,
li,
dd,
td,
th,
.description,
.body-copy,
.card-description,
.parallax-case-copy p,
.methodology-row p {
  font-size: var(--type-body-size) !important;
  line-height: var(--type-body-long-line) !important;
  font-weight: 400 !important;
  letter-spacing: normal !important;
  color: var(--text-60) !important;
}

/* Navigation, controls, tabs and buttons. */
:where(
  .nav,
  .nav a,
  .nav button,
  .mega-nav,
  .mega-nav a,
  .mega-nav button,
  button,
  .button,
  .btn,
  [role="button"],
  [role="tab"],
  .industry-filter-bar a,
  .industry-filter-bar button,
  label
) {
  font-size: var(--type-body-size) !important;
  line-height: var(--type-body-line) !important;
  font-weight: 500 !important;
  letter-spacing: normal !important;
}

input,
textarea,
select {
  font-size: var(--type-body-size) !important;
  line-height: var(--type-body-line) !important;
  font-weight: 400 !important;
  color: var(--text-primary) !important;
}

::placeholder {
  color: var(--text-muted-secondary) !important;
  opacity: 1;
}

/* Captions, metadata, labels and status text. */
:where(
  .eyebrow,
  .kicker,
  .case-kicker,
  .case-meta,
  .case-meta-line,
  .caption,
  .meta,
  .tag,
  .badge,
  .status,
  time,
  figcaption,
  .section-number,
  .step-number
) {
  font-size: var(--type-caption-size) !important;
  line-height: var(--type-ui-caption-line) !important;
  font-weight: 500 !important;
  letter-spacing: normal !important;
  color: var(--text-muted) !important;
}

small {
  font-size: var(--type-caption-size) !important;
  line-height: var(--type-caption-line) !important;
  font-weight: 400 !important;
  color: var(--text-muted-secondary) !important;
}

/*
 * Legacy pages contain a handful of higher-specificity typography declarations.
 * These targeted rules transfer only their text metrics to the semantic system;
 * component geometry and behavior remain owned by the original page styles.
 */
.home-v2 .methodology-row h3,
.home-v2 .methodology-row.product-row h3,
.stepper-ready .parallax-case-copy h2 {
  font-size: var(--type-heading-md-size) !important;
  line-height: var(--type-heading-md-line) !important;
  font-weight: 500 !important;
  letter-spacing: normal !important;
  color: var(--text-primary) !important;
}

.home-v2 .methodology-row p,
.stepper-ready .parallax-case-copy p {
  font-size: var(--type-body-size) !important;
  line-height: var(--type-body-long-line) !important;
  font-weight: 400 !important;
  letter-spacing: normal !important;
  color: var(--text-60) !important;
}

.home-v2 .cta .cta-growth-title,
.cta .cta-growth-title {
  font-size: var(--type-h2-size) !important;
  line-height: var(--type-h2-line) !important;
  font-weight: 500 !important;
  letter-spacing: -0.03em !important;
  color: var(--text-strong) !important;
}

/* Disabled and secondary UI states. */
:where(:disabled, [aria-disabled="true"], .is-disabled) {
  color: var(--text-50) !important;
}

/* Preserve readable inverse hierarchy on intentionally dark surfaces. */
:where(
  .footer,
  .footer *,
  .is-dark,
  .is-dark *,
  .tone-dark,
  .tone-dark *,
  .compare-traditional,
  .compare-traditional *,
  .case-dark,
  .case-dark *,
  .control-room-panel,
  .control-room-panel *
) {
  color: var(--text-inverse) !important;
}

:where(
  .footer p,
  .footer li,
  .footer small,
  .is-dark p,
  .is-dark li,
  .tone-dark p,
  .tone-dark li,
  .compare-traditional p,
  .case-dark p,
  .control-room-panel p
) {
  color: var(--text-inverse-80) !important;
}

:where(
  .footer .eyebrow,
  .footer .meta,
  .is-dark .eyebrow,
  .tone-dark .eyebrow,
  .case-dark .meta,
  .control-room-panel .meta
) {
  color: var(--text-inverse-50) !important;
}

/* Keep the established compact mobile hierarchy without changing layout. */
@media (max-width: 900px) {
  :root {
    --type-display-lg-size: 2rem;
    --type-display-lg-line: 2.5rem;
    --type-h1-size: 2rem;
    --type-h1-line: 2.5rem;
    --type-h2-size: 1.75rem;
    --type-h2-line: 2.1875rem;
  }
}

/* Subpages use one copy-only, centered first-screen composition. */
body:not(.home-v2) .subpage-hero > .subpage-hero__inner {
  grid-template-columns: minmax(0, 1fr) !important;
  justify-items: center !important;
  gap: 0 !important;
}

body:not(.home-v2) .subpage-hero .subpage-hero__copy {
  width: min(100%, 64rem) !important;
  margin-inline: auto !important;
  align-self: center !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
}
body:not(.home-v2) .subpage-hero .subpage-hero__copy > * {
  margin-inline: auto !important;
  text-align: center !important;
}

body:not(.home-v2) .subpage-hero .subpage-hero__copy > :where(h1, .page-title, .display) {
  max-width: 20ch !important;
  margin-inline: auto !important;
  text-align: center !important;
}

body:not(.home-v2) .subpage-hero .subpage-hero__copy > :where(.lede, p) {
  margin-inline: auto !important;
  text-align: center !important;
}

body:not(.home-v2) .subpage-hero .subpage-hero__copy > :where(.actions, .hero-actions, .button-row, .btn-row) {
  justify-content: center !important;
}

body:not(.home-v2) .subpage-hero .subpage-hero__visual,
body:not(.home-v2) .subpage-hero .case-media-hero {
  display: none !important;
}

/* Method page: 1/4 narrative + 3/4 visual content, with a quiet light-gray progression. */
.method-sticky-page main > .method-chapter:nth-of-type(2) {
  background: #ffffff !important;
}

.method-sticky-page main > .method-chapter:nth-of-type(3) {
  background: #f8f9fa !important;
}

.method-sticky-page main > .method-chapter:nth-of-type(4) {
  background: #f1f3f5 !important;
  color: var(--ink) !important;
}

.method-sticky-page .method-chapter.tone-dark :is(h2, h3) {
  color: var(--ink) !important;
}

.method-sticky-page .method-chapter.tone-dark p {
  color: var(--muted) !important;
}

@media (min-width: 901px) {
  .method-sticky-page .method-chapter-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 3fr);
    gap: clamp(2rem, 4vw, 4.5rem);
  }

  .method-sticky-page .method-scroll-content {
    min-width: 0;
  }

  .method-sticky-page .method-content-card {
    display: grid;
    grid-template-columns: minmax(14rem, 0.9fr) minmax(20rem, 1.25fr);
    align-items: center;
    column-gap: clamp(2rem, 4vw, 4.5rem);
    padding: clamp(4.5rem, 8vw, 8rem) 0 clamp(4.5rem, 8vw, 8rem) clamp(2rem, 4vw, 4.5rem);
  }

  .method-sticky-page .method-content-card > div:first-child {
    max-width: none;
    align-self: center;
  }

  .method-sticky-page .method-content-image {
    width: 100%;
    margin-top: 0;
    align-self: center;
  }
}

@media (max-width: 900px) {
  .method-sticky-page .method-content-card {
    display: flex;
    flex-direction: column;
  }
}

/* Homepage annotation refinements: preserve the existing layout while
   giving these four display roles their requested responsive hierarchy. */
.home-v2 .methodology-showcase > .wrap > .section-title,
.home-v2 .delivery-comparison .delivery-head > .section-title {
  font-size: clamp(2rem, 2.35vw, 2.5rem) !important;
  font-weight: 200 !important;
}

.home-v2 .methodology-showcase .product-row > strong,
.home-v2 .cta .cta-growth-title {
  font-family: Inter, "Noto Sans SC", sans-serif !important;
  font-size: clamp(2.25rem, 2.82vw, 3.009375rem) !important;
  font-weight: 600 !important;
}

.home-v2 .compare-traditional > span,
.home-v2 .compare-fde > span,
.home-v2 .compare-detail > span {
  color: rgb(100, 106, 115) !important;
}

@media (max-width: 640px) {
  .home-v2 .methodology-row.product-row:nth-of-type(3) > strong {
    font-size: 40px !important;
  }
}