.device{position:relative}.device--phone{width:min(280px,100%);margin:0 auto}.device--desktop-scale{--desktop-mockup-width: 640;--desktop-mockup-height: 380;container-type:inline-size;width:100%}.device--desktop-scale__slot{width:min(100%,640px);margin-inline:auto}.device--desktop{width:640px;max-width:640px;margin-inline:auto}@container (max-width: 639px){.device--desktop-scale__slot{width:100%;aspect-ratio:640 / 380;overflow:hidden;display:flex;justify-content:center}.device--desktop-scale__slot .device--desktop{flex-shrink:0;transform:scale(calc(100cqw / (var(--desktop-mockup-width) * 1px)));transform-origin:top center}}.device__frame{background:var(--color-navy);border-radius:36px;padding:12px;box-shadow:var(--shadow-lg)}.device__frame--desktop{border-radius:12px;padding:0;overflow:hidden}.device__notch{width:100px;height:24px;background:var(--color-navy);border-radius:0 0 16px 16px;margin:0 auto -8px;position:relative;z-index:2}.device__titlebar{display:flex;align-items:center;gap:6px;padding:10px 14px;background:#1e293b}.device__titlebar span:first-child,.device__titlebar span:nth-child(2),.device__titlebar span:nth-child(3){width:10px;height:10px;border-radius:50%;background:#475569}.device__url{margin-left:auto;font-size:.6875rem;color:#94a3b8!important;width:auto!important;height:auto!important;border-radius:4px!important;background:transparent!important;padding-right:8px}.app-screen{background:var(--color-surface);border-radius:28px;padding:1.25rem;min-height:420px}.app-screen--desktop{display:flex;border-radius:0;min-height:320px;padding:0}.app-screen__header{display:flex;align-items:center;gap:.5rem;font-family:var(--font-display);font-weight:600;font-size:.875rem;color:var(--color-navy);margin-bottom:1rem}.app-screen__logo-dot{width:8px;height:20px;background:var(--gradient-brand);border-radius:4px}.app-screen__greeting{font-size:.8125rem;color:var(--color-text-muted);margin:0 0 1rem}.app-screen__card{background:#fff;border:1px solid var(--color-border);border-radius:var(--radius-md);padding:1rem;margin-bottom:.75rem}.app-screen__card--approved{border-color:#00c16a59;background:linear-gradient(135deg,#00c16a14,#fff)}.app-screen__badge{display:inline-block;font-size:.6875rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:#047857;background:#00c16a26;padding:.2rem .5rem;border-radius:4px;margin-bottom:.5rem}.app-screen__amount{font-family:var(--font-display);font-size:1.75rem;font-weight:600;color:var(--color-navy);margin:0}.app-screen__sub{font-size:.75rem;color:var(--color-text-muted);margin:.25rem 0 .75rem}.app-screen__payment{font-size:.875rem;color:var(--color-text-muted);margin:0}.app-screen__payment strong{font-family:var(--font-display);font-size:1.125rem;color:var(--color-navy)}.app-screen__row{display:grid;grid-template-columns:1fr 1fr;gap:.5rem;margin-bottom:1rem}.app-screen__mini{background:#fff;border:1px solid var(--color-border);border-radius:var(--radius-sm);padding:.65rem;font-size:.6875rem;color:var(--color-text-muted)}.app-screen__mini strong{display:block;font-family:var(--font-display);font-size:.9375rem;color:var(--color-navy);margin-top:.15rem}.app-screen__btn{width:100%;padding:.75rem;background:var(--color-emerald);border:none;border-radius:999px;font-weight:600;font-size:.875rem;color:var(--color-navy);cursor:default}.app-screen__btn--sm{width:auto;margin-top:1rem}.app-screen__sidebar{width:140px;background:var(--color-navy);padding:1rem .75rem;flex-shrink:0}.app-screen__nav-item{font-size:.75rem;color:#94a3b8;padding:.5rem .65rem;border-radius:6px;margin-bottom:.25rem}.app-screen__nav-item--active{background:#00c16a26;color:var(--color-emerald)}.app-screen__main{flex:1;padding:1.25rem}.app-screen__main h3{font-size:1rem;margin-bottom:1rem}.app-screen__dashboard-grid{display:grid;grid-template-columns:1fr 1fr;gap:.75rem}.app-screen__dashboard-grid .app-screen__card--wide{grid-column:1 / -1}.app-screen__card span{display:block;font-size:.6875rem;color:var(--color-text-muted)}.app-screen__card strong{font-family:var(--font-display);font-size:1.125rem;color:var(--color-navy)}.app-screen__progress{height:6px;background:var(--color-border);border-radius:3px;margin-bottom:.5rem;overflow:hidden}.app-screen__progress-fill{height:100%;background:var(--gradient-brand);border-radius:3px}