/* Keep the original room, case frame and pool camera. Only GuYang gets this hero. */
.room .gy-case { --gy-gutter: 104px; position: relative; padding: 4px 0 40px var(--gy-gutter); }
.gy-case, .gy-case * { box-sizing: border-box; }
.gy-case .gy-hero-frame { margin: 0; }
/* The reference composition contains only the brand lockup and the two devices. */
.gy-hero { position: relative; width: 100%; aspect-ratio: 1672 / 941; overflow: hidden; container-type: inline-size; background: #e3cba9 url("assets/youze/optimized/products-v1/images/demos/projects/guyang/hero-courtyard-v1.webp") center / cover no-repeat; color: #35261d; isolation: isolate; }
.gy-hero-copy { position: absolute; z-index: 3; left: 16.9%; top: 37.1%; width: 30.8%; }
.gy-brand { display: block; width: 100%; margin: 0; padding: 0; border: 0; background: transparent; cursor: pointer; user-select: none; -webkit-user-select: none; }
.gy-brand canvas { display: block; width: 100%; height: auto; pointer-events: none; }
.gy-phone { position: absolute; aspect-ratio: 511 / 968; margin: 0; line-height: 0; z-index: 2; transform-origin: center; backface-visibility: hidden; animation: gy-hover 7s ease-in-out infinite alternate; animation-play-state: paused; filter: drop-shadow(3px 5px 1px #30261e85) drop-shadow(8px 16px 13px #211a1455); }
.gy-phone-home { width: 25.5%; top: 9%; left: 49.5%; transform: perspective(1400px) rotateY(-9deg) rotateZ(-7deg); animation-delay: -2s; }
.gy-phone-detail { width: 22%; top: 21%; left: 73.4%; transform: perspective(1400px) rotateY(-12deg) rotateZ(8deg); animation-delay: -5s; }
/* The supplied iPhone bezel owns the hardware, camera and Dynamic Island. */
.gy-phone .gy-phone-bezel { position: absolute; z-index: 2; inset: 0; display: block; width: 100%; height: 100%; max-width: none; pointer-events: none; }
.gy-phone-screen { position: absolute; left: 11.5459883%; top: 5.9917355%; width: 76.9080235%; height: 88.0165289%; overflow: hidden; border-radius: 10.69% / 4.93%; background: #fff; }
.gy-phone-status { position: absolute; inset: 0 0 auto; height: 6.34%; display: flex; align-items: center; justify-content: space-between; padding: 0 7.5%; color: #111; background: #fff; font: 600 .82cqw/1 system-ui, sans-serif; }
.gy-phone-status img { display: block; width: 22%; height: auto; }
.gy-phone-content { position: absolute; inset: 6.34% 0 0; background: #fff; }
.gy-phone-content > img { display: block; width: 100%; height: 100%; object-fit: fill; }
.gy-phone-home-indicator { position: absolute; bottom: 1.25%; left: 33%; width: 34%; height: .55%; border-radius: 999px; background: #111; }
.gy-detail-crop { position: relative; width: 100%; height: 100%; overflow: hidden; background: #fff; }
/* Source is untouched. Display only x=10,y=88,w=686,h=1350 of the 704x1498 simulator capture. */
.gy-detail-crop > img { position: absolute; width: 102.6239067%; height: 110.962963%; max-width: none; left: -1.45772595%; top: -6.51851852%; display: block; }
.gy-case[data-motion="running"] .gy-phone { animation-play-state: running; }
@keyframes gy-hover { from { translate: 0 0; } to { translate: 0 -9px; } }
.gy-motion-toggle { position: absolute; z-index: 5; right: 15px; bottom: 14px; display: grid; place-items: center; width: 34px; height: 34px; padding: 9px; border: 1px solid #fff8e84d; border-radius: 50%; background: #382b22a6; color: #fff; cursor: pointer; }
.gy-motion-toggle img { display: block; width: 16px; height: 16px; }
.gy-motion-toggle:hover { background: #382b22de; }
.gy-motion-toggle:focus-visible, .gy-nav button:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.gy-motion-toggle:disabled { opacity: .4; cursor: default; }
.gy-nav { position: absolute; left: 0; top: 165px; display: grid; gap: 18px; width: 90px; }
.gy-nav-line { position: absolute; width: 2px; top: 14px; bottom: 13px; left: 11px; background: color-mix(in srgb, var(--bg) 12%, transparent); }
.gy-nav button { position: relative; display: flex; align-items: center; gap: 7px; width: fit-content; min-height: 28px; padding: 0 0 0 31px; border: 0; background: none; color: var(--ink-muted); font: 400 12px/1.5 var(--sans); cursor: pointer; }
.gy-nav-marker { position: absolute; z-index: 1; left: 0; top: var(--gy-nav-marker-y, 2px); width: 24px; height: 24px; border-radius: 50%; transform: none !important; transition: top .2s ease; pointer-events: none; user-select: none; }
@media (prefers-reduced-motion: reduce) { .gy-nav-marker { transition: none; } }
.gy-nav button.is-current { color: var(--bg); font-weight: 600; }
.gy-brand:focus-visible { outline: 2px solid #a5352c; outline-offset: 8px; border-radius: 8px; }
.gy-qr-card { position: fixed; inset: auto; width: min(300px, calc(100vw - 24px)); margin: 0; padding: 16px 16px 18px; box-sizing: border-box; border: 1px solid #e4ded4; border-radius: 20px; background: #fffefa; color: #35261d; box-shadow: 0 16px 50px #3124192e, 0 2px 8px #3124190d; font-family: var(--sans); }
.gy-qr-card:popover-open { animation: gy-qr-reveal .18s ease-out; }
.gy-qr-card[hidden] { display: none; }
.gy-qr-close { position: absolute; right: 8px; top: 8px; display: grid; place-items: center; width: 26px; height: 26px; padding: 5px; border: 0; border-radius: 50%; background: #fffefa; cursor: pointer; }
.gy-qr-close:hover { background: #eee8df; }
.gy-qr-close:focus-visible { outline: 2px solid #a5352c; outline-offset: 3px; }
.gy-qr-close .gy-ui-icon { display: block; width: 16px; height: 16px; }
.gy-qr-code { display: block; width: 100%; height: auto; border-radius: 10px; background: #fff; }
@keyframes gy-qr-reveal { from { opacity: 0; translate: 0 5px; } to { opacity: 1; translate: 0 0; } }
@media (prefers-reduced-motion: reduce) { .gy-phone, .gy-qr-card:popover-open { animation: none; } }
.gy-case, .gy-role-dialog, .gy-image-dialog { --gy-card: #fcfcfa; --gy-text: #161b24; --gy-muted: #74777c; --gy-border: #e4e3df; --gy-blue: #0087ff; --gy-shadow: 0 12px 28px #24201c0c, 0 2px 6px #24201c03; }
:root[data-theme="night"] .gy-case, :root[data-theme="night"] .gy-role-dialog, :root[data-theme="night"] .gy-image-dialog { --gy-card: #22262c; --gy-text: #f1f2f3; --gy-muted: #adb2ba; --gy-border: #3a4048; --gy-blue: #65b5ff; --gy-shadow: 0 12px 28px #0003; }
.gy-study { container-type: inline-size; margin-top: 32px; color: var(--gy-text); }
.gy-surface { background: var(--gy-card); border: 1px solid color-mix(in srgb, var(--gy-border) 25%, transparent); border-radius: 24px; box-shadow: var(--gy-shadow); }
.gy-meta { display: grid; grid-template-columns: 1.2fr .84fr 1fr; padding: 28px 0 32px; margin-bottom: 20px; }
.gy-meta-field { min-width: 0; padding: 0 28px; }
.gy-meta-field + .gy-meta-field { border-left: 1px solid var(--gy-border); }
.gy-meta-label { display: flex; align-items: center; gap: 11px; min-height: 36px; margin-bottom: 17px; color: var(--gy-muted); font: 500 14px/1.4 var(--sans); }
.gy-icon-well { display: grid; place-items: center; flex: none; width: 32px; height: 34px; border-radius: 10px; background: color-mix(in srgb, var(--gy-text) 2.5%, var(--gy-card)); box-shadow: inset 1px 2px 5px color-mix(in srgb, var(--gy-text) 7%, transparent); }
.gy-ui-icon { display: block; width: 21px; height: 21px; }
.gy-role-trigger { display: inline-flex; align-items: center; gap: 4px; margin-left: 10px; padding: 5px 0 5px 5px; border: 0; background: transparent; color: var(--gy-muted); font: 400 clamp(12px, 1.4cqw, 14px)/1.4 var(--sans); white-space: nowrap; cursor: pointer; }
.gy-role-trigger .gy-ui-icon { width: 14px; height: 14px; filter: grayscale(1); opacity: .7; }
.gy-role-trigger:hover { color: var(--gy-blue); }
.room .gy-meta-value { margin: 0; color: var(--gy-text); font: 500 clamp(18px, 2.55cqw, 27px)/1.45 var(--sans); letter-spacing: -.025em; }
.room .gy-meta-note { margin: 9px 0 0; max-width: none; color: var(--gy-muted); font: 400 clamp(11px, 1.5cqw, 15px)/1.6 var(--sans); }
.gy-platform { display: flex; align-items: center; gap: 10px; }
.gy-platform-trigger { max-width: 100%; padding: 0; border: 0; border-radius: 5px; background: transparent; text-align: left; cursor: pointer; }
.room .gy-platform-trigger:hover, .room .gy-platform-trigger[aria-expanded="true"] { color: var(--gy-blue); }
.gy-platform-trigger:focus-visible { outline: 2px solid var(--gy-blue); outline-offset: 5px; }
.gy-wechat-mark { display: grid; place-items: center; flex: none; width: 29px; height: 29px; border-radius: 50%; background: #28ba53; }
.gy-wechat-mark img { display: block; width: 21px; height: 21px; }
.room .gy-status { display: flex; align-items: center; gap: 8px; padding-left: 5px; }
.gy-status > span { width: 7px; height: 7px; margin-right: 5px; border-radius: 50%; background: #12bd87; box-shadow: 0 0 0 4px #12bd8720; }
.gy-pain-layout { display: grid; grid-template-columns: minmax(164px, 18%) minmax(0, 1fr); gap: 16px; align-items: stretch; }
.gy-pain-card { padding: 28px 16px 30px 22px; }
.room .gy-pain-card h2 { margin: 0; color: var(--gy-muted); font: 500 14px/1.5 var(--sans); }
.gy-pain-list { display: grid; gap: clamp(12px, 2.3cqw, 26px); }
.gy-pain-option { position: relative; display: flex; align-items: center; gap: 13px; min-width: 0; min-height: 76px; padding: 9px 0; border: 0; background: transparent; color: var(--gy-text); text-align: left; font-family: var(--sans); cursor: pointer; }
.gy-pain-option::before { content: ""; position: absolute; top: 50%; left: -12px; width: 3px; height: 38px; border-radius: 2px; background: transparent; transform: translateY(-50%); }
.gy-pain-icon { display: block; flex: none; width: 26px; height: 26px; background: var(--gy-muted); mask: var(--gy-need-icon) center / contain no-repeat; }
.gy-pain-text { display: grid; gap: 5px; min-width: 0; }
.gy-pain-text strong { font: 500 clamp(14px, 1.7cqw, 18px)/1.5 var(--sans); }
.gy-pain-text small { color: var(--gy-muted); font: 400 clamp(12px, 1.45cqw, 15px)/1.5 var(--sans); }
.gy-pain-phrase { display: inline-block; white-space: nowrap; }
.gy-pain-option:hover, .gy-pain-option.is-selected { color: var(--gy-blue); }
.gy-pain-option:hover .gy-pain-icon, .gy-pain-option.is-selected .gy-pain-icon { background: var(--gy-blue); }
.gy-pain-option.is-selected strong { font-weight: 600; }
.gy-pain-option.is-selected small { color: var(--gy-blue); }
.gy-pain-option.is-selected::before { background: var(--gy-blue); }
.gy-detail-card { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; min-height: 0; padding: 26px; overflow: hidden; }
.gy-solution-copy { min-width: 0; padding: 0 5px; }
.room .gy-solution-label { margin: 0 0 11px; color: var(--gy-blue); font: 400 14px/1.5 var(--sans); }
.room .gy-solution-copy h3 { margin: 0 0 12px; color: var(--gy-text); font: 600 clamp(20px, 2.45cqw, 28px)/1.45 var(--sans); letter-spacing: -.025em; }
.room .gy-solution-description { margin: 0; max-width: none; color: var(--gy-muted); font: 400 clamp(14px, 1.7cqw, 18px)/1.8 var(--sans); }
.gy-demo { align-self: start; min-width: 0; width: 100%; max-width: none; justify-self: stretch; }
.gy-demo-empty { min-height: 120px; }
.gy-detail-card[data-gy-format="empty"] .gy-demo { display: none; }
.gy-demo-stage { position: relative; width: 100%; padding: 0; border-radius: 14px; background: #f5f4f1; }
:root[data-theme="night"] .gy-demo-stage { background: #1b1e23; }
.gy-demo-device { position: relative; display: block; width: 44%; max-width: 360px; aspect-ratio: 511 / 968; margin: -1.8% auto; padding: 0; border: 0; background: transparent; line-height: 0; cursor: pointer; user-select: none; -webkit-user-select: none; filter: drop-shadow(0 10px 12px #24201c18); }
.gy-demo-device .gy-phone-bezel { position: absolute; z-index: 2; inset: 0; display: block; width: 100%; height: 100%; max-width: none; pointer-events: none; }
.gy-demo-device .gy-phone-screen { display: block; }
.gy-demo-device .gy-phone-status { font-size: clamp(8px, 1.2cqw, 13px); }
.gy-demo-device .gy-phone-content { display: block; bottom: 1.9%; }
.gy-demo-video { display: block; width: 100%; height: 100%; margin: 0; border: 0; border-radius: 0; background: #fff; object-fit: contain; pointer-events: none; }
.gy-demo-device .gy-phone-home-indicator { z-index: 1; }
.gy-demo-device:focus-visible { outline: 2px solid var(--gy-blue); outline-offset: 0; border-radius: 14%; }
.gy-demo-callout { position: absolute; z-index: 3; width: 27%; color: var(--gy-text); font: 400 clamp(11px, 1.4cqw, 16px)/1.65 var(--sans); pointer-events: none; }
.gy-demo-callout[hidden] { display: none; }
.gy-demo-callout-left { left: 1%; text-align: right; }
.gy-demo-callout-right { right: 1%; text-align: left; }
.gy-callout-line { position: absolute; height: 1px; background: #aaa; transform-origin: 0 50%; }
.gy-callout-line::after { content: ""; position: absolute; right: -3px; top: -3px; width: 7px; height: 7px; border: 1px solid var(--gy-card); border-radius: 50%; background: #a7a8a6; }
.room .gy-recording-error { margin: 12px 0 0; color: var(--gy-muted); font: 400 12px/1.6 var(--sans); }
.gy-recording-error a { color: var(--gy-blue); }
.gy-role-trigger:focus-visible, .gy-pain-option:focus-visible, .gy-dialog-head button:focus-visible { outline: 2px solid var(--gy-blue); outline-offset: 4px; border-radius: 3px; }
.gy-role-dialog { position: fixed; inset: auto; width: min(420px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); margin: 0; padding: 25px 26px 27px; overflow: auto; overscroll-behavior: contain; box-sizing: border-box; border: 1px solid var(--gy-border); border-radius: 18px; background: var(--gy-card); color: var(--gy-text); box-shadow: 0 14px 55px #151c2630, 0 2px 8px #151c2610; font-family: var(--sans); }
.gy-role-dialog[hidden] { display: none; }
.gy-role-dialog:popover-open { animation: gy-qr-reveal .18s ease-out; }
@media (prefers-reduced-motion: reduce) { .gy-role-dialog:popover-open { animation: none; } }
.gy-dialog-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 0 0 24px; }
.gy-dialog-head h2 { margin: 0; font: 500 19px/1.4 var(--sans); }
.gy-dialog-head button { display: grid; place-items: center; flex: none; width: 30px; height: 30px; margin: -5px -7px -5px 0; border: 0; border-radius: 50%; background: transparent; cursor: pointer; }
.gy-dialog-head button:hover { background: color-mix(in srgb, var(--gy-muted) 8%, transparent); }
.gy-role-dialog dl { display: grid; gap: 19px; margin: 0; }
.gy-role-dialog dl > div { display: grid; grid-template-columns: 4em minmax(0, 1fr); gap: 16px; }
.gy-role-dialog dt { color: var(--gy-text); font: 500 14px/1.8 var(--sans); }
.gy-role-dialog dd { margin: 0; color: var(--gy-muted); font: 400 14px/1.8 var(--sans); }
.gy-pain-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 25px; }
.room .gy-pain-heading h2 { margin-bottom: 0; }
.gy-pain-toggle { display: flex; align-items: center; justify-content: center; flex: none; width: 30px; min-height: 32px; padding: 4px; border: 0; border-radius: 8px; background: transparent; color: var(--gy-muted); font: 400 12px/1.4 var(--sans); cursor: pointer; }
.gy-pain-toggle:hover { background: color-mix(in srgb, var(--gy-muted) 8%, transparent); }
.gy-pain-toggle .gy-ui-icon { width: 20px; height: 20px; transform: rotate(180deg); }
.gy-toggle-caption { display: none; }
.gy-pain-list[hidden] { display: none; }
.gy-pain-layout[data-pain-collapsed="true"] { grid-template-columns: 44px minmax(0, 1fr); }
.gy-pain-layout[data-pain-collapsed="true"] .gy-pain-card { align-self: start; padding: 5px; border-radius: 14px; }
.gy-pain-layout[data-pain-collapsed="true"] .gy-pain-heading { display: block; margin: 0; }
.gy-pain-layout[data-pain-collapsed="true"] .gy-pain-heading h2 { display: none; }
.gy-pain-layout[data-pain-collapsed="true"] .gy-pain-toggle { flex-direction: column; gap: 6px; width: 32px; min-height: 68px; }
.gy-pain-layout[data-pain-collapsed="true"] .gy-pain-toggle .gy-ui-icon { transform: none; }
.gy-pain-layout[data-pain-collapsed="true"] .gy-toggle-caption { display: inline; }
.gy-detail-card[data-gy-format="wide"] { grid-template-columns: minmax(0, 1fr); gap: 22px; min-height: 0; padding: 26px; }
.gy-detail-card[data-gy-format="wide"] .gy-solution-copy { padding: 0; }
.room .gy-detail-card[data-gy-format="wide"] .gy-solution-label { margin-bottom: 11px; }
.room .gy-detail-card[data-gy-format="wide"] h3 { margin-bottom: 12px; }
.room .gy-detail-card[data-gy-format="wide"] .gy-solution-description { max-width: 49em; font-size: clamp(14px, 1.65cqw, 16px); line-height: 1.8; }
.gy-detail-card[data-gy-format="wide"] .gy-demo { justify-self: stretch; max-width: none; }
.gy-image-preview { display: block; width: 100%; padding: 0; border: 0; background: transparent; color: var(--gy-muted); text-align: left; cursor: zoom-in; }
.gy-image-preview > img { display: block; width: 100%; height: auto; max-width: none; max-height: none; border: 1px solid var(--gy-border); border-radius: 10px; }
.gy-image-caption { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 13px; font: 400 12px/1.5 var(--sans); }
.gy-image-open-label { display: inline-flex; align-items: center; gap: 3px; flex: none; color: var(--gy-blue); }
.gy-image-open-label .gy-ui-icon { width: 16px; height: 16px; }
.gy-detail-card[data-gy-topic="performance"][data-gy-format="wide"] { gap: 0; padding: 0; align-content: start; }
.gy-detail-card[data-gy-topic="performance"] .gy-image-preview > img { border: 0; border-radius: 0; }
.gy-detail-card[data-gy-topic="performance"] .gy-image-caption { padding: 12px 20px 18px; }
.gy-pain-toggle:focus-visible, .gy-image-preview:focus-visible, .gy-image-toolbar button:focus-visible, .gy-image-scroll:focus-visible { outline: 2px solid var(--gy-blue); outline-offset: 4px; border-radius: 6px; }
.gy-image-dialog { width: calc(100vw - 32px); max-width: 1600px; height: calc(100dvh - 32px); max-height: 1100px; padding: 0; box-sizing: border-box; border: 1px solid var(--gy-border); border-radius: 16px; background: var(--gy-card); color: var(--gy-text); overflow: hidden; }
.gy-image-dialog[open] { display: flex; flex-direction: column; }
.gy-image-dialog::backdrop { background: #10151c9e; }
.gy-image-toolbar { display: flex; align-items: center; flex: none; gap: 16px; padding: 15px 20px; border-bottom: 1px solid var(--gy-border); }
.gy-image-toolbar h2 { min-width: 0; margin: 0 auto 0 0; font: 500 17px/1.5 var(--sans); }
.gy-image-toolbar button { flex: none; min-height: 34px; border: 1px solid var(--gy-border); border-radius: 7px; background: transparent; color: var(--gy-text); cursor: pointer; }
.gy-image-zoom { padding: 5px 11px; font: 400 13px/1.5 var(--sans); }
.gy-image-close { display: grid; place-items: center; width: 34px; padding: 5px; }
.gy-image-scroll { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; padding: 16px; }
.gy-image-scroll img { display: block; width: 100%; height: 100%; min-height: 0; object-fit: contain; }
.gy-image-dialog.is-zoomed .gy-image-scroll { display: block; }
.gy-image-dialog.is-zoomed .gy-image-scroll img { width: var(--gy-image-width, 1448px); height: auto; max-width: none; margin: 0 auto; }
@container (max-width: 700px) {
  .gy-meta { grid-template-columns: 1fr 1fr; padding: 22px 0 25px; }
  .gy-meta-field { padding: 0 22px; }
  .gy-role-field { grid-column: 1 / -1; margin-bottom: 24px; padding-bottom: 22px; border-bottom: 1px solid var(--gy-border); }
  .gy-role-field + .gy-meta-field { border-left: 0; }
  .gy-meta-label { margin-bottom: 11px; font-size: 13px; }
  .room .gy-meta-value { font-size: 21px; }
  .room .gy-meta-note { font-size: 13px; }
  .gy-role-trigger { font-size: 12px; }
  .gy-pain-layout { grid-template-columns: 156px minmax(0, 1fr); gap: 14px; }
  .gy-pain-card { padding: 24px 14px 25px 18px; }
  .gy-pain-heading { gap: 4px; }
  .gy-pain-option { font-size: 13px; }
  .gy-detail-card { padding: 22px; gap: 20px; }
  .gy-solution-copy { padding-top: 0; }
  .room .gy-solution-label { margin-bottom: 10px; }
  .room .gy-solution-copy h3 { font-size: 23px; margin-bottom: 15px; }
  .room .gy-solution-description { font-size: 15px; }
  .gy-demo { justify-self: stretch; max-width: none; }
  .gy-demo-empty { min-height: 100px; }
}
@container (max-width: 480px) {
  .gy-meta, .gy-pain-card, .gy-detail-card { border-radius: 18px; }
  .gy-meta-field { padding-left: 18px; padding-right: 18px; }
  .gy-meta-label { gap: 8px; font-size: 12px; }
  .gy-icon-well { width: 28px; height: 30px; border-radius: 8px; }
  .gy-ui-icon { width: 18px; height: 18px; }
  .room .gy-meta-value { font-size: 18px; }
  .room .gy-meta-note { font-size: 12px; }
  .gy-platform { gap: 7px; }
  .gy-wechat-mark { width: 23px; height: 23px; }
  .gy-wechat-mark img { width: 18px; height: 18px; }
  .gy-pain-layout { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .gy-pain-card { padding: 18px 20px 13px; }
  .room .gy-pain-card h2 { margin-bottom: 7px; font-size: 13px; }
  .gy-pain-list { grid-template-columns: 1fr 1fr; gap: 4px 14px; }
  .gy-pain-option { padding: 8px 0; min-height: 64px; gap: 10px; }
  .gy-pain-icon { width: 23px; height: 23px; }
  .gy-pain-text { gap: 2px; }
  .gy-pain-text strong { font-size: 15px; }
  .gy-pain-text small { font-size: 12px; }
  .gy-pain-option::before { left: -9px; height: 19px; }
  .gy-detail-card { padding: 22px 16px 16px; gap: 18px; }
  .gy-demo-stage { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto 40px; gap: 4px 12px; padding: 0 12px 14px; }
  .gy-demo-device { grid-column: 1 / -1; grid-row: 1; width: 85%; max-width: 270px; margin: -2% auto; }
  .gy-demo-device .gy-phone-status { font-size: 8px; }
  .gy-demo-callout { position: static; width: auto; font-size: 12px; text-align: center; grid-row: 2; }
  .gy-demo-callout-left { grid-column: 1; }
  .gy-demo-callout-right { grid-column: 2; }
  .gy-callout-line { display: none; }
  .room .gy-solution-copy h3 { font-size: 21px; }
  .gy-pain-heading { margin-bottom: 7px; }
  .gy-pain-layout[data-pain-collapsed="true"] { grid-template-columns: minmax(0, 1fr); }
  .gy-pain-layout[data-pain-collapsed="true"] .gy-pain-card { width: fit-content; padding: 3px 7px; border-radius: 10px; }
  .gy-pain-layout[data-pain-collapsed="true"] .gy-pain-toggle { flex-direction: row; gap: 5px; width: auto; min-height: 32px; }
  .gy-detail-card[data-gy-format="wide"] { padding: 20px 16px; gap: 18px; }
  .gy-image-caption { font-size: 11px; }
}
@media(max-width:540px) { .gy-image-dialog { width: calc(100vw - 16px); height: calc(100dvh - 16px); border-radius: 12px; } .gy-image-toolbar { padding: 12px; gap: 10px; } .gy-image-toolbar h2 { font-size: 14px; } .gy-image-zoom { padding: 5px 8px; font-size: 12px; } .gy-image-scroll { padding: 10px; } }
@container (max-width: 800px) { .room .gy-case { --gy-gutter: 76px; } .gy-nav { width: 66px; } .gy-nav button { font-size: 11px; } }
@media(max-width:859px) { .room .gy-case { --gy-gutter: 0px; } .gy-nav { display: none; } .gy-study { margin-top: 24px; } }
@container (max-width: 530px) {
  .gy-hero { aspect-ratio: 4 / 5; background-size: auto 135%; background-position: 20% bottom; }
  .gy-hero-copy { top: 21%; left: 12%; width: 68%; }
  .gy-phone-home { width: 39%; left: 9%; top: 42%; }
  .gy-phone-detail { width: 35%; left: 53%; top: 48%; }
  .gy-phone-status { font-size: 1.25cqw; }
  .gy-motion-toggle { right: 10px; bottom: 10px; width: 30px; height: 30px; padding: 8px; }
}

/* Numbered customer-need navigation, selected by the user. */
.gy-pain-number { display: grid; place-items: center; flex: none; width: 26px; height: 26px; color: var(--gy-muted); font: 400 16px/1 ui-monospace, SFMono-Regular, Menlo, monospace; font-variant-numeric: tabular-nums; }

/* The selected takeaways design: one quiet label and three horizontal rows. */
.gy-learnings { container-type: inline-size; margin-top: 28px; padding: 28px 34px 14px; color: var(--gy-text); }
.room .gy-learnings h2 { margin: 0; color: var(--gy-muted); font: 500 15px/1.5 var(--sans); }
.gy-learning-list { margin: 0; padding: 0; list-style: none; }
.gy-learning-row { display: grid; grid-template-columns: minmax(0, .32fr) minmax(0, .68fr); align-items: center; gap: 30px; padding: 26px 0; }
.gy-learning-row + .gy-learning-row { border-top: 1px solid var(--gy-border); }
.gy-learning-heading { display: flex; align-items: baseline; gap: 36px; min-width: 0; }
.gy-learning-number { flex: none; color: var(--gy-muted); font: 400 clamp(21px, 3cqw, 29px)/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; font-variant-numeric: tabular-nums; }
.room .gy-learning-heading h3 { margin: 0; color: var(--gy-text); font: 600 clamp(23px, 3.4cqw, 32px)/1.4 var(--sans); letter-spacing: -.025em; }
.gy-learning-points { display: grid; gap: 8px; min-width: 0; margin: 0; padding: 0 0 0 1.1em; color: color-mix(in srgb, var(--gy-text) 77%, var(--gy-card)); font: 400 clamp(15px, 2.05cqw, 20px)/1.8 var(--sans); list-style: disc; overflow-wrap: break-word; }
.gy-learning-points > li { padding-left: .18em; }
.gy-learning-points > li::marker { color: currentColor; font-size: .8em; }
@container (max-width: 700px) {
  .gy-learning-row { grid-template-columns: minmax(0, .31fr) minmax(0, .69fr); gap: 22px; padding: 27px 0; }
  .gy-learning-heading { gap: 16px; }
  .room .gy-learning-heading h3 { font-size: 23px; }
  .gy-learning-number { font-size: 21px; }
  .gy-learning-points { font-size: 16px; }
}
@container (max-width: 530px) {
  .gy-learning-row { grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 25px 0; }
  .gy-learning-heading { gap: 16px; }
  .room .gy-learning-heading h3 { font-size: 22px; }
  .gy-learning-points { font-size: 16px; line-height: 1.75; }
}
@media (max-width: 859px) {
  .gy-learnings { margin-top: 22px; padding: 24px 22px 6px; border-radius: 18px; }
  .room .gy-learnings h2 { font-size: 14px; }
}
.gy-pain-option:hover .gy-pain-number, .gy-pain-option.is-selected .gy-pain-number { color: var(--gy-blue); }

/* Usage: native copy and a dedicated stack illustration, after the process section. */
.gy-usage { container-type: inline-size; margin-top: 28px; padding: 32px; color: var(--gy-text); }
.gy-usage-grid { display: grid; grid-template-columns: minmax(0, .37fr) minmax(0, .63fr); align-items: center; gap: 22px; min-height: 420px; }
.gy-usage-copy { display: flex; flex-direction: column; justify-content: space-between; align-self: stretch; gap: 64px; min-width: 0; padding: 10px 0 28px; }
.room .gy-usage-eyebrow { margin: 0 0 14px; color: var(--gy-blue); font: 500 14px/1.5 var(--sans); }
.room .gy-usage h2 { margin: 0; color: var(--gy-text); font: 600 clamp(24px, 2.9cqw, 32px)/1.45 var(--sans); letter-spacing: -.035em; }
.room .gy-usage-value { display: flex; align-items: baseline; gap: 10px; margin: 0; color: var(--gy-text); }
.gy-usage-value strong { font: 700 clamp(80px, 11.4cqw, 124px)/.95 var(--sans); letter-spacing: -.065em; }
.gy-usage-value > span { font: 500 clamp(21px, 3cqw, 32px)/1.2 var(--sans); }
.room .gy-usage-metric-label { margin: 16px 0 0; color: var(--gy-text); font: 500 clamp(18px, 2.2cqw, 24px)/1.5 var(--sans); }
.gy-usage-art { min-width: 0; width: calc(100% + 64px); margin: 0 0 0 -64px; }
.gy-usage-art > img { display: block; width: 100%; height: auto; max-width: none; }
.room .gy-usage-note { max-width: none; margin: 22px 0 0; padding-top: 17px; border-top: 1px solid var(--gy-border); color: var(--gy-muted); font: 400 12px/1.7 var(--sans); }
@container (max-width: 700px) {
  .gy-usage { padding: 26px; }
  .gy-usage-grid { grid-template-columns: minmax(0, .4fr) minmax(0, .6fr); gap: 16px; min-height: 350px; }
  .gy-usage-copy { gap: 40px; padding-bottom: 20px; }
  .room .gy-usage h2 { font-size: 25px; }
  .gy-usage-value strong { font-size: 82px; }
}
@container (max-width: 530px) {
  .gy-usage-grid { grid-template-columns: minmax(0, 1fr); gap: 25px; min-height: 0; }
  .gy-usage-art { width: 100%; margin: 0; }
  .gy-usage-copy { gap: 30px; padding: 0; }
  .room .gy-usage h2 { font-size: 23px; }
  .room .gy-usage-eyebrow { margin-bottom: 9px; font-size: 13px; }
  .gy-usage-value strong { font-size: 76px; }
  .gy-usage-value > span { font-size: 23px; }
  .room .gy-usage-metric-label { margin-top: 12px; font-size: 19px; }
  .room .gy-usage-note { margin-top: 18px; padding-top: 14px; font-size: 11px; }
}
@media (max-width: 859px) {
  .gy-usage { margin-top: 22px; padding: 24px 20px 19px; border-radius: 18px; }
}