:root {
  color-scheme: dark;
  font-family: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
  background: #09030c;
  --pc-unit: calc(100vw / 1920);
  --mobile-unit: calc(100vw / 750);
}

* {
  box-sizing: border-box;
}

html, body {
  width: 100%;
  min-height: 100%;
  margin: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  display: grid;
  grid-template: "page" 1fr/minmax(0, 1fr);
  color: #fff;
  background: #09030c;
}

a {
  color: inherit;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

img, canvas {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
}

h2, p {
  margin: 0;
}

[hidden] {
  display: none !important;
}

.landing {
  grid-area: page;
  width: 100%;
  min-width: 0;
  min-height: 100%;
  min-height: 100dvh;
}

.is-loading .landing {
  display: none;
  opacity: 0;
}

.artboard {
  --unit: var(--pc-unit);
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  width: 100%;
  min-width: 0;
  min-height: 100%;
  min-height: 100dvh;
  margin: 0;
  padding-inline: env(safe-area-inset-left) env(safe-area-inset-right);
  background: #0e070c;
}

.board-background-layer {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: clip;
  pointer-events: none;
}

.board-background {
  width: 100%;
}

.artboard-mobile {
  display: none;
  --unit: var(--mobile-unit);
  background: #0f0b0e;
}

.site-header {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  padding: max(8px, min(9px, 9 * var(--pc-unit))) max(12px, min(23px, 23 * var(--pc-unit))) max(8px, min(13px, 13 * var(--pc-unit))) max(12px, min(29px, 29 * var(--pc-unit)));
}

.header-background {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

.brand {
  width: max(140px, 9.84375vw);
  max-width: 100%;
  flex-shrink: 0;
}

.header-nav {
  display: flex;
  flex: 0 1 auto;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px max(6px, min(17px, 17 * var(--pc-unit)));
  min-width: 0;
  max-width: 100%;
}

.header-nav:not(:has(> a:not([hidden]))) {
  display: none;
}

.header-link {
  flex: 0 1 auto;
  width: max(84px, min(164px, 164 * var(--pc-unit)));
  max-width: 100%;
  min-height: 44px;
  display: grid;
  align-content: center;
}

.header-link:nth-child(n+3) {
  width: max(84px, min(142px, 142 * var(--pc-unit)));
}

.design-link {
  cursor: pointer;
  touch-action: manipulation;
  transition: filter 160ms ease;
}

.design-link > img {
  width: 100%;
}

.design-link:hover {
  filter: brightness(1.1);
}

.design-link:active {
  filter: brightness(0.95);
}

a:focus-visible, button:focus-visible {
  outline: 2px solid #ff98eb;
  outline-offset: 3px;
}

.hero {
  display: flex;
  flex-direction: column;
  flex: 0 0 auto;
  align-items: flex-start;
  min-height: calc(48.54902vw + 77.85882px);
  padding: min(63px, 63 * var(--pc-unit)) 0 max(24px, min(50px, 50 * var(--pc-unit)));
}

.hero-title {
  width: 42.5%;
  margin-left: 1.5625%;
}

.hero-entry {
  display: grid;
  align-items: center;
  width: max(140px, 31.354167%);
  max-width: 88%;
  min-height: 44px;
  margin: min(76px, 76 * var(--pc-unit)) 0 0 5.677083%;
}

.section-title {
  display: flex;
  justify-content: center;
  line-height: 1;
}

.section-title > img {
  max-width: 92%;
}

.visit-title > img {
  width: max(180px, 21.510417%);
}

.access-grid {
  display: grid;
  grid-template-columns: minmax(0, 469fr) minmax(0, 1099fr);
  align-items: start;
  column-gap: 6.44%;
  margin: max(20px, min(59px, 59 * var(--pc-unit))) 7.03125% 0 5.677083%;
}

.access-grid:not(:has(.download-actions > a:not([hidden]))) {
  grid-template-columns: minmax(0, 1fr);
}

.access-grid:not(:has(.download-actions > a:not([hidden]))) .help-grid {
  margin-top: 0;
}

.download-card {
  min-width: 0;
  max-width: 100%;
}

.download-title {
  width: 89.552239%;
  max-width: 100%;
  margin: 0;
}

.download-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: max(8px, min(44px, 44 * var(--pc-unit)));
  margin: max(16px, min(55px, 55 * var(--pc-unit))) 0 0 6.183369%;
}

.qr-panel {
  display: grid;
  flex: 0 1 auto;
  width: max(90px, 8.489583vw);
  max-width: 100%;
}

.qr-art, .qr-surface {
  grid-area: 1/1;
}

.qr-art {
  width: 100%;
}

.qr-surface {
  align-self: start;
  justify-self: center;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 95.1%;
  aspect-ratio: 1;
  margin-top: 2.45%;
  padding: 3.68%;
  border-radius: 8%;
  background: #fff;
}

.dynamic-qr {
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  background: #fff;
  image-rendering: pixelated;
}

.download-entry {
  display: grid;
  align-items: center;
  flex: 1 1 100px;
  width: 100%;
  max-width: calc(233 * var(--pc-unit));
  min-height: 44px;
  margin-bottom: calc(53 * var(--pc-unit));
}

.download-entry > img {
  border-radius: 999px;
}

.download-card:not(:has(.download-actions > a:not([hidden]))) {
  display: none;
}

.help-grid {
  min-width: 0;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  align-items: stretch;
  gap: 10.56%;
  margin-top: calc(50 * var(--unit));
}

.service-tile {
  --service-padding: max(calc(7px), min(20px, 20 * var(--pc-unit)));
  container: help-card/inline-size;
  isolation: isolate;
  min-width: 0;
  min-height: max(44px, 253 * var(--unit));
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  align-items: start;
  row-gap: max(5px, min(6px, 6 * var(--pc-unit)));
  padding: var(--service-padding);
  border: 1px solid #8d386e;
  border-radius: max(4px, min(10px, 10 * var(--pc-unit)));
  background: linear-gradient(125deg, #3b1739, #190c1d 70%, #491447);
  box-shadow: inset 0 0 8px rgba(208, 86, 163, 0.2);
}

.service-art, .social-art {
  position: relative;
  display: block;
  align-self: start;
  width: 100%;
  aspect-ratio: 1;
  overflow: clip;
  pointer-events: none;
}

.service-art > img {
  position: absolute;
  width: 423.5294117647%;
  max-width: none;
  height: auto;
  left: -23.5294117647%;
  top: -23.5294117647%;
}

.service-art {
  mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent), linear-gradient(to bottom, transparent, #000 8%, #000 92%, transparent);
  mask-composite: intersect;
  grid-area: 1/1;
  z-index: 1;
  width: max(28px, 60 * var(--unit));
  max-width: 100%;
}

.service-copy {
  grid-area: 2/1;
  z-index: 1;
  display: grid;
  grid-template-rows: auto 1fr auto;
  align-self: stretch;
  min-width: 0;
  gap: max(5px, min(8px, 8 * var(--pc-unit)));
  align-items: flex-start;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.service-decoration {
  --art-source-width: 288;
  --art-x: 164;
  --art-y: 152;
  --art-width: 124;
  --art-height: 101;
  position: relative;
  grid-area: 1/1/-1/-1;
  align-self: end;
  justify-self: end;
  z-index: 0;
  width: min(44%, 124px);
  aspect-ratio: var(--art-width)/var(--art-height);
  margin-right: calc(-1 * var(--service-padding));
  margin-bottom: calc(-1 * var(--service-padding));
  overflow: clip;
  border-bottom-right-radius: 7px;
  pointer-events: none;
}

.service-decoration > img {
  position: absolute;
  width: calc(var(--art-source-width) / var(--art-width) * 100%);
  max-width: none;
  height: auto;
  left: calc(-1 * var(--art-x) / var(--art-width) * 100%);
  top: calc(-1 * var(--art-y) / var(--art-height) * 100%);
}

.service-decoration-install {
  --art-y: 153;
  --art-height: 100;
  clip-path: polygon(41.935484% 0, 100% 0, 100% 100%, 0 100%, 0 24%, 41.935484% 24%);
}

.service-decoration-faq {
  --art-x: 185;
  --art-y: 154;
  --art-width: 103;
  --art-height: 99;
}

.service-decoration {
  mask-image: linear-gradient(to right, transparent, #000 16%), linear-gradient(to bottom, transparent, #000 18%);
  mask-composite: intersect;
}

.service-title {
  font-size: max(12px, 28 * var(--unit));
  line-height: 1.35;
  font-weight: 600;
}

.service-description {
  flex: 1;
  font-size: max(12px, 18 * var(--unit));
}

.service-action {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 4px;
  font-size: max(12px, 20 * var(--unit));
}

.service-action > img {
  width: max(11px, 24 * var(--unit));
  height: auto;
  flex-shrink: 0;
}

.assurances {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: max(8px, min(24px, 24 * var(--pc-unit)));
  width: 92.1875%;
  min-height: calc(116 * var(--pc-unit));
  margin: max(20px, min(23px, 23 * var(--pc-unit))) auto 0;
  padding: max(10px, min(13px, 13 * var(--pc-unit))) max(10px, min(16px, 16 * var(--pc-unit)));
  border: 1px solid #b94399;
  border-radius: max(8px, min(22px, 22 * var(--pc-unit)));
  background: linear-gradient(110deg, #250d2c, #120713 50%, #441139);
  box-shadow: inset 0 0 8px #e12cca;
}

.assurance-copy {
  position: relative;
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 8px;
}

.assurance-icon {
  --assurance-scale: max(calc(.5px), calc(1 * var(--pc-unit)));
  flex: 0 0 auto;
  width: calc(88 * var(--assurance-scale));
  height: calc(88 * var(--assurance-scale));
  mask-image: radial-gradient(ellipse, #000 55%, transparent 72%);
  background: url("./assets/jj32/flow/pc-assurances.webp") calc(-72 * var(--assurance-scale)) calc(-14 * var(--assurance-scale))/calc(1770 * var(--assurance-scale)) calc(116 * var(--assurance-scale)) no-repeat;
}

.artboard-pc .assurance-copy {
  justify-content: center;
}

.assurance-copy + .assurance-copy::before {
  content: "";
  position: absolute;
  left: -12px;
  top: 20%;
  height: 60%;
  width: 1px;
  background: #ca259d;
  pointer-events: none;
}

.assurance-icon-1 {
  background-position-x: calc(-540 * var(--assurance-scale));
}

.assurance-icon-2 {
  background-position-x: calc(-944 * var(--assurance-scale));
}

.assurance-icon-3 {
  background-position-x: calc(-1374 * var(--assurance-scale));
}

.assurance-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 4px;
  font-size: max(12px, 20 * var(--unit));
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.assurance-text strong {
  font-size: max(12px, 28 * var(--unit));
  font-weight: 500;
}

.assurance-text > span {
  opacity: 0.8;
}

.more-section {
  padding-top: max(28px, min(74px, 74 * var(--pc-unit)));
}

.more-title > img {
  width: max(180px, 22.1875%);
}

.related-artwork {
  width: min(92.8%, 52.137255vw + 365.9647px);
  margin: min(56px, 56 * var(--pc-unit)) auto 0;
}

.related-mount {
  position: relative;
  margin: max(-142px, 61.294118px - 10.588235vw) 8% 0;
}

.channels-section {
  padding-top: max(28px, min(76px, 76 * var(--pc-unit)));
  padding-bottom: max(28px, min(108px, 108 * var(--pc-unit)));
}

.channels-section:not(:has(.social-tile:not([hidden]))) {
  display: none;
}

.channel-title > img {
  width: max(180px, 19.6875%);
}

.social-grid {
  --social-gap: max(calc(31.2px), calc(39 * var(--pc-unit)));
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  gap: max(16px, var(--social-gap));
  margin: max(20px, min(65px, 65 * var(--pc-unit))) 3.28125% 0;
}

.social-tile {
  container: card/inline-size;
  min-width: 0;
  max-width: 100%;
  flex: 0 1 max(21.770833vw, 7.333333vw + 277.2px);
  display: grid;
  grid-template-columns: max(79.2px, 86 * var(--pc-unit)) minmax(0, 1fr);
  grid-template-rows: auto auto 1fr;
  column-gap: max(8px, min(12px, 12 * var(--pc-unit)));
  padding: max(8px, min(14px, 14 * var(--pc-unit))) max(25px, min(44px, 44 * var(--pc-unit))) max(12px, min(22px, 22 * var(--pc-unit)));
  border: 1px solid #6d2e63;
  border-radius: max(10px, min(22px, 22 * var(--pc-unit)));
  background: radial-gradient(ellipse at 3% 0, rgba(86, 36, 79, 0.5333333333), transparent 60%), radial-gradient(ellipse at 100% 100%, rgba(100, 48, 84, 0.7019607843), transparent 68%), linear-gradient(120deg, #291629, #140c14 65%, #361a34);
  box-shadow: inset 0 1px 2px rgba(193, 89, 167, 0.4196078431);
}

.social-art {
  grid-area: 1/1/3;
  border-radius: 50%;
  mask-image: radial-gradient(ellipse, #000 61%, transparent 73%);
}

.social-art > img {
  position: absolute;
  width: 486.0465116279%;
  max-width: none;
  height: auto;
  left: -51.1627906977%;
  top: -16.2790697674%;
}

.social-copy {
  display: contents;
}

.social-title {
  grid-area: 1/2;
  display: grid;
  align-content: center;
  min-width: 0;
  min-height: max(49.2px, 70 * var(--pc-unit));
  font-size: max(24px, 24 * var(--unit));
  line-height: 1.5;
  font-weight: 400;
  overflow-wrap: anywhere;
}

.social-description {
  grid-area: 2/1/3/-1;
  min-width: 0;
  font-size: max(20px, 20 * var(--unit));
  line-height: 1.5;
  text-align: center;
  color: rgba(255, 255, 255, 0.9019607843);
  overflow-wrap: anywhere;
}

.social-action {
  grid-area: 3/1/4/-1;
  align-self: end;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: max(6px, min(12px, 12 * var(--pc-unit)));
  min-height: max(44px, 62 * var(--pc-unit));
  margin: max(12px, min(19px, 19 * var(--pc-unit))) 0 0;
  padding: 6px 10px;
  border: 1px solid #f797e0;
  border-radius: 999px;
  background: radial-gradient(ellipse at 50% 5%, rgba(73, 34, 58, 0.7019607843), transparent 68%), linear-gradient(#602747, #7d3563 58%, #f675db);
  box-shadow: inset 0 2px 5px #ed70d4, inset 0 -5px 7px #ff94eb;
  font-size: max(26.4px, 32 * var(--unit));
  font-weight: 400;
  line-height: 1.4;
  text-align: center;
  overflow-wrap: anywhere;
}

.social-action > img {
  width: max(17px, 24 * var(--pc-unit));
  flex: 0 0 auto;
}

.site-footer {
  display: grid;
  min-height: 170px;
  padding-bottom: env(safe-area-inset-bottom);
}

.footer-background, .footer-copy {
  grid-area: 1/1;
}

.footer-background {
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

.footer-copy {
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: max(20px, min(45px, 45 * var(--pc-unit))) max(12px, 3vw);
  text-align: center;
  font-size: max(12px, 18 * var(--unit));
  line-height: 1.6;
  opacity: 0.8;
}

.footer-line {
  max-width: 100%;
  min-width: 0;
}

.footer-notice {
  margin-bottom: 6px;
}

.footer-legal {
  margin-top: 8px;
}

.footer-legal, .footer-copyright {
  font-size: max(12px, 16 * var(--unit));
}

.footer-telegram, .footer-email {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 1.75em;
}

[data-footer-contact] {
  display: inline-flex;
  flex-wrap: wrap;
  min-width: 0;
  max-width: 100%;
  justify-content: center;
  align-items: baseline;
  gap: 0.3em;
}

[data-footer-contact] > span:first-child {
  max-width: 100%;
  overflow-wrap: anywhere;
}

[data-footer-value] {
  min-width: 0;
  overflow-wrap: anywhere;
}

[data-footer-contact]:hover {
  text-decoration: underline;
}

.page-loader {
  grid-area: page;
  display: grid;
  place-content: center;
  justify-items: center;
  min-height: 100%;
  min-height: 100dvh;
  padding: 24px 12px;
  background: #100513;
  color: #ffe5fb;
}

.page-loader > img {
  width: min(260px, 56vw);
  margin-bottom: 30px;
}

.page-loader p {
  margin-top: 18px;
  font-size: 14px;
  letter-spacing: 4px;
  text-align: center;
  overflow-wrap: anywhere;
}

.loader-ring {
  width: 34px;
  height: 34px;
  border: 3px solid rgba(255, 151, 235, 0.2);
  border-top-color: #f74cdb;
  border-radius: 50%;
  box-shadow: 0 0 20px rgba(247, 76, 219, 0.3490196078);
  animation: loader-spin 750ms linear infinite;
}

.is-ready .page-loader {
  display: none;
}

[data-aggregation-status] {
  grid-area: page;
  align-self: end;
  justify-self: center;
  margin: 24px 0;
  overflow-wrap: anywhere;
}

[data-aggregation-retry] {
  max-width: 100%;
  min-height: 44px;
  white-space: normal;
}

.is-loading[data-button-list-status=loading] [data-aggregation-status] {
  visibility: hidden;
  pointer-events: none;
}

@keyframes loader-spin {
  to {
    transform: rotate(1turn);
  }
}
.artboard-pc .service-tile {
  display: block;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}
.artboard-pc .service-art {
  position: static;
  width: 100%;
  aspect-ratio: 288/253;
  mask-image: none;
  overflow: visible;
}
.artboard-pc .service-art > img {
  position: static;
  width: 100%;
  height: auto;
}
.artboard-pc .service-copy, .artboard-pc .service-decoration {
  display: none;
}
.artboard-pc .assurances {
  min-height: calc(116 * var(--unit));
  padding: 0;
  border: 0;
  border-radius: 0;
  background: url("./assets/jj32/flow/pc-assurances.webp") top/100% auto no-repeat;
  box-shadow: none;
}
.artboard-pc .assurance-copy {
  visibility: hidden;
}
.artboard-pc .social-tile {
  display: block;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}
.artboard-pc .social-art {
  position: static;
  width: 100%;
  aspect-ratio: 418/219;
  border-radius: 0;
  mask-image: none;
  overflow: visible;
}
.artboard-pc .social-art > img {
  position: static;
  width: 100%;
  height: auto;
}
.artboard-pc .social-copy {
  display: none;
}

.artboard-mobile .site-header {
  flex-wrap: nowrap;
  gap: 0;
  height: calc(64 * var(--unit));
  min-height: 0;
  padding: 0 2% 0 3.2%;
}
.artboard-mobile .brand {
  flex: 0 0 auto;
  width: calc(163 * var(--unit));
}
.artboard-mobile .header-nav {
  flex: 0 1 calc(387 * var(--unit));
  flex-wrap: nowrap;
  gap: calc(8 * var(--unit));
  margin-left: auto;
}
.artboard-mobile .header-link, .artboard-mobile .header-link:nth-child(n+3) {
  min-width: 0;
  width: calc(97 * var(--unit));
}
.artboard-mobile .header-link:nth-child(3) {
  width: calc(85 * var(--unit));
}
.artboard-mobile .header-link:nth-child(4) {
  width: calc(84 * var(--unit));
}
.artboard-mobile .hero {
  min-height: calc(429 * var(--unit));
  padding: calc(25 * var(--unit)) 0 calc(50 * var(--unit));
}
.artboard-mobile .hero-title {
  width: 46.8%;
  margin-left: 3.2%;
}
.artboard-mobile .hero-entry {
  width: 34.533333%;
  max-width: none;
  align-content: start;
  margin: calc(53 * var(--unit)) 0 0 4.933333%;
}
.artboard-mobile .visit-title > img {
  width: 36.133333%;
}
.artboard-mobile .access-grid {
  display: grid;
  grid-template-columns: minmax(0, 232fr) minmax(0, 455fr);
  align-items: start;
  gap: calc(18 * var(--unit));
  margin: calc(26 * var(--unit)) 3.733333% 0 2.266667%;
}
.artboard-mobile .download-card {
  container-type: normal;
  display: block;
}
.artboard-mobile .download-title {
  width: 86.206897%;
}
.artboard-mobile .download-actions {
  display: grid;
  grid-template-columns: minmax(0, 90fr) minmax(0, 119fr);
  align-items: center;
  gap: calc(17 * var(--unit));
  margin: calc(24 * var(--unit)) 0 0 2.586207%;
}
.artboard-mobile .qr-panel {
  width: 100%;
}
.artboard-mobile .qr-surface {
  width: 95.56%;
  padding: 0;
  margin-top: 1.72%;
}
.artboard-mobile .download-entry {
  width: 100%;
  max-width: none;
  min-height: 44px;
  margin-bottom: calc(13 * var(--unit));
}
.artboard-mobile .download-actions:not(:has(.qr-panel:not([hidden]))), .artboard-mobile .download-actions:not(:has(.download-entry:not([hidden]))) {
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
}
.artboard-mobile .download-actions:not(:has(.qr-panel:not([hidden]))) .download-entry {
  width: 52.654867%;
}
.artboard-mobile .download-actions:not(:has(.download-entry:not([hidden]))) .qr-panel {
  width: 39.823009%;
}
.artboard-mobile .help-grid {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  min-width: 0;
  gap: calc(13 * var(--unit));
  margin-top: calc(48 * var(--unit));
}
.artboard-mobile .service-tile {
  --service-image: url("./assets/jj32/flow/mobile-service-install.webp");
  min-height: calc(125 * var(--unit));
  grid-template-rows: minmax(min-content, 1fr);
  row-gap: 0;
  padding: 0;
  border: 0;
  border-radius: calc(6 * var(--unit));
  background: var(--service-image) top/100% auto no-repeat #1b0d1c;
  box-shadow: none;
}
.artboard-mobile .service-tile[data-config-type=backup_entry] {
  --service-image: url("./assets/jj32/flow/mobile-service-backup.webp");
}
.artboard-mobile .service-tile[data-help-page=faq] {
  --service-image: url("./assets/jj32/flow/mobile-service-faq.webp");
}
.artboard-mobile .service-art, .artboard-mobile .service-decoration {
  display: none;
}
.artboard-mobile .service-copy {
  --service-unit: calc(100cqw / 143);
  grid-area: 1/1;
  grid-template-rows: auto minmax(min-content, 1fr) auto;
  gap: 0;
  padding: calc(45 * var(--service-unit)) calc(10 * var(--service-unit)) calc(4 * var(--service-unit));
}
.artboard-mobile .service-title {
  margin-bottom: calc(3 * var(--service-unit));
  font-size: calc(16 * var(--service-unit));
  line-height: 1.5;
  font-weight: 700;
}
.artboard-mobile .service-description {
  margin-bottom: calc(4 * var(--service-unit));
  font-size: calc(10 * var(--service-unit));
  line-height: 1.5;
}
.artboard-mobile .service-action {
  gap: calc(4 * var(--service-unit));
  margin: 0;
  font-size: calc(10 * var(--service-unit));
  line-height: 1.5;
}
.artboard-mobile .service-action > img {
  width: calc(11 * var(--service-unit));
}
.artboard-mobile .assurances {
  width: 96%;
  min-height: calc(47 * var(--unit));
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  margin: calc(30 * var(--unit)) auto 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: url("./assets/jj32/flow/mobile-assurances-render.webp") top/100% auto no-repeat;
  box-shadow: none;
}
.artboard-mobile .assurance-copy {
  display: block;
  padding: calc(6 * var(--unit)) 0 calc(6 * var(--unit)) 40%;
}
.artboard-mobile .assurance-copy:nth-child(2) {
  padding-left: 43.333333%;
}
.artboard-mobile .assurance-copy:nth-child(3) {
  padding-left: 35%;
}
.artboard-mobile .assurance-copy:nth-child(4) {
  padding-left: 35.555556%;
}
.artboard-mobile .assurance-icon, .artboard-mobile .assurance-copy::before {
  display: none;
}
.artboard-mobile .assurance-text {
  gap: calc(2 * var(--unit));
  font-size: calc(10 * var(--unit));
  line-height: 1.5;
}
.artboard-mobile .assurance-text strong {
  font-size: calc(12 * var(--unit));
  font-weight: 700;
}
.artboard-mobile .more-section {
  padding-top: calc(34 * var(--unit));
}
.artboard-mobile .more-title > img {
  width: 36.4%;
}
.artboard-mobile .related-artwork {
  width: 92.8%;
  margin: calc(26 * var(--unit)) 4.4% 0 2.8%;
}
.artboard-mobile .related-mount {
  margin: calc(-34 * var(--unit)) 4.266667% 0;
}
.artboard-mobile .channels-section {
  padding-top: calc(9 * var(--unit));
  padding-bottom: calc(44 * var(--unit));
}
.artboard-mobile .channel-title > img {
  width: calc(249 * var(--unit));
}
.artboard-mobile .social-grid {
  --social-gap: calc(26 * var(--unit));
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  gap: calc(30 * var(--unit)) var(--social-gap);
  margin: calc(28 * var(--unit)) calc(75 * var(--unit)) 0 calc(77 * var(--unit));
}
.artboard-mobile .social-grid > .social-tile {
  container: none;
  flex: 0 0 calc(286 * var(--unit));
  min-width: 0;
  max-width: 100%;
  min-height: calc(149 * var(--unit));
  display: grid;
  grid-template-columns: calc(99 * var(--unit)) minmax(0, 1fr);
  grid-template-rows: calc(13 * var(--unit)) minmax(calc(30 * var(--unit)), auto) calc(5 * var(--unit)) minmax(calc(24 * var(--unit)), auto) calc(19 * var(--unit)) minmax(calc(42 * var(--unit)), auto) calc(16 * var(--unit));
  gap: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: var(--channel-art) center/100% 100% no-repeat;
  font-family: "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
}
.artboard-mobile .social-tile[data-config-type=tg_channel] {
  --channel-art: url("./assets/jj32/flow/mobile-social-channel.webp");
}
.artboard-mobile .social-tile[data-config-type=tg_group] {
  --channel-art: url("./assets/jj32/flow/mobile-social-group.webp");
}
.artboard-mobile .social-tile[data-config-type=x_twitter] {
  --channel-art: url("./assets/jj32/flow/mobile-social-twitter.webp");
}
.artboard-mobile .social-tile[data-config-type=official_email] {
  --channel-art: url("./assets/jj32/flow/mobile-social-email.webp");
}
.artboard-mobile .social-art {
  display: none;
}
.artboard-mobile .social-copy {
  display: contents;
}
.artboard-mobile .social-title {
  grid-area: 2/2;
  display: block;
  align-self: start;
  min-height: 0;
  margin: 0;
  font-size: calc(20 * var(--unit));
  font-weight: 600;
  line-height: 1.5;
  text-align: left;
  overflow-wrap: anywhere;
}
.artboard-mobile .social-description {
  grid-area: 4/2;
  align-self: start;
  margin: 0;
  font-size: calc(16 * var(--unit));
  font-weight: 400;
  line-height: 1.5;
  text-align: left;
  color: rgba(255, 255, 255, 0.9019607843);
}
.artboard-mobile .social-action {
  grid-area: 6/1/7/-1;
  align-self: stretch;
  justify-self: start;
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  gap: calc(8 * var(--unit));
  width: calc(222 * var(--unit));
  min-height: 0;
  margin: 0 0 0 calc(30 * var(--unit));
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  font-size: calc(22 * var(--unit));
  font-weight: 400;
  line-height: 1.4;
  text-align: center;
}
.artboard-mobile .social-action > img {
  display: none;
}
.artboard-mobile .social-action::after {
  content: "";
  flex: 0 0 calc(17 * var(--unit));
  width: calc(17 * var(--unit));
  height: calc(14.5 * var(--unit));
  background: url("./assets/jj32/flow/mobile-social-arrow.webp") center/contain no-repeat;
  pointer-events: none;
}
.artboard-mobile .site-footer {
  min-height: calc(169 * var(--unit));
}
.artboard-mobile .footer-copy {
  gap: 0;
  justify-content: flex-start;
  padding: calc(15 * var(--unit)) 2% calc(8 * var(--unit));
  font-size: calc(18 * var(--unit));
  line-height: 1.4444444444;
}
.artboard-mobile .footer-notice {
  margin-bottom: calc(11 * var(--unit));
}
.artboard-mobile .footer-legal {
  margin-top: calc(13 * var(--unit));
}
.artboard-mobile .footer-legal, .artboard-mobile .footer-copyright {
  font-size: calc(16 * var(--unit));
  line-height: max(22 * var(--unit), 1.5em - 2 * var(--unit));
}

@media (max-width: 900px) {
  .artboard-pc {
    display: none;
  }
  .artboard-mobile {
    display: flex;
  }
}
@media (max-width: 319px) {
  .artboard-mobile .site-header {
    height: auto;
    display: grid;
    justify-items: center;
    gap: 6px;
    padding: 8px 4%;
  }
  .artboard-mobile .brand {
    width: min(120px, 100%);
  }
  .artboard-mobile .header-nav {
    width: 100%;
    margin: 0;
    flex-wrap: wrap;
    gap: 4px;
  }
  .artboard-mobile .header-link, .artboard-mobile .header-link:nth-child(n+3) {
    flex: 0 1 calc((100% - 4px) / 2);
    width: auto;
    min-height: 44px;
  }
  .artboard-mobile .hero {
    min-height: 0;
    padding: 16px 0 24px;
  }
  .artboard-mobile .hero-title {
    width: 82%;
    margin-inline: auto;
  }
  .artboard-mobile .hero-entry {
    width: 90%;
    max-width: 200px;
    margin: 20px auto 0;
  }
  .artboard-mobile .section-title > img {
    width: min(220px, 86%);
  }
  .artboard-mobile .access-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
    margin: 14px 4% 0;
  }
  .artboard-mobile .download-title {
    width: 100%;
    max-width: 220px;
    margin-inline: auto;
  }
  .artboard-mobile .download-actions {
    grid-template-columns: repeat(auto-fit, minmax(min(84px, 100%), 1fr));
    justify-items: center;
    gap: 10px;
    margin: 14px 0 0;
  }
  .artboard-mobile .qr-panel, .artboard-mobile .download-actions:not(:has(.download-entry:not([hidden]))) .qr-panel {
    width: 90px;
    max-width: 100%;
  }
  .artboard-mobile .download-entry, .artboard-mobile .download-actions:not(:has(.qr-panel:not([hidden]))) .download-entry {
    width: 100%;
    max-width: 180px;
    margin: 0;
  }
  .artboard-mobile .help-grid {
    grid-auto-flow: row;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    margin: 0;
  }
  .artboard-mobile .service-tile {
    border: 1px solid #8d386e;
    background: linear-gradient(125deg, #3b1739, #190c1d 70%, #491447);
  }
  .artboard-mobile .service-art {
    display: block;
    grid-area: 1/1;
    width: 32px;
    height: 32px;
    margin: 10px;
    mask: none;
    background: var(--service-image) -8px -8px/143px 125px no-repeat;
  }
  .artboard-mobile .service-art > img {
    display: none;
  }
  .artboard-mobile .service-copy {
    --service-unit: 1px;
    padding: 52px 10px 10px;
  }
  .artboard-mobile .service-decoration {
    --art-source-width: 143;
    --art-x: 75;
    --art-y: 73;
    --art-width: 68;
    --art-height: 52;
    display: block;
    width: 44%;
    aspect-ratio: 68/52;
    margin: 0;
    clip-path: none;
  }
  .artboard-mobile .service-title {
    font-size: clamp(14px, 16 * var(--service-unit), 18px);
  }
  .artboard-mobile .service-description, .artboard-mobile .service-action {
    font-size: 12px;
  }
  .artboard-mobile .service-action > img {
    width: 12px;
  }
  .artboard-mobile .assurances {
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
    gap: 12px;
    padding: 10px;
    margin-top: 16px;
    border: 1px solid #8d386e;
    border-radius: 4px;
    background: #1b0d1c;
  }
  .artboard-mobile .assurance-copy:nth-child(n) {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    gap: 8px;
    align-items: start;
    padding: 0;
  }
  .artboard-mobile .assurance-icon {
    display: block;
    width: 28px;
    height: 30px;
    mask: none;
    background: url("./assets/jj32/flow/mobile-assurances-render.webp") -32px -8px/720px 47px no-repeat;
  }
  .artboard-mobile .assurance-icon-1 {
    background-position-x: -221px;
  }
  .artboard-mobile .assurance-icon-2 {
    background-position-x: -389px;
  }
  .artboard-mobile .assurance-icon-3 {
    background-position-x: -567px;
  }
  .artboard-mobile .assurance-text, .artboard-mobile .assurance-text strong {
    font-size: 12px;
  }
  .artboard-mobile .more-section {
    padding-top: 20px;
  }
  .artboard-mobile .channels-section {
    padding: 20px 0;
  }
  .artboard-mobile .social-grid {
    margin: 12px 4% 0;
    gap: 12px;
  }
  .artboard-mobile .social-grid > .social-tile {
    flex: 1 1 100%;
    min-height: 0;
    grid-template-columns: 36px minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    gap: 8px;
    padding: 10px;
    border: 1px solid #6d2e63;
    border-radius: 10px;
    background: radial-gradient(ellipse at 3% 0, rgba(86, 36, 79, 0.5333333333), transparent 60%), linear-gradient(120deg, #291629, #140c14 65%, #361a34);
  }
  .artboard-mobile .social-art {
    display: block;
    grid-area: 1/1;
    width: 36px;
    height: 36px;
    mask: none;
    background: var(--channel-art) -13px -2.5px/143px 74.5px no-repeat;
  }
  .artboard-mobile .social-art > img {
    display: none;
  }
  .artboard-mobile .social-title {
    grid-area: 1/2;
    align-self: center;
    font-size: 14px;
  }
  .artboard-mobile .social-description {
    grid-area: 2/1/3/-1;
    font-size: 12px;
    text-align: center;
  }
  .artboard-mobile .social-action {
    grid-area: 3/1/4/-1;
    width: 100%;
    min-height: 44px;
    margin: 0;
    padding: 4px;
    border: 1px solid #f797e0;
    border-radius: 999px;
    background: linear-gradient(#602747, #7d3563 58%, #f675db);
    font-size: 14px;
  }
  .artboard-mobile .social-action::after {
    flex-basis: 14px;
    width: 14px;
    height: 12px;
  }
  .artboard-mobile .site-footer {
    min-height: 0;
  }
  .artboard-mobile .footer-copy {
    padding: 14px 4%;
    gap: 6px;
    font-size: 12px;
    line-height: 1.5;
  }
  .artboard-mobile .footer-notice, .artboard-mobile .footer-legal {
    margin: 0;
  }
  .artboard-mobile .footer-legal, .artboard-mobile .footer-copyright {
    font-size: 12px;
    line-height: 1.5;
  }
}
.channels-section {
  container: channels/inline-size;
}

.artboard .social-grid {
  --social-gap: max(calc(12px), calc(39 * 100cqw / 1920));
  display: grid;
  grid-auto-flow: row;
  grid-auto-columns: auto;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: var(--social-gap);
  margin-inline: 3.28125% 3.541667%;
}

@media (min-width: 320px) {
  .artboard-mobile .social-grid {
    grid-template-columns: repeat(auto-fit, minmax(calc((100% - var(--social-gap)) / 2), 1fr));
  }
  .artboard-mobile .social-grid > .social-tile {
    container: channel-card/inline-size;
    display: block;
    min-height: 0;
  }
  .artboard-mobile .social-copy {
    --unit: calc(100cqw / 286);
    display: grid;
    grid-template-columns: calc(99 * var(--unit)) minmax(0, 1fr);
    grid-template-rows: calc(13 * var(--unit)) minmax(calc(30 * var(--unit)), auto) calc(5 * var(--unit)) minmax(calc(24 * var(--unit)), auto) calc(19 * var(--unit)) minmax(calc(42 * var(--unit)), auto) calc(16 * var(--unit));
  }
}
@media (max-height: 520px) {
  .landing, .artboard {
    min-height: 100%;
  }
  .hero {
    flex-grow: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .design-link {
    transition: none;
  }
  .loader-ring {
    animation: none;
  }
}