/* App-screen mockups for the launch kit (see brand/ui.mjs). Everything inside a screen is sized in
   design pixels of a 390 px wide phone (var(--u)), so a phone scales cleanly to any width. */

.uh-phone {
  --phone-w: 300px;
  position: relative;
  width: var(--phone-w);
  aspect-ratio: 390 / 844;
  padding: calc(var(--phone-w) * 0.032);
  border-radius: calc(var(--phone-w) * 0.15);
  background: linear-gradient(145deg, #1d3346, #0b1c30 55%, #050f1b);
  box-shadow: 0 0 0 calc(var(--phone-w) * 0.006) #2c4558 inset, 0 30px 70px rgba(11, 28, 48, 0.28), 0 8px 20px rgba(11, 28, 48, 0.18);
  box-sizing: border-box;
  flex: none;
}
.uh-phone__island {
  position: absolute; z-index: 3; left: 50%; top: calc(var(--phone-w) * 0.058);
  width: calc(var(--phone-w) * 0.28); height: calc(var(--phone-w) * 0.075);
  transform: translateX(-50%); border-radius: 999px; background: #050b12;
}
.uh-screen {
  container-type: inline-size;
  position: relative; width: 100%; height: 100%;
  border-radius: calc(var(--phone-w) * 0.12);
  overflow: hidden; background: #F8F9FF;
  --u: calc(100cqw / 390);
}
.uh-app {
  position: absolute; inset: 0;
  font-family: var(--uh-font, 'Plus Jakarta Sans', system-ui, sans-serif);
  color: #0b1c30; font-size: calc(var(--u) * 15); line-height: 1.35;
  -webkit-font-smoothing: antialiased;
}
.uh-app * { box-sizing: border-box; }
.uh-app .i { width: calc(var(--u) * 20); height: calc(var(--u) * 20); flex: none; }
.uh-nw { white-space: nowrap; }

/* Status bar */
.uh-status { display: flex; justify-content: space-between; align-items: center; height: calc(var(--u) * 54); padding: 0 calc(var(--u) * 30) 0 calc(var(--u) * 36); font-weight: 700; font-size: calc(var(--u) * 16); }
.uh-status__icons { display: flex; gap: calc(var(--u) * 6); align-items: center; }
.uh-status__bar { width: calc(var(--u) * 26); height: calc(var(--u) * 12); border: calc(var(--u) * 2) solid #0b1c30; border-radius: calc(var(--u) * 4); position: relative; }
.uh-status__bar::after { content: ''; position: absolute; inset: calc(var(--u) * 1.5); right: calc(var(--u) * 5); background: #0b1c30; border-radius: calc(var(--u) * 1.5); }
.uh-status__sig { display: flex; gap: calc(var(--u) * 2); align-items: flex-end; height: calc(var(--u) * 12); }
.uh-status__sig i { width: calc(var(--u) * 3.5); background: #0b1c30; border-radius: calc(var(--u) * 1); }

/* Header */
.uh-head { display: flex; align-items: center; justify-content: space-between; padding: calc(var(--u) * 4) calc(var(--u) * 18) calc(var(--u) * 10); border-bottom: 1px solid #e3e9f2; }
.uh-head img { height: calc(var(--u) * 34); display: block; }
.uh-head .i { width: calc(var(--u) * 26); height: calc(var(--u) * 26); }
.uh-body { padding: calc(var(--u) * 14) calc(var(--u) * 16) 0; }

.uh-search { display: flex; gap: calc(var(--u) * 8); }
.uh-input { flex: 1; display: flex; align-items: center; gap: calc(var(--u) * 8); height: calc(var(--u) * 42); padding: 0 calc(var(--u) * 14); border: calc(var(--u) * 1.5) solid #cfd9e6; border-radius: 999px; background: #eef3fb; color: #6b7a8a; font-size: calc(var(--u) * 14.5); white-space: nowrap; overflow: hidden; }
.uh-input b { color: #0b1c30; font-weight: 600; }
.uh-iconbtn { width: calc(var(--u) * 42); height: calc(var(--u) * 42); border: calc(var(--u) * 1.5) solid #cfd9e6; border-radius: 999px; display: grid; place-items: center; background: #fff; }

.uh-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(var(--u) * 8); margin-top: calc(var(--u) * 12); }
.uh-tab { display: grid; justify-items: center; gap: calc(var(--u) * 4); padding: calc(var(--u) * 10) 0; border: calc(var(--u) * 2) solid #cfd9e6; border-radius: calc(var(--u) * 16); font-size: calc(var(--u) * 10.5); font-weight: 800; letter-spacing: .04em; text-transform: uppercase; background: #fff; }
.uh-tab .i { color: #4e5f7c; }
.uh-tab.is-on { background: #0E7C7B; border-color: #0E7C7B; color: #fff; }
.uh-tab.is-on .i { color: #fff; }

.uh-saved { display: flex; gap: calc(var(--u) * 6); margin-top: calc(var(--u) * 12); overflow: hidden; }
.uh-chip { display: inline-flex; align-items: center; gap: calc(var(--u) * 5); height: calc(var(--u) * 30); padding: 0 calc(var(--u) * 12); border-radius: 999px; border: calc(var(--u) * 1.5) solid #9fe3db; background: #e6faf7; color: #0a5f5e; font-size: calc(var(--u) * 12.5); font-weight: 700; white-space: nowrap; }
.uh-chip .i { width: calc(var(--u) * 14); height: calc(var(--u) * 14); }
.uh-chip.is-ghost { background: #fff; border-color: #cfd9e6; color: #4e5f7c; }

.uh-title { display: flex; align-items: flex-end; justify-content: space-between; margin: calc(var(--u) * 16) 0 calc(var(--u) * 10); }
.uh-title h4 { margin: 0; font-size: calc(var(--u) * 24); font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; }
.uh-title p { margin: calc(var(--u) * 2) 0 0; color: #0E7C7B; font-weight: 600; font-size: calc(var(--u) * 13.5); }
.uh-filterbtn { display: inline-flex; align-items: center; gap: calc(var(--u) * 6); height: calc(var(--u) * 34); padding: 0 calc(var(--u) * 14); border-radius: 999px; background: #0E7C7B; color: #fff; font-weight: 700; font-size: calc(var(--u) * 13); }
.uh-filterbtn .i { width: calc(var(--u) * 16); height: calc(var(--u) * 16); }

/* A listing card on its own, outside a phone (cardSolo): sized to its own width. */
.uh-solo { container-type: inline-size; font-family: var(--uh-font, 'Plus Jakarta Sans', system-ui, sans-serif); color: #0b1c30; line-height: 1.35; -webkit-font-smoothing: antialiased; }
.uh-solo * { box-sizing: border-box; }
.uh-solo .uh-card { --u: calc(100cqw / 175); }
.uh-solo .i { width: calc(var(--u) * 20); height: calc(var(--u) * 20); flex: none; }

/* Listing cards */
.uh-grid { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--u) * 12); }
.uh-card { border-radius: calc(var(--u) * 20); background: #fff; box-shadow: 0 calc(var(--u) * 4) calc(var(--u) * 14) rgba(11, 28, 48, .07); overflow: hidden; position: relative; }
.uh-card__img { position: relative; aspect-ratio: 4 / 5; display: grid; place-items: center; overflow: hidden; }
.uh-card__img svg { width: 78%; height: auto; }
.uh-photo-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.uh-size { position: absolute; top: calc(var(--u) * 8); left: calc(var(--u) * 8); padding: calc(var(--u) * 4) calc(var(--u) * 9); border-radius: 999px; background: #fff; font-size: calc(var(--u) * 10); font-weight: 800; letter-spacing: .03em; box-shadow: 0 1px 4px rgba(11,28,48,.08); }
.uh-heart { position: absolute; top: calc(var(--u) * 8); right: calc(var(--u) * 8); width: calc(var(--u) * 28); height: calc(var(--u) * 28); border-radius: 999px; background: #fff; display: grid; place-items: center; }
.uh-heart .i { width: calc(var(--u) * 15); height: calc(var(--u) * 15); }
.uh-heart.is-on { color: #FF7F66; }
.uh-heart.is-on .i { fill: #FF7F66; }
.uh-card__body { padding: calc(var(--u) * 10) calc(var(--u) * 12) calc(var(--u) * 12); }
.uh-card__school { color: #0E7C7B; font-size: calc(var(--u) * 10); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.uh-card__price { font-size: calc(var(--u) * 20); font-weight: 800; margin-top: calc(var(--u) * 4); letter-spacing: -0.01em; }
.uh-card__name { font-size: calc(var(--u) * 14); color: #3e4947; }
.uh-card__meta { display: flex; align-items: center; gap: calc(var(--u) * 4); margin-top: calc(var(--u) * 6); font-size: calc(var(--u) * 11.5); color: #4e5f7c; }
.uh-card__meta .i { width: calc(var(--u) * 13); height: calc(var(--u) * 13); }
.uh-cond { display: inline-block; margin-top: calc(var(--u) * 8); padding: calc(var(--u) * 3) calc(var(--u) * 8); border-radius: 999px; border: calc(var(--u) * 1.2) solid #a7e8cf; background: #effcf6; color: #12795a; font-size: calc(var(--u) * 9.5); font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.uh-cond.is-good { border-color: #bcd3ff; background: #f1f6ff; color: #2f56b0; }
.uh-cond.is-new { border-color: #9fe3db; background: #e6faf7; color: #0a5f5e; }
.uh-sold { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.uh-sold span { padding: calc(var(--u) * 6) calc(var(--u) * 16); border: calc(var(--u) * 4) solid #FF7F66; border-radius: calc(var(--u) * 10); color: #FF7F66; font-size: calc(var(--u) * 26); font-weight: 800; letter-spacing: .1em; transform: rotate(-14deg); background: rgba(255,255,255,.85); }

/* Listing detail */
.uh-detail__top { display: flex; justify-content: space-between; align-items: center; padding: calc(var(--u) * 4) calc(var(--u) * 16) calc(var(--u) * 10); }
.uh-detail__top span { font-size: calc(var(--u) * 12); font-weight: 800; letter-spacing: .12em; color: #3e4947; }
.uh-round { width: calc(var(--u) * 40); height: calc(var(--u) * 40); border-radius: 999px; background: #fff; display: grid; place-items: center; box-shadow: 0 2px 8px rgba(11,28,48,.08); }
.uh-hero { margin: 0 calc(var(--u) * 16); border-radius: calc(var(--u) * 24); aspect-ratio: 1 / 0.9; display: grid; place-items: center; }
.uh-hero svg { width: 74%; height: auto; }
.uh-detail__info { padding: calc(var(--u) * 14) calc(var(--u) * 18) 0; }
.uh-pill { display: inline-block; padding: calc(var(--u) * 4) calc(var(--u) * 10); border-radius: 999px; background: #e6faf7; color: #0a5f5e; font-size: calc(var(--u) * 11.5); font-weight: 800; letter-spacing: .06em; }
.uh-detail__row { display: flex; justify-content: space-between; align-items: flex-start; margin-top: calc(var(--u) * 8); }
.uh-detail__row h4 { margin: 0; font-size: calc(var(--u) * 27); font-weight: 800; letter-spacing: -0.02em; }
.uh-detail__row p { margin: 0; color: #0E7C7B; font-weight: 600; font-size: calc(var(--u) * 15); }
.uh-detail__price { text-align: right; font-size: calc(var(--u) * 27); font-weight: 800; color: #0E7C7B; }
.uh-detail__price small { display: block; font-size: calc(var(--u) * 10.5); letter-spacing: .1em; color: #4e5f7c; }
.uh-facts { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--u) * 8); margin-top: calc(var(--u) * 14); }
.uh-fact { display: flex; gap: calc(var(--u) * 8); align-items: center; padding: calc(var(--u) * 9) calc(var(--u) * 10); border: 1px solid #e3e9f2; border-radius: calc(var(--u) * 14); background: #fff; }
.uh-fact .ic { width: calc(var(--u) * 30); height: calc(var(--u) * 30); border-radius: 999px; background: #e6faf7; color: #0E7C7B; display: grid; place-items: center; }
.uh-fact .ic .i { width: calc(var(--u) * 15); height: calc(var(--u) * 15); }
.uh-fact small { display: block; font-size: calc(var(--u) * 9.5); font-weight: 800; letter-spacing: .1em; color: #4e5f7c; }
.uh-fact b { font-size: calc(var(--u) * 13); }
.uh-actions { position: absolute; left: 0; right: 0; bottom: 0; display: flex; gap: calc(var(--u) * 8); padding: calc(var(--u) * 12) calc(var(--u) * 16) calc(var(--u) * 26); background: #fff; border-top: 1px solid #e3e9f2; }
.uh-btn { flex: 1; display: inline-flex; justify-content: center; align-items: center; gap: calc(var(--u) * 8); height: calc(var(--u) * 50); border-radius: calc(var(--u) * 16); background: #0E7C7B; color: #fff; font-weight: 800; font-size: calc(var(--u) * 16); }
.uh-btn.is-light { background: #e6faf7; color: #0a5f5e; }

/* Filters sheet */
.uh-dim { position: absolute; inset: 0; background: rgba(11, 28, 48, .38); }
.uh-sheet { position: absolute; left: 0; right: 0; bottom: 0; background: #fff; border-radius: calc(var(--u) * 26) calc(var(--u) * 26) 0 0; padding: calc(var(--u) * 10) 0 calc(var(--u) * 24); }
.uh-sheet__grab { width: calc(var(--u) * 40); height: calc(var(--u) * 5); border-radius: 999px; background: #cfd9e6; margin: 0 auto calc(var(--u) * 10); }
.uh-sheet__head { display: flex; justify-content: space-between; align-items: center; padding: 0 calc(var(--u) * 20) calc(var(--u) * 12); border-bottom: 1px solid #e3e9f2; font-size: calc(var(--u) * 20); font-weight: 800; }
.uh-row { display: flex; justify-content: space-between; align-items: center; margin: 0 calc(var(--u) * 20); padding: calc(var(--u) * 13) 0; border-bottom: 1px solid #eef2f7; font-size: calc(var(--u) * 15.5); font-weight: 600; }
.uh-row span { display: inline-flex; align-items: center; gap: calc(var(--u) * 6); color: #4e5f7c; font-weight: 500; }
.uh-row span.is-set { color: #0E7C7B; font-weight: 800; }
.uh-row .i { width: calc(var(--u) * 16); height: calc(var(--u) * 16); }
.uh-sheet__foot { display: flex; justify-content: space-between; align-items: center; padding: calc(var(--u) * 14) calc(var(--u) * 20) 0; font-weight: 700; color: #3e4947; }
.uh-sheet__foot .uh-btn { flex: none; padding: 0 calc(var(--u) * 26); height: calc(var(--u) * 46); }

/* Chat */
.uh-chathead { display: flex; align-items: center; gap: calc(var(--u) * 10); padding: calc(var(--u) * 4) calc(var(--u) * 16) calc(var(--u) * 12); border-bottom: 1px solid #e3e9f2; }
.uh-avatar { width: calc(var(--u) * 38); height: calc(var(--u) * 38); border-radius: 999px; display: grid; place-items: center; font-weight: 800; color: #fff; background: #20B2AA; font-size: calc(var(--u) * 15); flex: none; }
.uh-chathead b { display: block; font-size: calc(var(--u) * 15.5); }
.uh-chathead small { color: #4e5f7c; font-size: calc(var(--u) * 12); }
.uh-itemstrip { display: flex; align-items: center; gap: calc(var(--u) * 10); margin: calc(var(--u) * 12) calc(var(--u) * 16) 0; padding: calc(var(--u) * 8); border-radius: calc(var(--u) * 14); background: #fff; border: 1px solid #e3e9f2; }
.uh-itemstrip .th { width: calc(var(--u) * 44); height: calc(var(--u) * 44); border-radius: calc(var(--u) * 10); display: grid; place-items: center; }
.uh-itemstrip .th svg { width: 86%; height: auto; }
.uh-itemstrip b { font-size: calc(var(--u) * 13.5); display: block; }
.uh-itemstrip small { color: #4e5f7c; font-size: calc(var(--u) * 12); }
.uh-msgs { display: flex; flex-direction: column; gap: calc(var(--u) * 8); padding: calc(var(--u) * 16); }
.uh-msg { max-width: 78%; padding: calc(var(--u) * 10) calc(var(--u) * 13); border-radius: calc(var(--u) * 18); font-size: calc(var(--u) * 14.5); line-height: 1.35; background: #fff; border: 1px solid #e3e9f2; align-self: flex-start; border-bottom-left-radius: calc(var(--u) * 6); }
.uh-msg.is-me { align-self: flex-end; background: #0E7C7B; color: #fff; border: 0; border-bottom-left-radius: calc(var(--u) * 18); border-bottom-right-radius: calc(var(--u) * 6); }
.uh-msg.is-note { align-self: center; max-width: 92%; background: #e6faf7; border-color: #9fe3db; color: #0a5f5e; font-weight: 700; font-size: calc(var(--u) * 12.5); text-align: center; border-radius: 999px; display: inline-flex; gap: calc(var(--u) * 6); align-items: center; }
.uh-msg.is-note .i { width: calc(var(--u) * 15); height: calc(var(--u) * 15); }
.uh-compose { position: absolute; left: 0; right: 0; bottom: 0; display: flex; gap: calc(var(--u) * 8); align-items: center; padding: calc(var(--u) * 10) calc(var(--u) * 14) calc(var(--u) * 26); background: #fff; border-top: 1px solid #e3e9f2; }
.uh-compose .uh-input { height: calc(var(--u) * 42); }
.uh-send { width: calc(var(--u) * 42); height: calc(var(--u) * 42); border-radius: 999px; background: #0E7C7B; color: #fff; display: grid; place-items: center; flex: none; }

/* Paid */
.uh-paid { position: absolute; inset: calc(var(--u) * 54) 0 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 0 calc(var(--u) * 30); background: radial-gradient(circle at 50% 35%, #e6faf7, #F8F9FF 70%); }
.uh-paid__tick { width: calc(var(--u) * 92); height: calc(var(--u) * 92); border-radius: 999px; background: #0E7C7B; color: #fff; display: grid; place-items: center; box-shadow: 0 0 0 calc(var(--u) * 12) rgba(14, 124, 123, .14); }
.uh-paid__tick .i { width: calc(var(--u) * 46); height: calc(var(--u) * 46); stroke-width: 3; }
.uh-paid h4 { margin: calc(var(--u) * 26) 0 calc(var(--u) * 6); font-size: calc(var(--u) * 25); font-weight: 800; letter-spacing: -0.02em; }
.uh-paid p { margin: 0; color: #3e4947; font-size: calc(var(--u) * 15); }
.uh-paid .uh-itemstrip { margin: calc(var(--u) * 22) 0 0; width: 100%; text-align: left; }
.uh-secure { display: inline-flex; align-items: center; gap: calc(var(--u) * 6); margin-top: calc(var(--u) * 16); color: #0a5f5e; font-weight: 700; font-size: calc(var(--u) * 13); }
.uh-secure .i { width: calc(var(--u) * 15); height: calc(var(--u) * 15); }

/* Sell */
.uh-photo { margin: calc(var(--u) * 6) calc(var(--u) * 16) 0; border-radius: calc(var(--u) * 22); aspect-ratio: 1 / 0.78; display: grid; place-items: center; position: relative; border: calc(var(--u) * 2) dashed #9fe3db; }
.uh-photo svg { width: 62%; height: auto; }
.uh-photo__badge { position: absolute; right: calc(var(--u) * 10); bottom: calc(var(--u) * 10); display: inline-flex; align-items: center; gap: calc(var(--u) * 5); padding: calc(var(--u) * 5) calc(var(--u) * 10); border-radius: 999px; background: #0b1c30; color: #fff; font-size: calc(var(--u) * 12); font-weight: 700; }
.uh-photo__badge .i { width: calc(var(--u) * 14); height: calc(var(--u) * 14); }
.uh-fields { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--u) * 8); padding: calc(var(--u) * 14) calc(var(--u) * 16) 0; }
.uh-field { padding: calc(var(--u) * 8) calc(var(--u) * 12); border: 1px solid #cfd9e6; border-radius: calc(var(--u) * 14); background: #fff; }
.uh-field small { display: block; font-size: calc(var(--u) * 10); font-weight: 800; letter-spacing: .1em; color: #4e5f7c; text-transform: uppercase; }
.uh-field b { font-size: calc(var(--u) * 15); }
.uh-field.is-wide { grid-column: 1 / -1; }
.uh-timer { display: inline-flex; align-items: center; gap: calc(var(--u) * 5); padding: calc(var(--u) * 4) calc(var(--u) * 10); border-radius: 999px; background: #FFC94D; color: #0b1c30; font-weight: 800; font-size: calc(var(--u) * 12); }
.uh-timer .i { width: calc(var(--u) * 14); height: calc(var(--u) * 14); }

/* Real-app details (22 Oct 2026 audit) */
.uh-capture-wrap { position: absolute; left: 0; right: 0; top: calc(var(--u) * 54); bottom: 0; overflow: hidden; }
.uh-capture { display: block; width: 100%; height: auto; }
.uh-fresh { position: absolute; left: calc(var(--u) * 8); bottom: calc(var(--u) * 8); padding: calc(var(--u) * 3) calc(var(--u) * 8); border-radius: 999px; background: #0E7C7B; color: #fff; font-size: calc(var(--u) * 9); font-weight: 800; letter-spacing: .06em; }
.uh-card__foot { display: grid; gap: calc(var(--u) * 6); margin-top: calc(var(--u) * 8); padding-top: calc(var(--u) * 8); border-top: 1px solid #e3e9f2; }
.uh-card__foot .uh-card__meta { margin-top: 0; }
.uh-card__foot .uh-cond { margin-top: 0; justify-self: start; }
.uh-pillbtn { display: inline-flex; align-items: center; gap: calc(var(--u) * 5); height: calc(var(--u) * 42); padding: 0 calc(var(--u) * 12); border: calc(var(--u) * 1.5) solid #cfd9e6; border-radius: 999px; background: #eef3fb; font-size: calc(var(--u) * 13.5); font-weight: 600; white-space: nowrap; color: #0b1c30; }
.uh-pillbtn .i { width: calc(var(--u) * 16); height: calc(var(--u) * 16); color: #0E7C7B; }
.uh-suburb { display: inline-flex; align-items: center; gap: calc(var(--u) * 6); margin-top: calc(var(--u) * 12); padding: calc(var(--u) * 8) calc(var(--u) * 14); border-radius: 999px; border: calc(var(--u) * 1.5) solid #9fe3db; background: #e6faf7; color: #0a5f5e; font-size: calc(var(--u) * 13); font-weight: 700; }
.uh-suburb .i { width: calc(var(--u) * 15); height: calc(var(--u) * 15); }
.uh-title small { display: block; margin-top: calc(var(--u) * 2); color: #8a96a3; font-size: calc(var(--u) * 13); }
.uh-hero { position: relative; overflow: hidden; aspect-ratio: auto; height: calc(var(--u) * 330); }
.uh-hero .uh-photo-img { object-fit: cover; }
.uh-dots { position: absolute; left: 50%; bottom: calc(var(--u) * 10); display: flex; gap: calc(var(--u) * 5); transform: translateX(-50%); }
.uh-dots i { width: calc(var(--u) * 6); height: calc(var(--u) * 6); border-radius: 999px; background: rgba(255, 255, 255, .7); }
.uh-dots i.is-on { width: calc(var(--u) * 16); background: #fff; }
.uh-pill.is-fresh { background: #ecfdf5; color: #047857; }
.uh-note { display: flex; align-items: center; gap: calc(var(--u) * 6); margin: calc(var(--u) * 12) 0 0; color: #4e5f7c; font-size: calc(var(--u) * 12); }
.uh-note .i { width: calc(var(--u) * 13); height: calc(var(--u) * 13); color: #0E7C7B; }
.uh-actions__price { flex: none; display: grid; align-content: center; font-weight: 800; font-size: calc(var(--u) * 20); }
.uh-actions__price small { font-size: calc(var(--u) * 9.5); letter-spacing: .1em; color: #4e5f7c; }
.uh-actions .uh-btn .i { width: calc(var(--u) * 18); height: calc(var(--u) * 18); }
.uh-tracker { margin: calc(var(--u) * 10) calc(var(--u) * 14) 0; padding: calc(var(--u) * 10) calc(var(--u) * 12); border-radius: calc(var(--u) * 16); background: #e6faf7; border: 1px solid #9fe3db; }
.uh-tracker__steps { display: flex; align-items: center; gap: calc(var(--u) * 6); font-size: calc(var(--u) * 12); font-weight: 800; color: #8a96a3; }
.uh-tracker__steps span { display: inline-flex; align-items: center; gap: calc(var(--u) * 4); }
.uh-tracker__steps span.is-done { color: #0E7C7B; }
.uh-tracker__steps span.is-now { color: #0b1c30; }
.uh-tracker__steps .i { width: calc(var(--u) * 12); height: calc(var(--u) * 12); }
.uh-tracker__steps i { flex: 1; height: calc(var(--u) * 2); border-radius: 2px; background: #9fe3db; }
.uh-tracker__plan { margin-top: calc(var(--u) * 6); }
.uh-tracker__plan small { display: block; font-size: calc(var(--u) * 9.5); font-weight: 800; letter-spacing: .1em; color: #0a5f5e; }
.uh-tracker__plan b { font-size: calc(var(--u) * 13.5); }
.uh-paycard { align-self: flex-start; display: grid; gap: calc(var(--u) * 4); width: 78%; padding: calc(var(--u) * 12); border-radius: calc(var(--u) * 18); background: #fff; border: 1px solid #e3e9f2; box-shadow: 0 2px 8px rgba(11, 28, 48, .06); }
.uh-paycard small { font-size: calc(var(--u) * 9.5); font-weight: 800; letter-spacing: .1em; color: #4e5f7c; }
.uh-paycard b { font-size: calc(var(--u) * 22); }
.uh-paycard span { font-size: calc(var(--u) * 12); color: #4e5f7c; }
.uh-paycard .uh-btn { height: calc(var(--u) * 40); font-size: calc(var(--u) * 14); color: #fff; margin-top: calc(var(--u) * 4); }
.uh-paycard em { display: inline-flex; align-items: center; gap: calc(var(--u) * 4); font-style: normal; font-size: calc(var(--u) * 11); font-weight: 700; color: #0a5f5e; }
.uh-paycard em .i { width: calc(var(--u) * 12); height: calc(var(--u) * 12); }
.uh-chips { position: absolute; left: 0; right: 0; bottom: calc(var(--u) * 88); display: flex; gap: calc(var(--u) * 6); padding: 0 calc(var(--u) * 14); overflow: hidden; }
.uh-chips span { flex: none; padding: calc(var(--u) * 7) calc(var(--u) * 12); border-radius: 999px; border: 1px solid #9fe3db; background: #fff; color: #0a5f5e; font-size: calc(var(--u) * 12.5); font-weight: 700; white-space: nowrap; }
.uh-checkout { padding: calc(var(--u) * 4) calc(var(--u) * 16) 0; }
.uh-itemstrip.is-flat { margin: 0; }
.uh-itemstrip .th { overflow: hidden; position: relative; }
.uh-lines { display: grid; gap: calc(var(--u) * 8); margin-top: calc(var(--u) * 14); padding: calc(var(--u) * 12) calc(var(--u) * 14); border-radius: calc(var(--u) * 16); background: #fff; border: 1px solid #e3e9f2; font-size: calc(var(--u) * 14); }
.uh-lines div { display: flex; justify-content: space-between; color: #3e4947; }
.uh-lines b { color: #0b1c30; }
.uh-lines .is-total { margin-top: calc(var(--u) * 4); padding-top: calc(var(--u) * 8); border-top: 1px solid #e3e9f2; font-weight: 800; font-size: calc(var(--u) * 16); color: #0b1c30; }
.uh-cardform { display: grid; gap: calc(var(--u) * 8); margin-top: calc(var(--u) * 14); }
.uh-cardtab { display: inline-flex; align-items: center; gap: calc(var(--u) * 6); justify-self: start; padding: calc(var(--u) * 8) calc(var(--u) * 12); border-radius: calc(var(--u) * 10); border: calc(var(--u) * 2) solid #0E7C7B; color: #0E7C7B; font-weight: 800; font-size: calc(var(--u) * 13); }
.uh-cardtab .i { width: calc(var(--u) * 16); height: calc(var(--u) * 16); }
.uh-cardrow { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--u) * 8); }
.uh-mono { font-variant-numeric: tabular-nums; letter-spacing: .04em; }
.uh-mono.is-ph { color: #9aa6b2; font-weight: 600; }
.uh-paid__btns { display: grid; gap: calc(var(--u) * 8); width: 100%; margin-top: calc(var(--u) * 18); }
.uh-paid__btns .uh-btn { height: calc(var(--u) * 46); }
.uh-form { padding: calc(var(--u) * 4) calc(var(--u) * 16) 0; }
.uh-form__label { margin: calc(var(--u) * 12) 0 calc(var(--u) * 6); font-size: calc(var(--u) * 11); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #4e5f7c; }
.uh-thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: calc(var(--u) * 8); }
.uh-thumb { position: relative; aspect-ratio: 1; border-radius: calc(var(--u) * 12); overflow: hidden; background: #fff; border: calc(var(--u) * 1.5) solid #e3e9f2; display: grid; place-items: center; color: #0E7C7B; }
.uh-thumb.is-add { border-style: dashed; border-color: #9fe3db; background: #f3fdfb; }
.uh-thumb .i { width: calc(var(--u) * 22); height: calc(var(--u) * 22); }
.uh-seg { display: grid; grid-template-columns: repeat(3, 1fr); padding: calc(var(--u) * 4); border-radius: calc(var(--u) * 12); background: #eef3fb; font-size: calc(var(--u) * 12.5); font-weight: 700; text-align: center; color: #4e5f7c; }
.uh-seg span { padding: calc(var(--u) * 7) 0; border-radius: calc(var(--u) * 9); }
.uh-seg span.is-on { background: #fff; color: #0b1c30; box-shadow: 0 1px 4px rgba(11, 28, 48, .1); }
.uh-form .uh-fields { padding: calc(var(--u) * 12) 0 0; }
.uh-condchips { display: flex; flex-wrap: wrap; gap: calc(var(--u) * 6); }
.uh-condchips span { padding: calc(var(--u) * 6) calc(var(--u) * 10); border-radius: 999px; border: 1px solid #cfd9e6; font-size: calc(var(--u) * 12); font-weight: 700; color: #4e5f7c; background: #fff; }
.uh-condchips span.is-on { background: #0E7C7B; border-color: #0E7C7B; color: #fff; }