/* Local references: 123.webp (product), 456.webp (IP).
   Loaded only by tongyu.html. Desktop sections use the 1920px design ratio;
   at 1000px and below all copy returns to normal document flow. */
body.tongyu-page { background: #14151b; }
.ty-main { container-type: inline-size; --ty-surface: #14151b; --ty-ink: #fff; --ty-line: #ffffff26; background: var(--ty-surface); color: var(--ty-ink); }
.ty-main article { overflow: clip; }
.ty-main h1, .ty-main h2, .ty-main h3 { font-weight: 750; }
.ty-main .ty-copy > p { color: #fff; }
.ty-light, .ty-scene.ty-light { background: var(--ty-surface); }
.ty-blue { background: #2780ff; }
.ty-scene.ty-blue { background: radial-gradient(ellipse at center, #4fb7ff 0%, #3b9bff 48%, #2780ff 84%); }
/* Keep the negative watermark layer above the page background, but below
   the ::before blue card and every mockup, including display: contents children. */
.ty-hero-art { background: none; isolation: isolate; }
.ty-main .ty-hero-watermark { color: #1f252a; font-weight: 800; z-index: -1; }
/* Keep the blue plate fixed; only its monitor moves, without clipping the stand. */
.ty-main .ty-hero-inset { aspect-ratio: 1223 / 702; overflow: visible; border-radius: .8333cqw; }
.ty-main .ty-hero-inset > img { position: absolute; top: 24px; right: 0; width: 100%; max-width: none; height: auto; }
/* The phone figure participates directly in this module's stacking context:
   absolute-positioned on desktop, a grid item on mobile. The stats strip is 2. */
#introduction { isolation: isolate; }
#introduction .ty-role-layout > figure { z-index: 3; }
.ty-number { color: #ffffff26; z-index: 0; font-weight: 650; }
.ty-section-heading h2, .ty-section-heading .ty-label { position: relative; z-index: 1; }
.ty-blue .ty-number { color: #ffffff26; }
.ty-section-heading .ty-label { color: #2780ff4d; font-weight: 650; }
.ty-blue .ty-section-heading .ty-label { color: #ffffff40; }
.ty-main .ty-ip-watermark { display: none; }
.ty-main .ty-ip-design-label { position: absolute; color: #ffffffb3; letter-spacing: .04em; }
.ty-action::before { display: none; }
.ty-main .ty-action figcaption { font-weight: 600; }
/* Preserve the watch's visible height and center; the PNG has no outer alpha padding. */
.ty-main .ty-ring-icon > .ty-watch-icon { top: 0; left: 50%; width: auto; max-width: none; height: 100%; transform: translateX(-50%); }
#poses { padding-bottom: 64px; }
/* A normal image also loads from file://; external CSS masks do not.
   Whiten only this existing line-art image, preserving its original alpha. */
.ty-line-art { width: 86.4%; aspect-ratio: 2340 / 1164; margin-inline: auto; }
.ty-main .ty-sketch .ty-line-art > svg { display: block; width: 100%; height: 100%; overflow: visible; filter: brightness(0) invert(1); }
.ty-sketch { background: none; }
.ty-sketch .ty-line-art { position: relative; }
.ty-views { position: relative; }
.ty-sketch::before { content: ''; position: absolute; top: 0; left: 4.5%; width: 91%; height: calc(100% - 42px); background: repeating-linear-gradient(0deg, transparent 0 28px, #ffffff26 28px 29px); }
.ty-views figcaption { color: #828282; font-weight: 300; }
.ty-stamp { font-weight: 750 !important; }
.ty-stamp > span { display: inline-flex; align-items: center; padding: 2px 5px; gap: 6px; }
.ty-stamp i { display: inline-block; width: 14px; height: 16px; border-left: 1px solid currentColor; position: relative; }
.ty-stamp i::after { content: ''; position: absolute; inset: 0 1px 0 4px; background: currentColor; clip-path: polygon(40% 0, 100% 0, 65% 40%, 100% 40%, 10% 100%, 38% 53%, 0 53%); }
.ty-ip-hero-copy .ty-stamp { color: white; }
.ty-library, .ty-interactions { gap: 0; }
.ty-library figcaption, .ty-interactions figcaption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.ty-library figure, .ty-interactions figure { min-width: 0; }
.ty-interactions { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ty-interaction-column { min-width: 0; }
.ty-interaction-column img { width: 100%; }
.ty-payment-forms { z-index: 2; }
.ty-main .ty-atom-glyph { color: white; margin-inline: auto; }
.ty-atom { text-align: center; }
.ty-molecule-unit { position: relative; display: inline-block; width: 50%; height: 50%; }
.ty-main .ty-molecule-unit img { width: 100%; height: 100%; }
.ty-molecule-unit::after { content: ''; position: absolute; inset: 35%; border-radius: 50%; background: #2780ff; }
.ty-atom-glyph-1 .ty-molecule-unit:first-child { margin-inline: 25%; }
.ty-atom-glyph-0::after { content: ''; width: 33%; height: 33%; position: absolute; left: 33%; top: 33%; background: #2780ff; border-radius: 50%; }
.ty-atom-glyph-0::before { content: ''; width: 13%; height: 13%; position: absolute; right: 10%; top: 9%; background: #2780ff; border-radius: 50%; z-index: 1; }
.ty-template-frame { border: 2px solid white; border-radius: 8px; width: 88%; height: 88%; position: relative; }
.ty-template-frame::before { content: ''; position: absolute; left: 25%; top: 0; bottom: 0; border-left: 2px solid white; }
.ty-template-frame > i { position: absolute; left: 25%; right: 0; top: 0; height: 30%; border-bottom: 2px solid white; }
.ty-template-frame > i::after { content: ''; position: absolute; right: 3px; top: 2px; width: 5px; height: 5px; border: 1px solid white; border-radius: 50%; background: #2780ff; }
.ty-mini-molecules { position: absolute; left: 38%; right: 8%; top: 40%; bottom: 8%; display: flex; flex-wrap: wrap; }
.ty-mini-molecules i { border: 2px solid white; width: 50%; height: 50%; border-radius: 50%; background: radial-gradient(#2780ff 25%, transparent 30%); }
.ty-mini-molecules i:first-child { margin-inline: 25%; }
.ty-page-frame { position: absolute; width: 86%; height: 86%; top: 0; right: 0; border: 2px solid white; border-radius: 8px; }
.ty-page-frame::before { content: ''; position: absolute; inset: 12% 12% -16% -16%; border: 2px solid white; border-radius: 8px; }
.ty-page-frame > span { position: absolute; inset: 20%; display: grid; grid-template-columns: 1fr 1fr; }
.ty-page-frame i { border: 2px solid white; border-radius: 50%; background: radial-gradient(#2780ff 25%, transparent 30%); }
.ty-main .ty-principles p { position: absolute; color: white; white-space: nowrap; }
.ty-principles > div { position: absolute; width: 56%; height: 56%; padding: 0; background: rgba(39, 128, 255, 0.9); }
.ty-principles > div:first-child { width: 56%; left: 22%; top: 0; margin: 0; }
.ty-principles > div:nth-child(2) { left: 0; top: 40%; }
.ty-principles > div:nth-child(3) { right: 0; top: 40%; }
.ty-principles > div:first-child p { top: -27%; }
.ty-principles > div:not(:first-child) p { top: 113%; }
.ty-principles > div p::before { content: ''; position: absolute; left: 50%; top: -45px; width: 1px; height: 42px; background: #fff; }
.ty-principles > div:first-child p::before { top: 100%; }
.ty-principles > div p::after { content: ''; position: absolute; left: calc(50% - 2px); top: -45px; width: 5px; height: 5px; border-radius: 50%; background: white; }
.ty-principles > div:first-child p::after { top: calc(100% + 42px); }

@media (min-width: 1001px) {
  .ty-main p { font-size: 1.25cqw; line-height: 2; }
  .ty-main h1 { font-size: 3.75cqw; line-height: 1.35; }
  .ty-main h2 { font-size: 2.9167cqw; }
  .ty-main h3 { font-size: 2.0833cqw; }
  .ty-main h4 { font-size: 1.4583cqw; }
  .ty-main .ty-label { font-size: 1.0417cqw; letter-spacing: 0; }
  .ty-section, .ty-ip-section, .ty-scene { padding: 0; }
  .ty-section-heading { padding: 0; margin: 0; }
  .ty-number { font-size: 10.4167cqw; line-height: 1; }
  .ty-main .ty-copy > * + * { margin-top: 1.25cqw; }
  .ty-main .ty-copy > h4 { margin-top: 2.5cqw; }
  .ty-product-hero { height: 59.53125cqw; padding: 0; position: relative; }
  .ty-hero-intro { position: absolute; left: 6.25cqw; right: 6.25cqw; top: 8.0208cqw; margin: 0; display: block; z-index: 2; }
  .ty-main .ty-brand { width: 17.8646cqw; max-width: none; margin: 0; }
  .ty-hero-intro .ty-copy { position: absolute; left: 23.8021cqw; width: 63.6979cqw; top: 0; }
  .ty-main .ty-hero-intro .ty-copy p { margin: 0; color: #ffffffcc; line-height: 2.0833cqw; }
  .ty-hero-art { position: absolute; inset: 0; aspect-ratio: auto; margin: 0; }
  .ty-hero-art::before { content: ''; position: absolute; left: 57.9688cqw; top: 26.0938cqw; width: 17.9167cqw; height: 12.2917cqw; border-radius: .8333cqw; background: #0078ff; }
  .ty-main .ty-hero-watermark { left: 18.0208cqw; top: 28.3854cqw; font-size: 7.2917cqw; line-height: 1.5; }
  .ty-main .ty-hero-watermark-bottom { left: 0; top: 44.375cqw; }
  .ty-main .ty-desktop-mockup { left: 20.3443cqw; top: 19.375cqw; width: 41.6871cqw; height: 40.1563cqw; bottom: auto; }
  .ty-hero-side { display: contents; }
  .ty-main .ty-hand-mockup { position: absolute; left: 63.2292cqw; top: 22.7604cqw; width: 8.8542cqw; height: 15.625cqw; margin: 0; object-fit: contain; }
  .ty-main h1 { position: absolute; left: 63.9583cqw; top: 40.1042cqw; width: 33cqw; white-space: nowrap; }
  .ty-main .ty-hero-inset { left: 6.25cqw; bottom: auto; top: 38.4896cqw; width: 22.9688cqw; height: 13.5417cqw; object-fit: cover; object-position: right bottom; background: #2780ff; }
  /* Match the original cover-fit scale and right alignment, but allow overflow. */
  .ty-main .ty-hero-inset > img { width: auto; height: 100%; }
  #introduction { height: 70.4167cqw; position: relative; }
  .ty-intro-top { display: contents; }
  #introduction .ty-section-heading { position: absolute; top: 5.9896cqw; left: 6.25cqw; }
  #introduction .ty-number { left: 0; top: 6.7cqw; }
  .ty-dashboard { position: absolute; left: 42.3958cqw; top: 7.3438cqw; width: 46.9792cqw; height: 27.2917cqw; border: .4563cqw solid #050505; border-radius: .8cqw; }
  .ty-main .ty-dashboard-strip { position: absolute; left: 27.5521cqw; top: 16.875cqw; width: 72.9167cqw; max-width: none; margin: 0; z-index: 2; }
  .ty-role-layout { display: contents; }
  .ty-role-layout > figure { position: absolute; left: 6.25cqw; top: 23.4375cqw; width: 41.6667cqw; }
  .ty-role-layout .ty-copy { position: absolute; top: 37.1354cqw; left: 50.9375cqw; width: 42.8125cqw; }
  .ty-main .ty-role-layout .ty-copy p { font-size: 1.1458cqw; line-height: 2.5cqw; }
  .ty-main .ty-role-layout .ty-copy > p:first-of-type { font-size: 1.4583cqw; line-height: 2.9167cqw; font-weight: 600; }
  .ty-main .ty-role-layout .ty-copy > h4 { margin-top: 3.1cqw; }
  .ty-main .ty-role-layout .ty-copy > h4 + p { margin-top: .65cqw; }
  .ty-main .ty-role-layout .ty-copy > p + p { margin-top: 0; }
  .ty-main .ty-role-layout .ty-copy > h4 { position: absolute; top: 16.2cqw; margin: 0; }
  .ty-main .ty-role-layout .ty-copy > h4:nth-of-type(2) { top: 22.71cqw; }
  .ty-main .ty-role-layout .ty-copy > p:nth-of-type(2) { position: absolute; top: 19cqw; margin: 0; font-size: 1.05cqw; }
  .ty-main .ty-role-layout .ty-copy > p:nth-of-type(3) { position: absolute; top: 25.73cqw; margin: 0; font-size: 1.05cqw; }
  .ty-main .ty-role-layout .ty-copy > p:nth-of-type(4) { position: absolute; top: 28.23cqw; margin: 0; font-size: 1.05cqw; }
  #payment { position: relative; height: 79.4792cqw; }
  #payment > .ty-section { padding: 0; }
  #payment .ty-section-heading { position: absolute; left: 6.25cqw; top: 7.1354cqw; }
  #payment .ty-number { left: 17.6563cqw; top: -4cqw; color: #2780ff26; }
  .ty-payment-flow { position: absolute; top: 15.5cqw; left: 6.25cqw; width: 62.5cqw; max-width: none; margin: 0; gap: .8cqw; }
  .ty-payment-flow li { gap: .8cqw; }
  .ty-payment-flow li > span { font-size: 1.4583cqw; padding: .52cqw .25cqw; }
  .ty-main .ty-flow-arrow { width: 1.6667cqw; height: 1.6667cqw; flex-basis: 1.6667cqw; }
  #payment > .ty-section > .ty-copy { position: absolute; top: 22cqw; left: 6.25cqw; width: 57cqw; }
  #payment > .ty-section > .ty-copy p { font-size: 1.4583cqw; line-height: 2.9167cqw; font-weight: 600; }
  .ty-payment-art { position: absolute; left: 0; top: 36.6146cqw; width: 100%; height: 42.8646cqw; min-height: 0; padding: 0; margin: 0; display: block; }
  .ty-payment-forms { position: absolute; left: 6.25cqw; top: 3.9063cqw; width: 51.7188cqw; gap: 0; }
  .ty-main .ty-laptop { left: 40.3646cqw; top: -14.7917cqw; right: auto; bottom: auto; width: 68.8021cqw; max-width: none; }
  .ty-payment-number { position: absolute; left: 6.25cqw; bottom: .5cqw; font-size: 10.4167cqw; line-height: 1; color: #ffffff26; font-weight: 650; }
  .ty-app-store { position: relative; display: block; height: 43.2813cqw; padding: 0; margin: 0; }
  .ty-app-store > figure { position: absolute; left: 0; top: 0; width: 64.7656cqw; height: 100%; display: block; }
  .ty-app-store > figure img { width: 100%; }
  .ty-app-store > .ty-copy { position: absolute; left: 58.75cqw; top: 3.75cqw; width: 35cqw; padding: 0; }
  .ty-app-icon { width: 10.4167cqw; height: 10.4167cqw; padding: 1.6146cqw 2.3438cqw; border-radius: 2.19cqw; }
  .ty-app-store .ty-section-heading { margin-top: 2.65cqw; margin-bottom: 1.6cqw; }
  .ty-main .ty-app-store .ty-copy > h4 { font-size: 1.875cqw; margin-top: 1.6cqw; }
  .ty-main .ty-app-store .ty-copy > p { margin-top: .7cqw; }
  #staff-app { display: block; height: 47.9167cqw; position: relative; }
  #staff-app > .ty-copy { position: absolute; left: 6.25cqw; top: 12.5cqw; width: 39cqw; }
  #staff-app > figure { position: absolute; left: 46.5292cqw; top: 3.9651cqw; width: 47.2298cqw; }
  #staff-app .ty-copy h4 { font-size: 1.875cqw; margin-top: 2.7cqw; }
  #staff-app .ty-copy p { margin-top: .65cqw; }
  #design-system { height: 66.8229cqw; position: relative; }
  .ty-system-grid { position: absolute; left: 6.25cqw; top: 9.32cqw; right: 6.25cqw; display: grid; grid-template-columns: 31.6cqw 49.27cqw; gap: 6.63cqw; }
  #design-system h2 { font-size: 3.75cqw; }
  #design-system .ty-number { top: -3.5cqw; left: 15.3cqw; }
  .ty-system-grid > div > h3 { font-size: 1.6667cqw; margin-top: 2.4cqw; }
  .ty-system-grid .ty-copy > h3 { margin-top: 1.85cqw; }
  .ty-system-grid .ty-copy > p { font-size: 1.0417cqw; line-height: 2.0833cqw; }
  .ty-principles { width: 26.5cqw; height: 26.5cqw; margin: 8.75cqw 0 0 1.25cqw; padding: 0; }
  .ty-principles strong { font-size: 2.5cqw; font-weight: 750; }
  .ty-principles span { font-size: 1.0417cqw; font-weight: 650; }
  .ty-main .ty-principles p { font-size: 1.0417cqw; }
  .ty-atoms { gap: 1cqw; padding: 4.2cqw 0 3cqw; }
  .ty-main .ty-atom-glyph { width: 4.5833cqw; height: 4.5833cqw; margin-bottom: 2.1cqw; align-content: center; gap: 0; }
  .ty-main .ty-atom-glyph-0 img { width: 4.05cqw; height: 4.05cqw; }
  .ty-atom > span { font-size: 1.0417cqw; }
  .ty-main .ty-atom p { font-size: 1.0417cqw; line-height: 2.0833cqw; margin-top: 2.9cqw; }
  #components { position: relative; height: 58.9583cqw; overflow: hidden; }
  #components .ty-section-lead { position: absolute; top: 8.96cqw; left: 6.4583cqw; width: 87.29cqw; margin: 0; grid-template-columns: 24cqw 61.72cqw; gap: 2.65cqw; }
  #components h2, #interaction h2 { font-size: 3.75cqw; }
  #components .ty-number { left: 12.1cqw; top: -4cqw; }
  #components .ty-section-lead > p { font-size: 1.25cqw; line-height: 2.5cqw; }
  .ty-library { position: absolute; left: 5.2083cqw; top: 19.8438cqw; width: 89.5833cqw; height: 39.1145cqw; overflow: hidden; }
  #interaction { position: relative; height: 93.3333cqw; overflow: hidden; }
  #interaction .ty-section-lead { position: absolute; left: 6.25cqw; top: 6.25cqw; width: 87.5cqw; grid-template-columns: 24cqw 61.25cqw; gap: 2.7083cqw; margin: 0; }
  #interaction .ty-number { left: 12.1cqw; top: -3.6cqw; }
  #interaction .ty-section-lead p { font-size: 1.0417cqw; line-height: 2.0833cqw; }
  .ty-interactions { position: absolute; top: 16.7cqw; left: 5.2083cqw; width: 89.5833cqw; }
  .ty-ip-inner { width: 57.2917cqw; max-width: none; }
  #ip h3 { font-size: 3.3333cqw; line-height: 1.35; }
  .ty-main .ty-stamp { font-size: 1.875cqw; margin: 0; gap: 1cqw; line-height: 1.25; }
  .ty-stamp > span { font-size: 1.25cqw; padding: .1cqw .3cqw; }
  .ty-stamp i { width: 1.25cqw; height: 1.25cqw; }
  .ty-ip-hero { height: 30.2083cqw; }
  .ty-ip-hero > .ty-ip-inner { height: 100%; min-height: 0; padding: 0; }
  .ty-ip-hero-copy { position: static; width: auto; }
  .ty-main .ty-ip-brand { position: absolute; left: .52cqw; top: 3.1843cqw; font-size: 1.875cqw; gap: 1.25cqw; }
  .ty-main .ty-ip-brand img { width: 2.9688cqw; height: 3.75cqw; }
  .ty-main #ip-title { position: absolute; left: .2083cqw; top: 14.0177cqw; margin: 0; font-size: 3.5417cqw; line-height: 1.1; }
  .ty-ip-hero-copy .ty-stamp { position: absolute; left: .52cqw; top: 18.8cqw; }
  .ty-ip-hero-copy > p:not(.ty-ip-brand):not(.ty-stamp) { position: absolute; left: .52cqw; top: 22.0385cqw; font-size: 1.4583cqw; letter-spacing: .15cqw; }
  .ty-main .ty-ip-hero-copy > p.ty-label { top: 24.1218cqw; font-size: 1.0417cqw; letter-spacing: 0; }
  .ty-main .ty-ip-hero-character { width: 27.6383cqw; height: auto; top: 2.0313cqw; right: auto; left: 21.3cqw; }
  .ty-main .ty-planet { width: 2.5cqw; height: 2.4479cqw; right: .5cqw; bottom: 3.2813cqw; }
  .ty-main .ty-ip-design-label { right: .5cqw; bottom: .99cqw; font-size: 1.25cqw; }
  #naming { height: 27.0833cqw; padding-top: 4.7396cqw; }
  #naming h3 { margin-bottom: 2.4cqw; }
  #naming > p { font-size: 1.25cqw; line-height: 2.5cqw; }
  #views { position: relative; height: 72.3958cqw; }
  #views > .ty-ip-inner { padding-top: 5cqw; }
  #views h3 { margin: 0 0 4.4cqw; }
  .ty-views { padding: 0; }
  .ty-views figcaption { width: 45.3cqw; margin-top: 1.35cqw; font-size: 1.25cqw; letter-spacing: 0; }
  .ty-line-art { width: 45cqw; height: 22.4cqw; }
  .ty-sketch::before { height: 22.4cqw; left: 2.8125cqw; width: 52.0833cqw; background: repeating-linear-gradient(0deg, transparent 0 2.18cqw, #ffffff26 2.18cqw 2.23cqw); }
  #views > .ty-light { position: absolute; top: 45.42cqw; width: 100%; }
  .ty-main .ty-render img { width: 45.26cqw; height: 22.4cqw; object-fit: contain; }
  .ty-concept { height: 41.6667cqw; padding: 0; }
  .ty-concept > .ty-ip-inner { height: 100%; position: relative; }
  .ty-concept-heading { position: absolute; right: 0; top: 2.4cqw; width: auto; text-align: right; }
  .ty-concept-heading .ty-stamp { justify-content: end; margin-top: .8cqw; }
  .ty-concept-grid { display: contents; }
  .ty-concept-grid > .ty-copy:first-child { position: absolute; left: .26cqw; top: 6cqw; width: 15.625cqw; }
  .ty-main .ty-concept p:not(.ty-stamp) { font-size: 1.0417cqw; line-height: 1.6667cqw; }
  .ty-main .ty-note-icon { width: 4.1667cqw; height: 4.1667cqw; margin-bottom: 1.5cqw; }
  .ty-concept-grid > figure { position: absolute; left: 16.2cqw; top: 9.43cqw; width: 27cqw; }
  .ty-concept-note { position: relative; }
  .ty-concept-note:first-child::after { content: ''; position: absolute; top: 2.4cqw; left: 5.7cqw; width: 17cqw; height: 1.8cqw; background: url('assets/tongyu/ip/img12.svg') center / 100% 100% no-repeat; }
  .ty-concept-note + .ty-concept-note { margin-top: 1.4cqw; }
  .ty-ring-icon { width: 3.5cqw; height: 4.1667cqw; margin-bottom: 1cqw; }
  .ty-concept-note + .ty-concept-note::after { content: ''; position: absolute; top: 1.6cqw; left: 4cqw; width: 16.7cqw; height: 1.8cqw; background: url('assets/tongyu/ip/img12.svg') center / 100% 100% no-repeat; transform: scaleY(-1); }
  .ty-logo-note { position: absolute; right: 0; top: 20.8cqw; padding: 0; width: 16cqw; text-align: justify; }
  .ty-logo-note .ty-note-icon { margin-left: auto; }
  .ty-logo-note::before { content: ''; position: absolute; right: 6.5cqw; top: 1.6cqw; width: 15cqw; height: 1.8cqw; background: url('assets/tongyu/ip/img13.svg') center / 100% 100% no-repeat; transform: rotate(180deg); }
  #poses { height: auto; position: relative; padding: 17.7cqw 0 64px; }
  #poses > header { position: absolute; top: 3.4cqw; width: 100%; }
  #poses h3 { margin-bottom: .3cqw; }
  #poses > header::after { content: ''; position: absolute; top: 3cqw; left: 27.4cqw; right: 7cqw; height: 2px; background: #2780ff; }
  #poses > header .ty-note-icon { width: 4.5833cqw; height: 4.43cqw; margin: 0; }
  .ty-actions { position: relative; top: 0; left: 0; width: 100%; max-width: none; margin: 0; gap: 7.5cqw 7cqw; }
  .ty-action { padding: 0; }
  .ty-main .ty-action img { width: 100%; height: 27.3cqw; object-fit: contain; }
  .ty-action figcaption { font-size: 2.0833cqw; padding: .5cqw 2cqw; margin-top: 1.5cqw; }
  .ty-scene { height: 41.6667cqw; position: relative; }
  .ty-scene > .ty-ip-inner { height: 100%; position: relative; }
  .ty-scene-heading { gap: 0; }
  .ty-scene .ty-scene-heading { position: absolute; top: 1.51cqw; width: 100%; align-items: center; }
  .ty-main .ty-scene .ty-scene-art { position: absolute; top: 9.4cqw; left: 0; width: 100%; margin: 0; }
  .ty-main .ty-scene-art > img { height: 29.17cqw; object-fit: contain; }
  .ty-main #check-in .ty-scene-art { left: 14.7cqw; top: 9.8cqw; width: 32cqw; }
  .ty-main #check-in .ty-scene-caption { left: 0; top: 5.5cqw; width: 17.2cqw; text-align: left; }
  .ty-main #notification .ty-scene-art { top: 9.3cqw; }
  .ty-main #notification .ty-scene-art > img { height: 26.3cqw; }
  .ty-main .ty-scene-caption { position: absolute; left: 8cqw; bottom: 1.5cqw; max-width: none; width: 41.7cqw; font-size: .8333cqw; line-height: 1.4; }
  .ty-security-art { position: relative; height: 28cqw; display: block; }
  .ty-main .ty-security-art img { position: absolute; width: 26.5cqw; height: 23cqw; left: 6.9cqw; top: -.2cqw; object-fit: contain; }
  .ty-main .ty-security-art img + img { width: 20.6771cqw; height: 25cqw; left: 29.8cqw; top: 1cqw; margin: 0; }
  .ty-main #reception .ty-scene-art { top: 8.5cqw; left: 2.65cqw; width: 52.0833cqw; }
  .ty-main #reception .ty-scene-art > img { height: 28.073cqw; }
  #merchandise { height: 45cqw; }
  .ty-merchandise { position: absolute; inset: 0; max-width: none; aspect-ratio: auto; margin: 0; }
  .ty-main .ty-bag { left: 20.65cqw; top: 9.01cqw; width: 17.04cqw; }
  .ty-main .ty-pillow { left: 5.7cqw; top: 17.14cqw; width: 23.44cqw; bottom: auto; }
  .ty-main .ty-cards { left: 30.9cqw; top: 23.125cqw; width: 20.833cqw; right: auto; bottom: auto; }
}

@media (max-width: 1000px) {
  .ty-main h1 { font-size: clamp(24px, 4vw, 42px); white-space: normal; }
  .ty-main h2, .ty-main h3 { font-size: clamp(24px, 4.5vw, 38px); }
  .ty-main p { font-size: 15px; line-height: 1.9; }
  .ty-section, .ty-ip-section { padding: 52px 24px; }
  .ty-section-heading { padding-top: 12px; margin-bottom: 30px; }
  .ty-number { left: auto; right: 0; top: -16px; font-size: 90px; }
  .ty-hero-intro { display: grid; grid-template-columns: 1fr; gap: 26px; margin-inline: 24px; }
  .ty-main .ty-brand { width: 205px; margin-bottom: 0; }
  .ty-hero-art { height: 470px; aspect-ratio: auto; margin-top: 35px; }
  .ty-main .ty-desktop-mockup { left: 9%; bottom: 0; top: auto; width: 70%; height: 80%; }
  .ty-hero-side { display: block; left: 24px; top: 0; width: calc(100% - 48px); right: auto; }
  .ty-main h1 { max-width: 65%; }
  .ty-main .ty-hand-mockup { position: absolute; width: 74px; height: 132px; right: 0; top: 0; margin: 0; object-fit: contain; }
  .ty-main .ty-hero-inset { width: 32%; left: 4%; bottom: 17%; background: #2780ff; }
  .ty-main .ty-hero-watermark { left: 0; top: 24%; font-size: 5.8vw; }
  .ty-main .ty-hero-watermark-bottom { top: 66%; }
  .ty-intro-top, .ty-role-layout, #staff-app { display: grid; grid-template-columns: 1fr; gap: 30px; }
  .ty-dashboard { position: relative; width: 100%; margin-top: 0; }
  .ty-main .ty-dashboard-strip { width: 100%; margin: -17% 0 30px; }
  .ty-role-layout > figure { width: min(100%, 500px); margin-inline: auto; }
  .ty-role-layout .ty-copy p { font-size: 15px; }
  .ty-payment .ty-section { padding-bottom: 34px; }
  .ty-payment-art { min-height: 0; margin-top: 0; padding: 32px 24px 82px; display: flex; flex-direction: column; }
  .ty-payment-forms { width: 100%; }
  .ty-main .ty-laptop { position: relative; width: 100%; left: auto; top: auto; right: auto; bottom: auto; margin: 30px 0 0; }
  .ty-payment-number { position: absolute; bottom: 0; left: 24px; font-size: 86px; line-height: 1; color: #ffffff26; }
  .ty-app-store { grid-template-columns: 1fr; margin: 0; padding: 44px 24px 0; }
  .ty-app-store > .ty-copy { grid-row: 1; padding-top: 0; }
  .ty-app-store > figure img { width: 100%; }
  #staff-app > figure { width: min(100%, 620px); margin-inline: auto; }
  .ty-system-grid { grid-template-columns: 1fr; gap: 80px; }
  .ty-principles { width: min(82%, 350px); height: auto; aspect-ratio: 1; margin: 72px auto 42px; padding: 0; }
  .ty-principles strong { font-size: clamp(22px, 4vw, 34px); }
  .ty-principles span { font-size: 11px; }
  .ty-main .ty-principles p { font-size: 10px; margin: 0; }
  .ty-atoms { gap: 30px 16px; }
  .ty-main .ty-atom-glyph { width: 54px; height: 54px; align-content: center; margin-bottom: 24px; }
  .ty-atom h4 { font-size: 18px; }
  .ty-main .ty-atom p { font-size: 14px; }
  .ty-section-lead { grid-template-columns: 1fr; gap: 10px; margin-bottom: 30px; }
  .ty-library { grid-template-columns: 1fr 1fr; align-items: start; }
  .ty-library figure { max-height: 520px; overflow: hidden; }
  .ty-interactions { grid-template-columns: 1fr 1fr; align-items: start; gap: 18px; }
  .ty-interaction-column { display: flex; flex-direction: column; gap: 18px; }
  .ty-interactions figure { width: 100%; }
  .ty-ip-inner { width: calc(100% - 48px); }
  .ty-ip-section.ty-ip-inner { padding-inline: 0; }
  .ty-ip-hero > .ty-ip-inner { min-height: 480px; padding-block: 30px; }
  .ty-main #ip-title { margin-top: 52px; font-size: 42px; }
  .ty-main .ty-ip-hero-character { width: 57%; height: 95%; top: 18%; right: -6%; object-position: top; }
  .ty-ip-hero-copy { width: 100%; }
  .ty-ip-hero-copy > p:not(.ty-ip-brand):not(.ty-stamp) { width: 45%; font-size: 12px; }
  .ty-main .ty-planet { right: 0; top: 36px; width: 30px; height: 30px; }
  .ty-main .ty-ip-design-label { right: 0; top: 74px; font-size: 10px; }
  .ty-views figcaption { width: 100%; font-size: 12px; }
  .ty-main .ty-views img { width: 100%; }
  .ty-line-art { width: 100%; }
  .ty-render { padding-top: 0; padding-bottom: 50px; }
  .ty-concept { padding-block: 48px; }
  .ty-concept-heading { margin: 0 0 30px; width: 100%; }
  .ty-concept-grid { display: flex; flex-direction: column; gap: 28px; }
  .ty-concept-grid > figure { width: min(80%, 400px); margin-inline: auto; }
  .ty-main .ty-concept p:not(.ty-stamp) { font-size: 15px; }
  .ty-logo-note { padding-top: 0; }
  .ty-scene-heading { flex-wrap: wrap; align-items: center; gap: 12px; }
  #poses > .ty-scene-heading { flex-wrap: nowrap; }
  .ty-actions { gap: 36px 24px; }
  .ty-action { padding: 0; }
  .ty-main .ty-action img { height: clamp(180px, 34vw, 350px); }
  .ty-action figcaption { font-size: 15px; padding: 8px 22px; margin-top: 15px; }
  .ty-scene { padding-block: 32px; }
  .ty-scene .ty-scene-heading { flex-direction: column; align-items: start; }
  .ty-main .ty-stamp { font-size: 16px; }
  .ty-main .ty-scene-art > img { height: auto; min-height: 0; max-height: 450px; }
  .ty-main .ty-security-art img { height: auto; min-height: 0; }
  .ty-scene-art { margin-top: 26px; }
  .ty-main .ty-scene-caption { font-size: 11px; margin-top: 24px; }
  .ty-merchandise { margin-top: 30px; }
}
@media (max-width: 600px) {
  .ty-main .ty-copy > * + * { margin-top: 16px; }
  .ty-section, .ty-ip-section { padding-block: 42px; }
  .ty-hero-art { height: 360px; }
  .ty-main h1 { font-size: 23px; }
  .ty-main .ty-hand-mockup { width: 54px; height: 96px; }
  .ty-main .ty-desktop-mockup { width: 85%; height: 77%; left: 7%; }
  .ty-main .ty-hero-inset { bottom: 15%; }
  .ty-payment-flow { position: static; grid-template-columns: 1fr; width: 100%; gap: 8px; }
  .ty-payment-flow li { display: grid; grid-template-columns: 1fr; justify-items: center; gap: 8px; }
  .ty-payment-flow li > span { width: 100%; font-size: 16px; padding-block: 12px; }
  .ty-flow-arrow { transform: rotate(90deg); }
  .ty-atoms { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ty-atoms .ty-atom:last-child { grid-column: 1 / -1; }
  .ty-library, .ty-interactions { grid-template-columns: 1fr; gap: 24px; }
  .ty-library figure { max-height: none; }
  .ty-interaction-column { display: contents; }
  .ty-interactions figure:nth-child(4) { grid-column: auto; grid-row: auto; }
  .ty-ip-hero > .ty-ip-inner { min-height: 580px; }
  .ty-main .ty-ip-hero-character { width: 76%; height: 65%; top: auto; right: -6%; bottom: -8%; }
  .ty-ip-hero-copy > p:not(.ty-ip-brand):not(.ty-stamp) { width: 100%; }
  .ty-main #ip-title { margin-top: 36px; }
  .ty-ip-hero-copy .ty-stamp { margin-bottom: 14px; }
  .ty-main .ty-ip-brand { font-size: 17px; }
  .ty-actions { gap: 34px 18px; }
  .ty-main .ty-action img { height: clamp(155px, 44vw, 240px); }
  .ty-action figcaption { font-size: 13px; padding-inline: 14px; }
}