:root {
  color-scheme: dark;
  font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", Arial, sans-serif;
  background: #0f0d04;
  color: #fff;
  --page-gutter: 4vw;
  --section-gap: max(32px, 3.2vw);
}
* { box-sizing: border-box; }
html, body { width: 100%; min-width: 0; min-height: 100%; margin: 0; }
body { background: #0f0d04; }
a { color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; }
img, canvas { display: block; max-width: 100%; }
img { height: auto; }
button { font: inherit; }
[hidden] { display: none !important; }
.landing { width: 100%; min-height: 100vh; min-height: 100dvh; transition: opacity 200ms ease; }
.is-loading .landing { opacity: 0; }
.artboard { width: 100%; min-width: 0; }
.artboard-mobile { display: none; }
.artboard a { cursor: pointer; transition: filter 160ms ease; }
.artboard a:hover { filter: brightness(1.1); }
a:focus-visible, button:focus-visible { outline: 3px solid #ffb482; outline-offset: 4px; }
.topbar { display: flex; align-items: start; justify-content: space-between; flex-wrap: wrap; gap: 10px 3vw; padding: max(7px, .364583vw) max(4.166667vw, env(safe-area-inset-right)) max(9px, .46875vw) max(4.166667vw, env(safe-area-inset-left)); background: #231d11a6; border-bottom: 1px solid #d0bd6c40; }
.brand-logo { width: max(108px, 8.333333vw); flex-shrink: 0; margin-top: .15625vw; }
.desktop-nav, .mobile-nav { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: max(8px, 1.041667vw); min-width: 0; }
.desktop-nav { margin-inline-start: auto; }
.nav-pill { display: flex; align-items: center; justify-content: center; gap: max(6px, .520833vw); min-height: 44px; padding: max(10px, .833333vw); border: 1px solid #442626; border-radius: 100px; background: #24150e; font-size: max(.875rem, .833333vw); line-height: 1; }
.nav-pill img { width: 1.25em; height: 1.25em; object-fit: contain; }
/* Hero layers are decorative artwork. Only these image layers are positioned;
   titles, copy, navigation, benefits and the entry card participate in flow. */
.hero { position: relative; isolation: isolate; }
.hero-pc { display: grid; grid-template-columns: minmax(0, 55fr) minmax(0, 45fr); align-items: end; gap: 2vw; padding: 10.8vw 2.5vw 3vw; }
.hero-background { position: absolute; inset: 0; z-index: -2; pointer-events: none; }
.hero-pc .hero-background { background: url('./assets/jw027-91yc/pc-hero-bg.webp') center top / 100% auto no-repeat; }
.hero-pc .hero-background img { display: none; }
.hero-content { min-width: 0; position: relative; z-index: 1; }
.hero-title-art { width: 100%; height: auto; }
.hero-copy { display: grid; gap: .6em; width: 90%; margin: .5vw auto 0; text-align: center; line-height: 1.6; }
.hero-copy strong { color: #ed6f29; font-size: max(1rem, 1.65vw); }
.hero-copy span { color: #efdfd2; font-size: max(.875rem, 1.25vw); }
.hero-person-composite { position: absolute; inset: 0; z-index: -1; pointer-events: none; clip-path: inset(0); /* Figma masks the figure and rotated phone at the hero boundary. */ }
.woman-stage { position: absolute; left: 35.5%; top: -13%; width: 49.28%; }
.woman-stage img { width: 90.32%; height: auto; transform: rotate(-4.24deg); }
.phone-device { position: absolute; left: 70.36%; top: 10%; width: 23.14%; aspect-ratio: 1110 / 2300; transform: rotate(6deg); }
.phone-case { width: 100%; height: auto; }
.phone-screen { position: absolute; top: 3.9%; left: 5%; width: 90%; height: 92%; object-fit: cover; border-radius: 8%; /* Crop the screenshot inside its phone frame. */ }
.benefit-row { display: flex; flex-wrap: wrap; justify-content: center; gap: max(8px, .8vw); margin-top: 3.5vw; }
.benefit-row > span { display: flex; align-items: center; justify-content: center; gap: .5em; flex: 1 1 20%; min-width: min(130px, 100%); min-height: 44px; padding: .65em; border: 1px solid #a3561f; border-radius: 100px; color: #e99c70; background: #170d06d9; font-size: max(.75rem, .94vw); line-height: 1.35; text-align: center; }
.benefit-row img { width: 1.25em; height: 1.25em; flex-shrink: 0; object-fit: contain; }
.web-entry-card { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); align-items: center; gap: .2em .5em; padding: 5% 9% 10%; isolation: isolate; font-size: max(.75rem, 1.04vw); }
.hero-pc > .web-entry-card { width: 83%; justify-self: end; }
/* Border artwork sits behind one locally flowing card; it never positions content. */
.web-entry-frame { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; }
.recommend-badge { grid-column: 1 / -1; justify-self: start; padding: .25em .65em; transform: rotate(-8.64deg); border-radius: 1em 1em 1em 0; background: linear-gradient(90deg,#ff2c2c,#991a1a); font-weight: 600; font-size: .875em; }
.entry-prefix { grid-column: 1 / -1; color: #ffe396; font-weight: 800; }
.entry-title { grid-column: 1 / -1; font-size: max(1.5rem, 2.6vw); line-height: 1.15; font-style: italic; letter-spacing: -.04em; color: #f66b37; overflow-wrap: anywhere; }
.entry-description { display: block; padding-left: 1em; background: url('./assets/jw027-91yc/entry-lightning.webp') left center / .9em auto no-repeat; line-height: 1.5; }
.entry-description b { color: #ffe598; }
.entry-button { display: flex; align-items: center; justify-content: center; gap: .3em; min-height: 44px; padding: .6em .3em; background: url('./assets/jw027-91yc/pc-enter-bg.webp') center / 100% 100% no-repeat; font-size: max(.875rem, 1.45vw); font-weight: 800; }
.entry-button em { font-style: italic; }
.entry-button img { width: 1em; height: 1em; flex-shrink: 0; }
.content-section { width: 100%; padding: var(--section-gap) max(var(--page-gutter), env(safe-area-inset-right)) 0 max(var(--page-gutter), env(safe-area-inset-left)); }
.section-heading { display: grid; grid-template-columns: minmax(12px, 1fr) minmax(0, auto) minmax(12px, 1fr); justify-content: center; align-items: center; gap: max(8px, 1vw); width: fit-content; max-width: 100%; margin: 0 auto max(24px, 2.8vw); text-align: center; }
.section-number { grid-column: 2; grid-row: 1; align-self: start; color: #ff76501c; font-size: max(3rem, 4.167vw); font-weight: 800; line-height: 1; letter-spacing: .15em; }
.section-heading > div { grid-column: 2; grid-row: 1; padding-top: max(24px, 2.6vw); }
.section-heading::before, .section-heading::after { content: ''; width: max(12px, 1.4vw); height: max(30px, 3.125vw); background: center / contain no-repeat; align-self: end; }
.section-heading::before { grid-column: 1; grid-row: 1; background-image: url('./assets/jw027-91yc/lightning-left.webp'); }
.section-heading::after { grid-column: 3; grid-row: 1; background-image: url('./assets/jw027-91yc/lightning-right.webp'); }
.section-heading h2 { display: flex; align-items: center; justify-content: center; gap: max(6px, .83vw); margin: 0; color: #f26737; font-size: max(1.375rem, 2.083vw); line-height: 1.3; }
.section-heading h2::before, .section-heading h2::after { content: ''; flex: 0 0 max(24px, 3.08vw); height: max(16px, 2.083vw); background: center / contain no-repeat; /* Decorative checks must not consume more text space at 200% font size. */ }
.section-heading h2::before { background-image: url('./assets/jw027-91yc/heading-checkers-left.webp'); }
.section-heading h2::after { background-image: url('./assets/jw027-91yc/heading-checkers-right.webp'); }
.section-heading p { margin: .7em 0 0; color: #dac3aa; font-size: max(.75rem, 1.042vw); line-height: 1.5; }
.access-grid { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 3vw; }
.download-panel { flex: 1 1 28%; min-width: min(280px,100%); }
.download-title { margin-bottom: max(12px, 1vw); text-align: center; font-size: max(1.25rem, 2.3vw); font-weight: 800; line-height: 1.4; }
.download-title strong { color: #d94223; }
.download-options { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: max(12px, 1.4vw); }
.qr-block { display: grid; grid-template-columns: 15.89% 62.21% 21.9%; grid-template-rows: 16.54fr 61.3fr 9.16fr 13fr; width: max(144px, 13.33vw); aspect-ratio: 256 / 260; isolation: isolate; flex-shrink: 0; }
.qr-block > img { grid-area: 1 / 1 / -1 / -1; width: 100%; height: 100%; z-index: -1; }
.dynamic-qr { grid-area: 2 / 2; width: 100%; height: auto; aspect-ratio: 1; align-self: center; background: #fff; image-rendering: pixelated; }
.qr-block > span { grid-area: 4 / 1 / 5 / -1; justify-self: center; align-self: start; max-width: 90%; padding: .2em .5em; border-radius: 4px 14px 14px; background: linear-gradient(90deg,#ffaa8e,#ff562c); color: #080704; font-size: max(.75rem, .833vw); line-height: 1.25; text-align: center; font-weight: 600; }
.platform-buttons { display: grid; gap: max(12px, 1.6vw); min-width: min(140px,100%); flex: 1 1 130px; max-width: max(220px, 14vw); }
.platform-button { display: flex; align-items: center; justify-content: center; gap: .5em; min-height: max(44px, 3.65vw); padding: .6em .9em; border: 1px solid #fb6637; border-radius: 100px; background: linear-gradient(180deg,#171311,#853707); box-shadow: 0 6px 14px #f8575740; font-size: max(1rem, 1.25vw); line-height: 1.3; text-align: center; }
.platform-button img { width: 1.2em; height: 1.2em; object-fit: contain; }
/* :has responds to the controller's existing hidden flags, without changing validation. */
.platform-buttons:not(:has(.platform-button:not([hidden]))) { display: none; }
.download-panel:not(:has(.platform-button:not([hidden]), .qr-block:not([hidden]))) { display: none; }
.help-grid { display: flex; flex: 3 1 60%; flex-wrap: wrap; justify-content: center; align-items: stretch; gap: max(12px, 2.5vw); }
.help-card { position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: .5em; flex: 1 1 180px; min-width: 0; padding: max(28px, 3vw) max(20px, 2vw); }
.card-decoration { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; /* Independent card border decoration, never a fixed content box. */ }
.help-icon { width: max(24px, 2vw); height: auto; grid-column: 2; grid-row: 1; }
.help-copy { display: grid; gap: .7em; min-width: 0; grid-column: 1; grid-row: 1; }
.help-copy strong { color: #ff6e38; font-size: max(1rem, 1.25vw); line-height: 1.4; }
.help-copy small { color: #f2d8bd; font-size: max(.75rem, .94vw); line-height: 1.6; overflow-wrap: anywhere; }
.help-copy b { display: flex; align-items: center; gap: .35em; font-size: max(.75rem, .833vw); line-height: 1.5; }
.help-copy b img { width: 1em; height: 1em; }
.services-section { display: grid; padding-inline: 0; }
.services-section .section-heading { grid-area: 1 / 1; align-self: start; z-index: 1; }
.services-backdrop { grid-area: 1 / 1 / 3 / 2; width: 100%; height: auto; align-self: start; pointer-events: none; }
.related-flow { grid-area: 2 / 1; min-width: 0; margin-top: 20vw; padding: 0 var(--page-gutter); }
.channels-section:not(:has(.social-card:not([hidden]))) { display: none; }
.social-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: max(12px, 1.6vw); }
.social-card { position: relative; isolation: isolate; display: grid; flex: 0 1 calc(25% - 1.2vw); min-width: min(210px, 100%); min-height: max(90px, 8.02vw); padding: max(20px, 2vw) max(20px, 2.4vw); }
.social-copy { display: flex; align-items: center; justify-content: center; gap: max(10px, 1.2vw); min-width: 0; }
.social-copy > img { width: max(30px, 3.33vw); height: auto; flex-shrink: 0; }
.social-copy > span { display: grid; gap: .6em; min-width: 0; }
.social-copy strong { font-size: max(.875rem, 1.25vw); line-height: 1.4; overflow-wrap: anywhere; }
.social-copy small { font-size: max(.75rem, .833vw); line-height: 1.5; }
.page-footer { position: relative; isolation: isolate; margin-top: max(40px, 8vw); padding: max(24px, 2vw) max(6vw,env(safe-area-inset-right)) max(24px,env(safe-area-inset-bottom),2vw) max(6vw,env(safe-area-inset-left)); text-align: center; border-top: 1px solid #47331f; }
.page-footer > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; /* Footer glow only; text determines height. */ }
.page-footer > div { display: grid; gap: .9em; font-size: max(.75rem, .833vw); line-height: 1.7; color: #a99a89; }
.page-footer strong { color: #eee4d6; font-size: max(.75rem, .94vw); }
.page-footer span:last-child { margin-top: .6em; }
/* Existing loading overlay, scrollable even in short landscape windows. */
.page-loader { position: fixed; inset: 0; z-index: 100; display: grid; align-content: center; justify-items: center; gap: 18px; padding: max(20px,env(safe-area-inset-top)) 16px max(90px,env(safe-area-inset-bottom)); overflow: auto; background: #0f0d04f5; color: #ffc4b1; }
.page-loader p { margin: 0; text-align: center; font-size: .875rem; }
.loader-ring { width: 36px; height: 36px; border: 3px solid #fb663733; border-top-color: #fb6637; border-radius: 50%; animation: loader-spin 750ms linear infinite; }
.loader-help { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; max-width: 340px; font-size: .875rem; }
.loader-help > span { flex-basis: 100%; text-align: center; }
.loader-help a { display: grid; place-items: center; min-height: 44px; padding: 8px 18px; border: 1px solid #fb6637; border-radius: 8px; background: #24150e; }
.is-ready .page-loader { display: none; }
.is-loading[data-button-list-status="loading"] [data-aggregation-status] { visibility: hidden; }
@keyframes loader-spin { to { transform: rotate(1turn); } }
@media (max-width: 900px) {
  :root { --page-gutter: 4vw; --section-gap: max(28px, 4vw); }
  .artboard-pc { display: none; }
  .artboard-mobile { display: block; }
  /* Figma 750px: logo 25/13/240/90; shortcuts right 24, top 4.
     Fit the right-hand group to its content instead of centring it in free space. */
  .mobile-topbar { display: grid; grid-template-columns: minmax(56px, 1fr) fit-content(70%); align-items: center; gap: 4.8vw; padding: .533333vw max(3.2vw, env(safe-area-inset-right)) .533333vw max(3.333333vw, env(safe-area-inset-left)); }
  .mobile-topbar .brand-logo { width: 100%; max-width: 32vw; margin: 0; }
  .mobile-nav { justify-self: end; gap: 2.666667vw; }
  .mobile-nav > a { display: grid; justify-items: center; gap: 1.066667vw; min-width: 0; min-height: 44px; padding: 1.066667vw; font-size: max(.75rem, 3.2vw); line-height: 1; }
  .mobile-nav > a > span { white-space: nowrap; }
  .mobile-nav > a > img, .nav-round-icon { width: max(24px, 8vw); height: max(24px, 8vw); }
  .nav-round-icon { display: grid; place-items: center; background: linear-gradient(210.65deg,#fb6637 15.625%,#952121 87.209%); border-radius: 50%; }
  .nav-round-icon img { width: 50%; height: auto; }
  .hero-mobile { padding: 6vw 3vw 4vw; min-height: 66.4vw; }
  .hero-mobile .hero-content { width: 57%; }
  .hero-mobile .hero-background { width: 100%; height: auto; }
  .hero-mobile .hero-person { position: absolute; right: 0; top: 0; width: 47.867%; height: auto; z-index: -1; pointer-events: none; /* Original H5 figure, proportional and independent of growing text. */ }
  .hero-mobile .hero-copy { width: 100%; margin-top: 2vw; gap: .35em; }
  .hero-mobile .hero-copy strong { font-size: max(.875rem, 2.3vw); }
  .hero-mobile .hero-copy span { font-size: max(.75rem, 1.85vw); }
  .hero-mobile .hero-copy br { display: none; }
  .benefit-row { gap: 8px; margin-top: 3vw; }
  .benefit-row > span { flex: 1 1 42%; min-width: min(84px, 100%); font-size: max(.75rem, 1.65vw); padding: .45em; }
  .benefit-row img { width: 1em; height: 1em; }
  .artboard-mobile > .web-entry-card { width: 86%; margin: 2vw auto 0; padding: 5% 9% 9%; font-size: max(.75rem, 2.3vw); }
  .entry-title { font-size: max(1.5rem, 5.4vw); }
  .entry-button { font-size: max(.875rem, 3.4vw); background-image: url('./assets/jw027-91yc/h5-enter-bg.webp'); }
  .section-heading h2 { font-size: max(1.375rem, 3.6vw); }
  .section-heading h2::before, .section-heading h2::after { flex-basis: max(24px, 5.33vw); height: max(16px, 3.6vw); }
  .section-heading p { font-size: max(.75rem, 1.85vw); }
  .section-number { font-size: max(3rem, 7vw); }
  .section-heading > div { padding-top: max(24px, 4vw); }
  .access-grid { gap: max(20px, 3vw); }
  .download-panel { flex-basis: 100%; }
  .download-title { font-size: max(1.25rem, 3.7vw); }
  .download-options { gap: max(16px, 4vw); }
  .qr-block { width: clamp(144px, 30vw, 230px); }
  .qr-block > span { font-size: max(.75rem, 1.7vw); }
  .platform-buttons { flex: 0 1 36%; max-width: none; gap: max(12px, 3vw); }
  .platform-button { font-size: max(1rem, 2.6vw); min-height: max(44px, 6.4vw); }

  .related-flow { margin-top: 25vw; }
  .social-card { flex-basis: calc(50% - 1vw); min-width: min(155px,100%); padding: max(18px, 3vw) max(15px,2.5vw); }
  .social-copy { gap: 8px; }
  .social-copy > img { width: max(24px, 5vw); }
  .social-copy strong { font-size: max(.875rem, 2.2vw); }
  .social-copy small { font-size: max(.75rem, 1.7vw); }
}
@media (max-width: 320px) {
  .hero-mobile .hero-content { width: 61%; }
  .hero-mobile .hero-copy { text-align: left; }
  .benefit-row > span { flex-basis: 100%; }
  .entry-description, .entry-button { grid-column: 1 / -1; }
  .entry-button { margin-top: 8px; }
  .download-options { flex-direction: column; }
  .platform-buttons { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .landing, .artboard a { transition: none; } .loader-ring { animation-duration: 1.5s; } }
/* Asset exports contain a dark matte; screen blend matches the Figma composite. */
.hero-title-art, .web-entry-frame { mix-blend-mode: screen; }
.social-grid { --social-gap: max(12px,1.6vw); gap: var(--social-gap); }
.social-card { flex: 0 1 calc((100% - 3 * var(--social-gap)) / 4); }
@media (max-width:900px) {
 .social-grid { --social-gap: max(12px,2vw); }
 .social-card { flex-basis: calc((100% - var(--social-gap)) / 2); }
 .platform-buttons { min-width: min(164px,100%); }
 .platform-button { padding-inline: .5em; }
}

/* Tablet intro and entry use separate grid columns, so either can grow without
   covering the other. Only the decorative artwork spans the whole group. */
@media (min-width:700px) and (max-width:900px) {
 .mobile-hero-group { position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 45%); column-gap: 2vw; }
 .mobile-hero-group > .hero { position: static; isolation: auto; grid-area: 1 / 1; min-height: 50vw; padding-right: 0; }
 .mobile-hero-group .hero-content { width: 100%; }
 .mobile-hero-group > .web-entry-card { grid-area: 1 / 2; align-self: end; min-width: 0; margin: 0 3vw 3vw 0; padding: 2vw 3.5vw 4vw; font-size: max(.75rem,1.3vw); }
 .mobile-hero-group .entry-title { font-size: max(1.4rem,2.8vw); }
 .mobile-hero-group .entry-button { font-size: max(.875rem,1.7vw); }
 .mobile-hero-group .entry-description { grid-column: 1 / -1; }
 .mobile-hero-group .entry-button { grid-column: 1 / -1; }
}
@media (max-width:699px) {
 .mobile-hero-group > .web-entry-card { width: 86%; margin: 2vw auto 0; padding: 5% 9% 9%; font-size: max(.75rem,2.3vw); }
}
@media (min-width:901px) and (max-width:1100px) {
 .access-grid .download-panel { flex-basis: 100%; }
 .help-grid { flex-basis: 100%; }
 .section-heading h2 { font-size: max(1.375rem,3.2vw); }
 .social-card { flex-basis: calc((100% - var(--social-gap)) / 2); }
 .related-flow { margin-top: 25vw; }
}

@media (max-width:900px) {
 .services-backdrop { grid-area: 2 / 1; }
 .related-flow { grid-area: 2 / 1; margin-top: 43vw; }
}

.hero-content { z-index: auto; }
.hero-artwork { position: absolute; inset: 0; z-index: -1; clip-path: inset(0); pointer-events: none; /* Crop decorative H5 layers to their hero, never the flowing content. */ }
.social-copy small { overflow-wrap: anywhere; }
.section-heading > div { min-width: 0; }
.qr-block > span { width: 75%; min-height: 100%; }
.web-entry-card { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
@media (max-width:699px) { .mobile-hero-group > .web-entry-card { padding-inline: 7%; } }
/* Narrow PC keeps the same content sizing as the adjacent tablet; the choice of
   artwork and PC download action still changes strictly at 900 CSS pixels. */
@media (min-width:901px) and (max-width:1100px) {
 :root { --section-gap: max(28px,4vw); }
 .section-heading h2 { font-size: max(1.375rem,3.6vw); }
 .section-heading p { font-size: max(.75rem,1.85vw); }
 .section-number { font-size: max(3rem,7vw); }
 .section-heading > div { padding-top: max(24px,4vw); }
 .download-title { font-size: max(1.25rem,3.7vw); }
 .qr-block { width: clamp(144px,30vw,230px); }
 .qr-block > span { font-size: max(.75rem,1.7vw); }
 .platform-buttons { flex: 0 1 36%; max-width: none; }
 .platform-button { font-size: max(1rem,2.6vw); min-height: max(44px,6.4vw); }
 .help-card { padding: max(24px,4vw) max(24px,3vw); }
 .help-copy strong { font-size: max(1rem,2.3vw); }
 .help-copy small, .help-copy b { font-size: max(.75rem,1.85vw); }
 .help-icon { width: max(24px,4vw); }
 .services-backdrop { grid-area: 2 / 1; }
 .related-flow { margin-top: 43vw; }
 .social-copy strong { font-size: max(.875rem,2.2vw); }
 .social-copy small { font-size: max(.75rem,1.7vw); }
}
/* Cover the caption baked into the supplied frame with its accessible HTML text. */
.qr-block { grid-template-rows: 16.54% 61.3% 5.16% 17%; }
.qr-block > span { align-self: stretch; display: grid; place-items: center; min-height: 0; }
/* Nine-slice the original film frame: corners keep their proportions while a
   compact help row or enlarged copy can change the centre's height. */
.help-card {
  border: max(24px, 1.5vw) solid transparent;
  border-image: url('./assets/jw027-91yc/pc-help-card.webp') 45 30 fill / max(24px, 1.5vw) / 0 round;
  padding: max(8px,.8vw) max(8px,1vw);
}
.help-card > .card-decoration { display: none; }
@media (max-width:900px) { .help-card { border-image-source: url('./assets/jw027-91yc/h5-help-card.webp'); } }
/* The minimum button column grows with text size, so 200% text wraps the whole
   column below the QR instead of overflowing a narrow grid track. */
.platform-buttons { min-width: min(10.5rem,100%); grid-template-columns: minmax(0,1fr); }
.platform-button { min-width: 0; flex-wrap: wrap; }
.social-card { border: 1px solid #b86d24; border-radius: clamp(36px,8vw,90px); }
.social-card > .card-decoration { object-fit: cover; border-radius: inherit; }
.help-card { border-image-slice: 60 36 fill; border-image-repeat: stretch; }

/* H5 uses the design's three film cards in one row. A rem minimum lets extreme
   windows and enlarged text reflow without reducing the 12px explanation text. */
@media (max-width: 1100px) {
  .artboard .help-grid {
    --help-gap: max(4px, 1.066667vw);
    display: grid;
    container: help-row / inline-size;
    flex: 1 1 100%;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, max(5.5rem, calc((100% - 2 * var(--help-gap)) / 3))), 1fr));
    gap: var(--help-gap);
  }
  .artboard .help-card {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    gap: max(6px, .933333vw);
    min-height: max(140px, 33.6vw);
    border-width: max(10px, 3.733333vw) max(7px, 1.866667vw);
    border-image-slice: 28 26 fill;
    border-image-width: max(10px, 3.733333vw) max(7px, 1.866667vw);
    padding: max(5px, 2.4vw) max(2px, .4vw);
  }
  .artboard .help-icon { grid-area: 1 / 1; justify-self: end; width: max(16px, 5.333333vw); }
  .artboard .help-copy { grid-area: 2 / 1; gap: max(6px, 1.333333vw); align-content: start; }
  .artboard .help-copy strong { font-size: max(.75rem, 3.2vw); line-height: 1.4; overflow-wrap: anywhere; }
  .artboard .help-copy small, .artboard .help-copy b { font-size: max(.75rem, 2.666667vw); line-height: 1.4; }
}
/* Margins keep the middle-card offset in flow and reserve its full row height. */
@container help-row (min-width: 18rem) {
  .help-grid:has(.help-backup:not([hidden])) .help-guide,
  .help-grid:has(.help-backup:not([hidden])) .help-faq { margin-block-start: 8vw; }
  .help-grid:has(.help-backup:not([hidden])) .help-backup { margin-block-end: 8vw; }
}