/* English-specific typography and spacing.
 * English copy is longer and uses a different visual rhythm than Chinese,
 * so these rules only apply after the language switch sets data-language=en.
 */

html[data-language="en"] {
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
}

html[data-language="en"] body {
  font-family: var(--font-sans);
  line-height: 1.65;
}

html[data-language="en"] h1,
html[data-language="en"] h2,
html[data-language="en"] h3,
html[data-language="en"] .button,
html[data-language="en"] .desktop-nav,
html[data-language="en"] .header-cta {
  font-family: var(--font-sans);
}

.hero-slogan,
.footer-slogan {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
}

html[data-language="en"] .desktop-nav {
  gap: clamp(20px, 2vw, 30px);
  font-size: 14px;
  font-weight: 620;
  letter-spacing: 0.005em;
}

html[data-language="en"] .header-cta {
  padding-inline: 14px;
  font-size: 13px;
}

html[data-language="en"] .eyebrow {
  margin-bottom: 24px;
  font-size: 12px;
  letter-spacing: 0.12em;
}

html .hero h1.hero-slogan,
html.theme-dark .hero h1.hero-slogan {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  max-width: 660px;
  font-size: clamp(54px, 4.4vw, 66px);
  font-weight: 680;
  line-height: 1.045;
  letter-spacing: -0.043em;
  text-wrap: balance;
}

html[data-language="en"] .hero-summary {
  margin-top: 38px;
}

html[data-language="en"] .hero-lede {
  max-width: 640px;
  font-size: clamp(18px, 1.25vw, 20px);
  line-height: 1.72;
}

html[data-language="en"] .hero-actions {
  margin-top: 32px;
  gap: 14px;
}

html[data-language="en"] .button {
  min-height: 52px;
  padding-inline: 24px;
  font-weight: 680;
}

html[data-language="en"] .support-group {
  grid-template-columns: 148px minmax(0, 1fr);
  gap: 16px;
}

html[data-language="en"] .support-group > strong {
  letter-spacing: 0.015em;
}

html[data-language="en"] .section-heading {
  margin-bottom: clamp(74px, 7vw, 102px);
  grid-template-columns: minmax(0, 1.25fr) minmax(360px, 0.55fr);
  column-gap: clamp(56px, 7vw, 108px);
}

html[data-language="en"] .section-heading h2,
html[data-language="en"] .faq-heading h2 {
  max-width: 940px;
  font-size: clamp(46px, 4.35vw, 64px);
  font-weight: 680;
  line-height: 1.11;
  letter-spacing: -0.042em;
  text-wrap: balance;
}

html[data-language="en"] .section-heading > p:last-child {
  max-width: 500px;
  font-size: 17px;
  line-height: 1.75;
}

html[data-language="en"] .architecture-page-heading {
  grid-template-columns: minmax(0, 1fr);
}

html[data-language="en"] .architecture-page-heading h2 {
  max-width: 1040px;
  font-size: clamp(40px, 3.75vw, 54px);
}

html[data-language="en"] .case-grid {
  gap: 24px;
}

html[data-language="en"] .case-slide {
  min-height: 270px;
  padding: 26px;
}

html[data-language="en"] .case-slide > strong {
  font-size: 20px;
  line-height: 1.38;
  letter-spacing: -0.022em;
}

html[data-language="en"] .case-slide > small {
  margin-top: auto;
  padding-top: 26px;
  font-size: 13px;
  line-height: 1.62;
}

html[data-language="en"] .case-slide-open {
  margin-top: 18px;
  padding-top: 16px;
}

html[data-language="en"] .section-quickstart .quickstart-heading h2 {
  font-size: clamp(54px, 4.7vw, 66px);
  font-weight: 720;
  letter-spacing: -0.038em;
}

html[data-language="en"] #quickstart .quickstart-heading > p:last-child {
  max-width: 980px;
  margin-top: 24px;
  font-size: 17px;
  line-height: 1.78;
}

html[data-language="en"] .quickstart-tabs {
  max-width: 960px;
  gap: 10px;
  margin-bottom: clamp(42px, 4vw, 56px);
  padding: 8px;
}

html[data-language="en"] .quickstart-tab {
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 14px;
  min-height: 92px;
  padding: 18px 22px;
}

html[data-language="en"] .quickstart-tab strong {
  font-size: 17px;
  line-height: 1.35;
}

html[data-language="en"] .quickstart-tab small {
  font-size: 13px;
  line-height: 1.5;
}

html[data-language="en"] .quickstart-panel-intro {
  grid-template-columns: 152px minmax(0, 1fr);
  gap: 24px;
  margin-bottom: 28px;
}

html[data-language="en"] .quickstart-panel-intro h3 {
  font-size: clamp(25px, 2.2vw, 31px);
  line-height: 1.26;
}

html[data-language="en"] .quickstart-panel-intro p {
  margin-top: 9px;
  line-height: 1.72;
}

html[data-language="en"] .quickstart-install-journey {
  gap: 20px;
}

html[data-language="en"] .quickstart-install-panel .start-step,
html[data-language="en"] .quickstart-install-panel .start-step:nth-child(2),
html[data-language="en"] .quickstart-install-panel .start-step:last-child {
  min-height: 420px;
  padding: 32px 30px 34px;
}

html[data-language="en"] .quickstart-install-panel .start-step h3 {
  min-height: 2.55em;
  margin-top: 36px;
  font-size: clamp(25px, 2.05vw, 30px);
  line-height: 1.22;
  letter-spacing: -0.025em;
}

html[data-language="en"] .quickstart-install-panel .start-step > p {
  font-size: 15px;
  line-height: 1.72;
}

html[data-language="en"] .quickstart-install-panel .start-step > p:not(.start-step-note) {
  min-height: 5.2em;
}

html[data-language="en"] .quickstart-chat-turn {
  gap: 26px;
}

html[data-language="en"] .quickstart-chat-turn + .quickstart-chat-turn {
  margin-top: 50px;
}

html[data-language="en"] .quickstart-chat-step {
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 16px;
}

html[data-language="en"] .quickstart-chat-message {
  padding: 16px 19px;
}

html[data-language="en"] .memory-card {
  min-height: 720px;
  padding: 38px 30px 44px;
  grid-template-rows: 54px 166px 118px auto;
}

html[data-language="en"] .memory-card-head {
  gap: 10px;
}

html[data-language="en"] .memory-card-head span {
  left: 0;
}

html[data-language="en"] .memory-card-head p {
  font-size: clamp(18px, 1.45vw, 21px);
  letter-spacing: -0.018em;
}

html[data-language="en"] .memory-card h3 {
  margin-top: 38px;
  font-size: 27px;
  line-height: 1.3;
  letter-spacing: -0.028em;
}

html[data-language="en"] .memory-card > p {
  font-size: 15px;
  line-height: 1.72;
}

html[data-language="en"] .memory-card ul {
  padding-top: 30px;
}

html[data-language="en"] .memory-card li {
  font-size: 14px;
  line-height: 1.65;
}

html[data-language="en"] .comparison-table th,
html[data-language="en"] .comparison-table td {
  padding: 28px 30px;
}

html[data-language="en"] .comparison-table thead th,
html[data-language="en"] .comparison-table tbody th {
  font-size: 18px;
}

html[data-language="en"] .comparison-table td strong {
  font-size: 19px;
  line-height: 1.4;
}

html[data-language="en"] .comparison-table td p {
  margin-top: 10px;
  font-size: 16px;
  line-height: 1.72;
}

html[data-language="en"] .faq-layout {
  grid-template-columns: minmax(190px, 240px) minmax(0, 1fr);
  gap: clamp(48px, 6vw, 72px);
}

html[data-language="en"] .faq-heading h2 {
  max-width: 660px;
  font-size: clamp(46px, 4.5vw, 62px);
}

html[data-language="en"] .faq-list {
  gap: 14px;
}

html[data-language="en"] .faq-list summary {
  min-height: 90px;
  padding: 25px 72px 25px 28px;
  font-size: 18px;
  line-height: 1.42;
}

html[data-language="en"] .faq-list details p {
  padding: 0 72px 30px 28px;
  line-height: 1.75;
}

html[data-language="en"] .footer-main {
  gap: clamp(64px, 8vw, 118px);
}

.footer-product > p.footer-slogan {
  max-width: 460px;
  font-size: 17px;
  line-height: 1.65;
}

@media (min-width: 1241px) {
  html[data-language="en"] .hero-layout {
    grid-template-columns: minmax(560px, 0.9fr) minmax(650px, 1.1fr);
    column-gap: 48px;
  }

  html[data-language="en"] .hero-copy,
  html[data-language="en"] .hero-intro,
  html[data-language="en"] .hero-summary {
    max-width: none;
  }
}

@media (max-width: 1240px) {
  html[data-language="en"] .hero-layout {
    max-width: 1040px;
    gap: 46px;
  }

  html[data-language="en"] .hero-copy,
  html[data-language="en"] .hero-intro,
  html[data-language="en"] .hero-summary {
    max-width: 860px;
  }

  html .hero h1.hero-slogan,
  html.theme-dark .hero h1.hero-slogan {
    max-width: 820px;
    font-size: clamp(56px, 6.2vw, 74px);
  }
}

@media (max-width: 1180px) {
  html[data-language="en"] .section-heading {
    grid-template-columns: minmax(0, 1fr);
    gap: 30px;
  }

  html[data-language="en"] .section-heading h2,
  html[data-language="en"] .faq-heading h2 {
    max-width: 880px;
    font-size: clamp(46px, 6vw, 60px);
  }

  html[data-language="en"] .memory-card {
    min-height: 600px;
    grid-template-rows: 54px 138px 96px auto;
    padding-inline: 42px;
  }

  html[data-language="en"] .faq-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }

  html[data-language="en"] .faq-heading {
    margin-bottom: 0;
  }
}

@media (max-width: 920px) {
  html[data-language="en"] .memory-card {
    min-height: 0;
    padding: 42px 26px 46px;
    grid-template-rows: auto;
  }

  html[data-language="en"] .memory-card h3 {
    margin-top: 34px;
  }

  html[data-language="en"] .memory-card > p {
    margin-top: 18px;
  }

  html[data-language="en"] .memory-card ul {
    padding-top: 26px;
  }
}

@media (max-width: 680px) {
  html[data-language="en"] .hero {
    padding: 48px 0 68px;
  }

  html[data-language="en"] .hero-layout {
    gap: 40px;
  }

  html .hero h1.hero-slogan,
  html.theme-dark .hero h1.hero-slogan {
    font-size: clamp(44px, 12.5vw, 52px);
    line-height: 1.07;
    letter-spacing: -0.038em;
  }

  html[data-language="en"] .hero-summary {
    margin-top: 34px;
  }

  html[data-language="en"] .hero-lede {
    font-size: 17px;
    line-height: 1.72;
  }

  html[data-language="en"] .support-group {
    grid-template-columns: minmax(0, 1fr);
    gap: 5px;
  }

  html[data-language="en"] .hero-support .support-list {
    grid-column: 1;
    gap: 8px 16px;
  }

  html[data-language="en"] .section {
    padding-block: 96px;
  }

  html[data-language="en"] .section-heading {
    margin-bottom: 58px;
  }

  html[data-language="en"] .section-heading h2,
  html[data-language="en"] .faq-heading h2,
  html[data-language="en"] .section-quickstart .quickstart-heading h2 {
    font-size: clamp(40px, 10.8vw, 46px);
    line-height: 1.12;
    letter-spacing: -0.035em;
  }

  html[data-language="en"] .section-heading > p:last-child,
  html[data-language="en"] #quickstart .quickstart-heading > p:last-child {
    font-size: 16px;
    line-height: 1.72;
  }

  html[data-language="en"] .case-slide,
  html[data-language="en"] .case-slide:last-child {
    min-height: 260px;
    padding: 22px;
  }

  html[data-language="en"] .quickstart-tabs {
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
    padding: 6px;
  }

  html[data-language="en"] .quickstart-tab {
    grid-template-columns: 34px minmax(0, 1fr);
    min-height: 78px;
    padding: 14px 16px;
  }

  html[data-language="en"] .quickstart-tab strong {
    font-size: 15px;
  }

  html[data-language="en"] .quickstart-tab small {
    font-size: 12px;
  }

  html[data-language="en"] .quickstart-panel-intro {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }

  html[data-language="en"] .quickstart-install-panel .start-step,
  html[data-language="en"] .quickstart-install-panel .start-step:nth-child(2),
  html[data-language="en"] .quickstart-install-panel .start-step:last-child {
    min-height: 0;
    padding: 28px 24px 30px;
  }

  html[data-language="en"] .quickstart-install-panel .start-step h3,
  html[data-language="en"] .quickstart-install-panel .start-step > p:not(.start-step-note) {
    min-height: 0;
  }

  html[data-language="en"] .quickstart-install-panel .start-step h3 {
    margin-top: 36px;
  }

  html[data-language="en"] .quickstart-chat-step {
    grid-template-columns: minmax(0, 1fr);
    gap: 5px;
  }

  html[data-language="en"] .quickstart-chat-message {
    max-width: 96%;
    padding: 14px 15px;
  }

  html[data-language="en"] .quickstart-chat-message.is-user {
    padding-right: 48px;
  }

  html[data-language="en"] .faq-layout {
    gap: 32px;
  }

  html[data-language="en"] .architecture-page-heading h2 {
    font-size: clamp(34px, 9.2vw, 38px);
    line-height: 1.16;
  }

  html[data-language="en"] .comparison-table tbody th,
  html[data-language="en"] .comparison-table tbody td {
    padding: 0;
  }

  html[data-language="en"] .comparison-table tbody td {
    padding: 17px;
  }

  html[data-language="en"] .faq-heading h2 {
    font-size: clamp(32px, 8.7vw, 36px);
    line-height: 1.18;
  }

  html[data-language="en"] .faq-list summary {
    min-height: 78px;
    padding: 20px 58px 20px 18px;
    font-size: 16px;
  }

  html[data-language="en"] .faq-list details p {
    padding: 0 20px 24px;
    font-size: 15px;
    line-height: 1.72;
  }

  html[data-language="en"] .footer-main {
    gap: 44px;
  }
}