/* Phone/tablet layouts use actual CSS pixels; desktop keeps the original canvas. */
.mobile-dataset-tabs, .mobile-diagram-hint, .mobile-title-break { display: none; }

@media (max-width: 899px) {
  .mobile-title-break { display: block; }
  html { zoom: 1 !important; scroll-padding-top: 112px; -webkit-text-size-adjust: 100%; }
  body.site-body { display: block; }
  body.site-body * { min-width: 0; }
  body.site-body .page { width: 100%; min-height: 100svh; overflow: clip; }

  /* A second navigation row keeps every target readable and touchable. */
  body.site-body .block_4 {
    left: 0; width: 100%; height: 108px; margin: 0;
    padding: 0 20px; align-items: flex-start;
    background: rgba(8, 8, 8, .92);
    border-bottom: 1px solid rgba(236, 235, 229, .12);
  }
  body.site-body .image_2 { width: 88px; height: 28px; object-fit: contain; margin: 16px 0 0; }
  body.site-body .site-nav {
    left: 4px; right: 4px; top: 60px; height: 48px;
    transform: none; justify-content: center; gap: 0;
  }
  body.site-body .site-nav-link { height: 44px; padding: 0 16px; font-size: 14px; line-height: 20px; }
  body.site-body #lang_toggle { width: 44px; height: 44px; margin: 8px -8px 0 auto; }
  body.site-body #lang_img { max-width: 44px; max-height: 44px; }

  body.site-body .hero-carousel { width: 100%; height: var(--mobile-hero-height, max(800px, 100svh)); }
  body.site-body .hero-slide .box_21, body.site-body .hero-slide .section_5 {
    width: 100%; height: 100%; min-height: 0; padding: 0; margin: 0;
  }
  body.site-body .hero-slide .box_21 { background-size: cover; background-position: 62% center; }
  body.site-body #hero_slide_0 .box_21::before {
    background: linear-gradient(180deg, rgba(6,6,6,.22), transparent 55%, #060606 95%);
  }
  body.site-body .hero-visual, body.site-body #hero_slide_0 .hero-visual {
    position: absolute; left: 0; top: 176px; width: 100%; height: auto;
    padding: 0 20px; transform: none;
  }
  body.site-body .hero-slide .block_1 { width: 100%; height: auto; }
  body.site-body .text-group_35 { width: 100%; height: auto; margin: 0; }
  body.site-body .paragraph_1 {
    width: 100%; height: auto; max-width: 540px; font-size: 34px; line-height: 48px;
    letter-spacing: -1px; white-space: normal; text-wrap: balance;
  }
  body.site-body .text_1 { width: 100%; max-width: 460px; height: auto; margin: 20px 0 0; font-size: 14px; line-height: 24px; white-space: normal; }
  body.site-body .hero-next { width: 48px; height: 48px; top: auto; bottom: calc(var(--mobile-footer-height, 200px) + 24px); right: 20px; transform: none; }
  body.site-body .hero-timer-ring { width: 50px; height: 50px; }
  body.site-body .hero-dots { bottom: calc(var(--mobile-footer-height, 200px) + 24px); left: 8px; transform: none; }
  body.site-body .hero-footer { width: 100%; height: var(--mobile-footer-height, 200px); bottom: 0; top: auto; }
  body.site-body .hero-footer .block_2 { width: calc(100% - 40px); height: 1px; margin: 0 20px; }
  body.site-body .hero-footer .group_35 {
    width: auto; height: auto; margin: 20px; display: grid;
    grid-template-columns: 76px minmax(0,1fr); gap: 16px; align-items: center;
  }
  body.site-body .hero-footer .image-wrapper_1, body.site-body .hero-footer .image_1 { width: 76px; height: 34px; }
  body.site-body .hero-footer .image_1 { object-fit: contain; }
  body.site-body .hero-footer .text_3 { width: 100%; height: auto; margin: 0; font-size: 12px; line-height: 20px; letter-spacing: 1px; }
  body.site-body .hero-footer .text_2 { grid-column: 1 / -1; width: 100%; height: auto; margin: 0; font-size: 12px; line-height: 20px; text-align: left; }
  body.site-body .hero-footer .image-wrapper_1 { --nian-scan-end: 78px; }
  body.site-body .hero-footer .image-wrapper_1.scan-backward { --nian-scan-start: 78px; --nian-scan-end: 0px; }
  body.site-body #hero_slide_1 .hero-visual { top: 140px; }
  body.site-body #hero_slide_1 .group_37 { width: 100%; height: auto; min-height: 0; margin: 0; transform: none; }
  body.site-body #hero_slide_1 .text-group_41 { gap: 12px; }
  body.site-body #hero_slide_1 .text_47 { width: 100%; height: auto; min-height: 0; font-size: 28px; line-height: 40px; letter-spacing: -1px; white-space: normal; }
  body.site-body #hero_slide_1 .text_48 { width: 100%; max-width: 100%; height: auto; font-size: 14px; line-height: 24px; }
  body.site-body #hero_slide_1 .group_38 {
    display: block; width: calc(100% + 20px); height: auto; margin: 24px 0 0;
    overflow-x: auto; overscroll-behavior-x: contain; touch-action: pan-x pan-y;
    scrollbar-width: thin; scrollbar-color: #555 transparent;
  }
  body.site-body #hero_slide_1 .image_7 { width: 600px; height: auto; aspect-ratio: 1764 / 650; max-width: none; transform: none; margin: 0; }
  body.site-body .mobile-diagram-hint { display: block; margin-top: 8px; color: #91908a; font-size: 12px; line-height: 20px; }
  body.site-body .production-actions { justify-content: flex-start; margin-top: 20px; }
  body.site-body .production-products-link { height: 44px; padding: 0 16px; }

  /* The active category stays next to its image and description on phones. */
  body.site-body .section_2 { width: 100%; height: auto; padding: 64px 20px; }
  body.site-body .text-wrapper_59 { width: 100%; height: auto; margin: 0; }
  body.site-body .text_6 { width: 100%; height: auto; font-size: 11px; line-height: 20px; letter-spacing: 1px; white-space: normal; }
  body.site-body .section_23, body.site-body .text-group_36 { width: 100%; height: auto; margin: 0; }
  body.site-body .section_23 { margin-top: 16px; }
  body.site-body .text_7 { width: 100%; height: auto; font-size: 28px; line-height: 40px; white-space: normal; }
  body.site-body .text_8 { width: 100%; height: auto; margin-top: 16px; font-size: 14px; line-height: 24px; white-space: normal; }
  body.site-body .section_24 { width: 100%; height: auto; margin: 28px 0 0; flex-direction: column; gap: 24px; }
  body.site-body .mobile-dataset-tabs {
    display: flex; order: -1; width: 100%; overflow-x: auto; gap: 20px;
    scrollbar-width: none; overscroll-behavior-x: contain;
    border-bottom: 1px solid rgba(236,235,229,.15);
  }
  .mobile-dataset-tabs::-webkit-scrollbar { display: none; }
  body.site-body .mobile-dataset-tab {
    display: flex; gap: 8px; align-items: center; flex: 0 0 auto;
    min-height: 48px; padding: 0; border: 0; border-bottom: 2px solid transparent;
    color: #91908a; font-family: inherit; font-size: 14px; line-height: 20px;
    background: transparent; white-space: nowrap;
  }
  body.site-body .mobile-dataset-tab[aria-pressed="true"] { color: #ecebe5; border-bottom-color: #ecebe5; }
  body.site-body .mobile-dataset-tab span { font-size: 12px; opacity: .6; }
  body.site-body .mobile-dataset-tab:focus-visible { outline: 1px solid #ecebe5; outline-offset: -4px; }
  body.site-body .slbt_media { width: 100%; height: auto; aspect-ratio: 1180 / 650; flex: none; }
  body.site-body .slbt_media .image_3 { width: 100%; height: 100%; object-fit: cover; }
  body.site-body .group_36 { width: 100%; min-height: 0; height: auto; }
  body.site-body .slbt_card { display: none; width: 100%; padding: 0; }
  body.site-body .slbt_card.active { display: block; }
  body.site-body .slbt_card::before, body.site-body .slbt_card_row, body.site-body .slbt_divider { display: none; }
  body.site-body .slbt_card_body { width: 100%; }
  body.site-body .slbt_card.active .slbt_card_body { margin-top: 0; }
  body.site-body .slbt_card_title { width: 100%; height: auto; min-height: 0; font-size: 24px; line-height: 32px; letter-spacing: -.5px; white-space: normal; }
  body.site-body .slbt_card_desc { width: 100%; font-size: 14px; line-height: 24px; margin-top: 12px; }
  body.site-body .text-wrapper_7, body.site-body .section_3_drag, body.site-body .text-wrapper_71 { display: none; }

  /* Flatten the source's separate rows into three correctly paired image/text groups. */
  body.site-body .section_3 { display: grid; grid-template-columns: minmax(0,1fr); width: 100%; height: auto; padding: 64px 20px; }
  body.site-body .section_3 > .text_23 { grid-row: 1; width: 100%; height: auto; margin: 0; text-align: left; font-size: 11px; line-height: 20px; letter-spacing: 1px; }
  body.site-body .text-group_38 { grid-row: 2; width: 100%; height: auto; margin: 16px 0 32px; }
  body.site-body .text_24 { width: 100%; height: auto; margin: 0; text-align: left; font-size: 28px; line-height: 40px; white-space: normal; letter-spacing: -.5px; text-wrap: balance; }
  body.site-body .text_25 { width: 100%; height: auto; margin-top: 16px; text-align: left; font-size: 14px; line-height: 24px; white-space: normal; }
  body.site-body .image-wrapper_7, body.site-body .text-wrapper_66, body.site-body .text-wrapper_67, body.site-body .text-wrapper_68 { display: contents; }
  body.site-body .image-wrapper_7 img { width: 100%; height: auto; aspect-ratio: 565 / 420; object-fit: cover; margin: 0; }
  body.site-body .image_4-0 { grid-row: 3; } body.site-body .image_4-1 { grid-row: 7; margin-top: 32px; } body.site-body .image_4-2 { grid-row: 11; margin-top: 32px; }
  body.site-body .text-wrapper_66 span { width: 100%; height: auto; margin: 16px 0 0; font-size: 12px; line-height: 20px; }
  body.site-body .text_26 { grid-row: 4; } body.site-body .text_27 { grid-row: 8; } body.site-body .text_28 { grid-row: 12; }
  body.site-body .text-wrapper_67 span { width: 100%; height: auto; margin: 4px 0 0; font-size: 22px; line-height: 32px; letter-spacing: 0; white-space: normal; }
  body.site-body .text_29 { grid-row: 5; } body.site-body .text_30 { grid-row: 9; } body.site-body .text_31 { grid-row: 13; }
  body.site-body .text-wrapper_68 span { width: 100%; height: auto; margin: 8px 0 0; font-size: 14px; line-height: 24px; white-space: normal; }
  body.site-body .text_32 { grid-row: 6; } body.site-body .text_33 { grid-row: 10; } body.site-body .text_34 { grid-row: 14; }
  body.site-body .image-wrapper_7 .image_4-1, body.site-body .image-wrapper_7 .image_4-2 { margin-top: 36px; }

  body.site-body .section_4 { width: 100%; height: auto; padding: 64px 20px 132px; }
  body.site-body .text-wrapper_69 { width: 100%; height: auto; margin: 0; gap: 12px; align-items: center; }
  body.site-body .text_36 { width: auto; height: auto; letter-spacing: 1px; font-size: 11px; line-height: 20px; }
  body.site-body .text_37 { width: auto; height: auto; letter-spacing: 0; font-size: 10px; line-height: 20px; }
  body.site-body .block_24, body.site-body .text-group_39 { width: 100%; height: auto; margin: 0; }
  body.site-body .block_24 { margin-top: 16px; }
  body.site-body .text_38 { width: 100%; height: auto; font-size: 28px; line-height: 40px; white-space: normal; }
  body.site-body .text_39 { width: 100%; height: auto; margin-top: 16px; font-size: 14px; line-height: 24px; white-space: normal; }
  body.site-body .block_25 { display: none; }
  body.site-body .world-carousel-viewport { position: relative; left: auto; top: auto; width: 100%; height: auto; aspect-ratio: 920 / 518; margin: 32px 0 0; border-radius: 6px; touch-action: pan-y pinch-zoom; }
  body.site-body .world-carousel-track { left: 0; top: 0; height: 100%; gap: 0; }
  body.site-body .world-carousel-slide { flex: 0 0 var(--world-slide-width); width: var(--world-slide-width); height: 100%; overflow: hidden; }
  body.site-body .world-carousel-slide img { left: 0; width: 100%; height: 100%; transform: none; border-radius: 0; object-fit: cover; }
  body.site-body .text-wrapper_70 { width: 100%; height: auto; margin: 24px 0 0; }
  body.site-body .text_41 { width: auto; height: auto; line-height: 20px; }
  body.site-body .block_26, body.site-body .text-group_40 { width: 100%; height: auto; margin: 0; }
  body.site-body .block_26 { margin-top: 12px; }
  body.site-body .text_43 { width: 100%; height: auto; font-size: 22px; line-height: 32px; white-space: normal; }
  body.site-body .text_44 { width: 100%; height: auto; margin-top: 12px; font-size: 14px; line-height: 24px; white-space: normal; }
  body.site-body .block_27 { width: 100%; height: 2px; margin: 28px 0 0; }
  body.site-body .group_6 { width: 100%; }
  body.site-body .group_7 { width: 20%; }
  body.site-body .section_4 .text-wrapper_14, body.site-body .section_4 .group_9 { top: auto; bottom: 64px; width: 44px; height: 44px; margin: 0; }
  body.site-body .section_4 .text-wrapper_14 { left: auto; right: 76px; }
  body.site-body .section_4 .group_9 { left: auto; right: 20px; }

  body.site-body .section_8, body.site-body .group_10 { width: 100%; height: auto; }
  body.site-body .group_10 { background-size: cover; background-position: center; }
  body.site-body .group_11 { width: 100%; height: auto; padding: 64px 20px 32px; background: linear-gradient(90deg,rgba(8,10,12,.85),rgba(8,10,12,.55)); }
  body.site-body .text_56 { width: 100%; height: auto; margin: 0; font-size: 10px; line-height: 20px; letter-spacing: 2px; }
  body.site-body .text-group_42 { width: 100%; height: auto; margin: 24px 0 48px; }
  body.site-body .paragraph_2 { width: 100%; height: auto; margin: 0; font-size: 28px; line-height: 40px; white-space: normal; letter-spacing: -.5px; text-wrap: balance; }
  body.site-body .text_57 { width: 100%; height: auto; margin-top: 20px; font-size: 14px; line-height: 24px; white-space: normal; }
  body.site-body .block_12 { position: static; width: 100%; height: auto; background: none; }
  body.site-body .block_13 { width: 100%; margin: 0; }
  body.site-body .box_27 { display: grid; grid-template-columns: 48px minmax(0,1fr); gap: 16px; width: 100%; height: auto; margin: 24px 0 0; }
  body.site-body .group_12 { width: 48px; height: 48px; background-size: 48px; margin: 0; }
  body.site-body .section_28 { width: 100%; height: auto; margin: 0; justify-content: flex-start; }
  body.site-body .text_58, body.site-body .text_59 { width: 100%; height: auto; line-height: 20px; }
  body.site-body .section_9 { display: none; }
  body.site-body .text_59 { margin-top: 8px; font-size: 14px; letter-spacing: 0; }
  body.site-body .section_31 { grid-column: 1 / -1; width: 100%; height: auto; margin: 20px 0 0; }
  body.site-body .text_64 { width: 100%; height: auto; font-size: 12px; line-height: 20px; }
  body.site-body .image-text_10 { width: 100%; height: auto; margin-top: 24px; gap: 16px; }
  body.site-body .image_15 { width: 100px; height: auto; object-fit: contain; }
  body.site-body .text-group_10 { width: 100%; height: auto; font-size: 10px; line-height: 16px; white-space: normal; }
  body.site-body .site-toast { top: 120px; font-size: 14px; line-height: 20px; }
}

@media (min-width: 600px) and (max-width: 899px) {
  body.site-body .block_4 { height: 72px; align-items: center; padding: 0 28px; }
  body.site-body .image_2 { margin: 0; }
  body.site-body .site-nav { left: 50%; right: auto; top: 12px; transform: translateX(-50%); }
  body.site-body #lang_toggle { margin: 0 -8px 0 auto; }
  body.site-body .hero-carousel { height: var(--mobile-hero-height, max(840px,100svh)); }
  body.site-body .section_2, body.site-body .section_3, body.site-body .section_4, body.site-body .group_11 { padding-left: 28px; padding-right: 28px; }
  body.site-body .section_3 { grid-template-columns: repeat(3,minmax(0,1fr)); column-gap: 20px; }
  body.site-body .section_3 > .text_23, body.site-body .text-group_38 { grid-column: 1 / -1; }
  body.site-body .image-wrapper_7 img { grid-row: 3; margin: 0; }
  body.site-body .text-wrapper_66 span { grid-row: 4; }
  body.site-body .text-wrapper_67 span { grid-row: 5; font-size: 20px; line-height: 28px; }
  body.site-body .text-wrapper_68 span { grid-row: 6; }
  body.site-body .image_4-0, body.site-body .text_26, body.site-body .text_29, body.site-body .text_32 { grid-column: 1; }
  body.site-body .image_4-1, body.site-body .text_27, body.site-body .text_30, body.site-body .text_33 { grid-column: 2; }
  body.site-body .image_4-2, body.site-body .text_28, body.site-body .text_31, body.site-body .text_34 { grid-column: 3; }
  body.site-body .image-wrapper_7 .image_4-1, body.site-body .image-wrapper_7 .image_4-2 { margin-top: 0; }
  body.site-body .hero-visual { padding-left: 28px; padding-right: 28px; }
}

@media (max-width: 899px) {
  body.site-body .hero-prev {
    width: 48px; height: 48px; top: auto; bottom: calc(var(--mobile-footer-height,200px) + 24px);
    left: 20px; transform: none;
  }
  body.site-body .hero-dots {
    left: 50%; gap: 12px; transform: translateX(-50%);
    bottom: calc(var(--mobile-footer-height,200px) + 24px);
  }
  body.site-body .hero-dot { width: 80px; height: 48px; }
  body.site-body .hero-dot .hero-thumb-title { font-size: 11px; line-height: 14px; }
}