:root {
  color-scheme: light;
  font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif;
  background: #fde5eb;
  color: #540411;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; }
img { display: block; max-width: 100%; height: auto; }
a, button { color: inherit; -webkit-tap-highlight-color: transparent; }
a { text-decoration: none; }
button { font: inherit; cursor: pointer; }
[hidden] { display: none !important; }
/* Accessibility-only text is clipped locally, never used to position visible content. */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: clip; clip-path: inset(50%); white-space: nowrap; border: 0; }
a:focus-visible, button:focus-visible { outline: 3px solid #8b0632; outline-offset: 3px; }
a:hover { filter: brightness(1.035); }
[aria-disabled="true"] { cursor: default; }
.landing { width: 100%; opacity: 0; transition: opacity 180ms ease; }
.is-ready .landing { opacity: 1; }
.is-loading .landing { opacity: 0; visibility: hidden; pointer-events: none; transition: none; }
[data-button-list-status="loading"] [data-aggregation-status] { display: none; }
/* Existing full-screen loading state; no new floating action bar. */
.page-loader { position: fixed; z-index: 999; inset: 0; display: grid; place-content: center; justify-items: center; gap: 14px; padding: 20px; background: #fde5eb; color: #b30c27; transition: opacity 180ms ease, visibility 180ms ease; }
.page-loader span { width: 42px; height: 42px; border: 3px solid rgb(179 12 39 / 16%); border-top-color: #e52442; border-radius: 50%; animation: spin 720ms linear infinite; }
.page-loader p { margin: 0; font-size: max(.875rem, 1vw); letter-spacing: .08em; }
.is-ready .page-loader { visibility: hidden; opacity: 0; }
.is-loading .page-loader { visibility: visible; opacity: 1; transition: none; }
@keyframes spin { to { transform: rotate(1turn); } }
.stage, .artboard { width: 100%; min-width: 0; }
.stage-mobile { display: none; }
.artboard { background: #fde5eb; }
.hero-section { position: relative; isolation: isolate; padding-bottom: 3.85417vw; }
/* Only the decorative image is cropped at the content-driven section boundary.
   Width sets its scale; auto height prevents zooming when help/text grows, and
   object-fit preserves that scale when max-height trims the bottom of the art. */
.hero-backdrop { position: absolute; inset: 0 auto auto 0; width: 100%; height: auto; max-height: 100%; object-fit: cover; object-position: top; z-index: -1; pointer-events: none; }
.hero-scene { display: grid; justify-items: start; padding: .88542vw 5.3125%; }
.hero-logo { width: 7.96875vw; min-width: 44px; min-height: 44px; display: grid; align-content: center; }
.visual-link > img { width: 100%; height: auto; }
.hero-enter { display: grid; align-items: center; width: 25.26042vw; min-height: 44px; margin: 22.13542vw 0 0 1.04167vw; }
.action-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: max(12px, 1.30208vw); width: 44.63542%; margin: 2.96875vw 0 0 4.73958%; }
.action-card { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: max(10px, 2.51016vw); padding: max(12px, 1vw) max(12px, 1.45325vw) max(12px, 1vw) max(12px, 1.71748vw); min-height: max(68px, 5.625vw); min-width: 0; border-radius: max(8px, .8vw); background: linear-gradient(110deg, #fff8f8, #fbe1e9); color: #f31524; }
.action-copy { min-width: 0; }
.action-copy strong, .action-copy small { display: block; overflow-wrap: anywhere; }
.action-copy strong { font-size: max(1rem, 1.58537vw); line-height: 1.4; font-weight: 500; }
.action-copy small { color: #666; font-size: max(.75rem, .9248vw); line-height: 1.5; }
/* Local sprite crops retain the exact Figma icons/arrows without rasterized text. */
.action-icon { width: max(30px, 3.30285vw); aspect-ratio: 1; background: var(--action-art) 9.35% 54.3% / 656% 170% no-repeat; }
.action-arrow { width: max(10px, .9248vw); aspect-ratio: 14 / 26; background: var(--action-art) 92.675% 42.37% / 2342.857% 326.923% no-repeat; }
.features-section { background: #fce4ec; }
.features-heading { width: 100%; aspect-ratio: 1920 / 187; background: url('./assets/jw012-xhs/pc/reasons-bg.webp') top center / 100% auto no-repeat; }
.feature-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .833333vw; padding: 0 2.291667% 1.927083vw 2.5%; }
.feature-card { min-width: 0; background: #fff3f6; border-radius: max(4px, .35vw); }
/* Only the photographic part of the flattened PC feature sheet is cropped. */
.feature-art { position: relative; aspect-ratio: 445 / 270; overflow: clip; border-radius: inherit; }
.artboard-pc .feature-art img { position: absolute; width: var(--photo-width); max-width: none; height: auto; left: var(--photo-left); top: -69.25926%; }
.feature-copy { padding: max(10px, .520833vw) max(16px, 2.083333vw) max(16px, 1.302083vw); }
.feature-copy h3 { margin: 0; font-size: max(1rem, 1.875vw); line-height: 1.3; font-weight: 500; overflow-wrap: anywhere; }
.feature-copy p { margin: .3em 0 0; color: #666; font-size: max(.8125rem, 1.666667vw); line-height: 1.2; overflow-wrap: anywhere; }
.products-section { background: #fbdde7; }
.products-heading { width: 100%; }
.official-section { padding: .2604167vw 3.38542% max(20px, 1.927083vw); }
.official-heading { width: 26.5625vw; min-width: min(100%, 196px); margin: 0 auto max(18px, 2.708333vw); }
.channel-grid { --channel-gap: max(14px, 3.38542vw); display: flex; flex-wrap: wrap; justify-content: center; gap: var(--channel-gap); }
.social-card { display: grid; grid-template-columns: auto minmax(0, 1fr); align-content: center; align-items: center; column-gap: max(12px, 1.5625vw); row-gap: .677083vw; flex: 0 1 calc((100% - 2 * var(--channel-gap)) / 3); min-width: min(100%, 240px); min-height: max(88px, 11.25vw); padding: max(16px, 2.083333vw); border-radius: max(8px, .625vw); background: #fff; color: #000; }
.social-icon { grid-row: span 2; width: max(36px, 5.10417vw); height: auto; }
/* Figma places the original mail image in a 98×85 cover slot (40×35 on H5). */
[data-config-type="official_email"] .social-icon { aspect-ratio: 98 / 85; object-fit: cover; }
.social-card strong { font-size: max(1rem, 1.5625vw); font-weight: 600; line-height: 1.4; overflow-wrap: anywhere; }
.social-card small { font-size: max(.75rem, 1.45833vw); line-height: 1.4; color: #707070; overflow-wrap: anywhere; }
.site-footer { display: grid; padding-bottom: env(safe-area-inset-bottom, 0px); background: #540411; }
.site-footer > img { grid-area: 1 / 1; width: 100%; height: auto; }
/* The existing Figma footer mask hides the original baked-in middle identity. */
.pc-footer-mask { grid-area: 1 / 1; align-self: start; justify-self: start; margin: 3.4375vw 0 0 35.57292%; width: 34.89583%; aspect-ratio: 670 / 61; background: #540411; }
@media (max-width: 900px) {
  .stage-pc { display: none; }
  .stage-mobile { display: block; }
  .artboard { background: #fff0f3; }
  .hero-section { padding-bottom: max(22px, 4.66667vw); background: #ffc6d0; }
  .hero-scene { position: relative; padding: 5.86667vw 0 0; }
  .hero-logo { width: 9.73333vw; margin-left: 6.26667%; }
  .h5-phone { width: 31.2%; height: auto; margin: 6.13333vw 0 0 18.26667%; }
  .hero-enter { width: 40.4%; margin: -4.26667vw 0 0 17.6%; z-index: 1; }
  .action-grid { width: auto; margin: max(18px, 4.53333vw) 4.93333% 0; gap: max(8px, 2.66667vw); }
  .action-card { gap: max(12px, 2vw); padding: max(12px, 2vw) max(14px, 2.8vw); border-radius: max(9px, 1.6vw); }
  .action-icon { width: max(32px, 6.66667vw); }
  .action-arrow { width: max(10px, 1.86667vw); }
  .action-copy strong { font-size: max(1rem, 3.2vw); }
  .action-copy small { font-size: max(.75rem, 1.86667vw); }
  .features-section { position: relative; isolation: isolate; container-type: inline-size; background: #ffd6de; }
  /* Decorative nine-slice background: preserve the heading/icons and bottom
     wave proportions; only the text-free middle grows. Figma crops the final
     26px of the 613px export, so this image-only clip removes that same tail. */
  .features-section::before { content: ''; position: absolute; inset: 0 0 -3.46667vw; inset-block-end: -3.46667cqw; z-index: -1; pointer-events: none; border-image-source: url('./assets/jw012-xhs/h5/bg-features.webp'); border-image-slice: 219 0 100 fill; border-image-width: 29.2vw 0 13.33333vw; border-image-width: 29.2cqw 0 13.33333cqw; clip-path: inset(0 0 3.46667vw); clip-path: inset(0 0 3.46667cqw); }
  .features-heading { aspect-ratio: 750 / 219; background: none; }
  /* At most two columns; a text-relative minimum lets enlarged type reflow
     whole cards instead of creating tall, narrow copy/photo strips. */
  .feature-grid { --feature-gap: max(6px, 1.86667vw); grid-template-columns: repeat(auto-fit, minmax(min(100%, max(9rem, (100% - var(--feature-gap)) / 2)), 1fr)); padding: 0 1.6% 1.86667vw; gap: max(4px, .93333vw) var(--feature-gap); }
  .feature-card { display: grid; grid-template-columns: minmax(0, 1fr); min-height: 26.26667vw; border-radius: max(5px, .8vw); }
  .feature-card:nth-child(n + 3) { min-height: 20vw; }
  .feature-art { grid-area: 1 / 1; aspect-ratio: auto; min-width: 0; }
  /* Local same-cell photo background; its proportional crop fills the card.
     A pale overlay covers baked-in copy while native text determines height. */
  .feature-art img { position: absolute; inset: 0; width: 100%; height: 100%; min-width: 0; max-width: none; object-fit: cover; object-position: right top; }
  .feature-card:first-child .feature-art img { object-position: 70% top; }
  .feature-art::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, #fff3f6 0%, #fff3f6 52%, rgb(255 243 246 / 0%) 76%); }
  /* This card's original left edge is neutral white/gray. Keep its baked-in
     title covered, then fade sooner so the photo does not acquire a pink panel. */
  .feature-card--channel { background: #fcfcfc; }
  .feature-card--channel .feature-art::after { background: linear-gradient(90deg, #fdfdfd 0%, #fcfcfc 50%, rgb(252 252 252 / 0%) 68%); }
  .feature-copy { grid-area: 1 / 1; width: max(55%, 7.5rem); max-width: 75%; min-width: 0; padding: max(6px, 2.4vw); z-index: 1; }
  /* The original H5 card titles are bold, about 26px on the 750px artboard;
     retain a readable 16px minimum and enough room for the six-character title. */
  .feature-copy h3 { font-size: max(1rem, 3.466667vw); font-weight: 700; line-height: 1.4; text-wrap: wrap; color: #f45a69; }
  @supports (background-clip: text) {
    .feature-copy h3 { background: linear-gradient(#fc7777, #ee435a); background-clip: text; -webkit-background-clip: text; color: transparent; }
  }
  .feature-copy p { font-size: max(.75rem, 1.6vw); color: #252525; line-height: 1.5; margin: .45em 0; }
  .feature-caption { display: inline-block; font-size: max(.75rem, 1.9vw); padding: .2em .6em; border-radius: 2em; color: #fff; background: linear-gradient(#ff4a7e, #ef175a); }
  .products-section, .official-section { background: #fbdde5 url('./assets/jw012-xhs/h5/bg-channels.webp') top center / 100% auto no-repeat; }
  .products-section { padding-top: max(12px, 4.26667vw); }
  .products-heading { width: 26.26667%; min-width: min(100%, 128px); margin: 0 auto max(12px, 4.66667vw); }
  .official-section { padding: max(12px, 2.4vw) max(8px, 1.33333vw) max(12px, 2.8vw); }
  .official-heading { width: 26.13333vw; min-width: min(100%, 128px); margin-bottom: max(12px, 3.33333vw); }
  .channel-grid { --channel-gap: max(4px, 2.66667vw); gap: var(--channel-gap); }
  /* Three compact cards in ordinary H5 widths; the em minimum allows enlarged
     text to wrap whole cards, and flex centering also handles missing links. */
  .social-card { flex-basis: calc((100% - 2 * var(--channel-gap)) / 3); min-width: min(100%, 7.5em); font-size: max(.75rem, 1.6vw); padding: max(6px, 1.46667vw); gap: .25em max(4px, 1.33333vw); min-height: max(76px, 12vw); border-radius: max(5px, .8vw); }
  .social-icon { grid-row: span 2; width: max(20px, 5.33333vw); }
  .social-card strong { font-size: max(.75rem, 2.4vw); }
  .social-card small { font-size: max(.75rem, 1.6vw); }
  .h5-footer { background: #53010b; }
  .page-loader { background: #fff2f3; }
}
@supports (padding: max(0px)) {
  .action-grid { padding-left: env(safe-area-inset-left, 0px); padding-right: env(safe-area-inset-right, 0px); }
  .channel-grid { padding-left: env(safe-area-inset-left, 0px); padding-right: env(safe-area-inset-right, 0px); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .landing, .page-loader { transition: none; }
  .page-loader span { animation-duration: 1.4s; }
}
/* H5 keeps the design's two-by-two actions; compact spacing leaves room for
   native 12px help text. Only genuinely narrow windows fall back to one column. */
@media (max-width: 900px) {
  .action-grid { --action-gap: max(8px, 2.66667vw); grid-template-columns: repeat(auto-fit, minmax(min(100%, max(8rem, (100% - var(--action-gap)) / 2)), 1fr)); gap: var(--action-gap); }
  .action-card { min-height: max(64px, 11.33333vw); padding: max(8px, 1.6vw) max(8px, 2.93333vw) max(8px, 1.6vw) max(8px, 3.46667vw); gap: clamp(4px, calc(9.44444vw - 32.83333px), 38px); }
  .action-copy strong { font-size: max(.875rem, 3.2vw); }
  .action-copy small { font-size: max(.75rem, 1.86667vw); }
  .action-icon { width: max(24px, 6.66667vw); }
  .action-arrow { width: max(8px, 1.86667vw); }
}
/* Narrow desktops use PC artwork with two-column content, easing the 900/901
   transition and giving enlarged text the same usable space as on a tablet. */
@media (min-width: 901px) and (max-width: 1349px) {
  .feature-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 2vw; }
  .feature-copy h3 { font-size: max(1rem, 2vw); }
  .feature-copy p { font-size: max(.8125rem, 1.5vw); }
}
@media (max-width: 319px) {
  .action-grid { grid-template-columns: minmax(0, 1fr); }
  .feature-grid { grid-template-columns: minmax(0, 1fr); }
}