/* Real KATANA app screens inside the phone (rebuilt from the team's screenshots). Designed at the iPhone 18 Pro Max's
   440 pt width: --u is one point of that screen, so everything scales with the phone (container query units). */
html body .phone .screen { container-type: size; }
.real { --u: calc(100cqw / 440); position: absolute; inset: 0; z-index: 1; overflow: hidden; background: #F6F7F9; color: #131929;
  font-family: "Inter", "Instrument Sans", -apple-system, system-ui, sans-serif; -webkit-font-smoothing: antialiased; font-size: calc(15 * var(--u)); line-height: 1.35;
  display: flex; flex-direction: column; text-align: left; letter-spacing: 0; }
.real * { box-sizing: border-box; }
.real .ic { width: calc(22 * var(--u)); height: calc(22 * var(--u)); flex: none; }
/* status bar + app bar */
.rs-top, .rs-top.w { background: transparent; position: relative; z-index: 1; }   /* one continuous background from status bar to home indicator */
.rs-status { height: calc(62 * var(--u)); display: flex; align-items: center; justify-content: space-between; padding: calc(8 * var(--u)) calc(34 * var(--u)) 0 calc(44 * var(--u)); }
.rs-status b { font-size: calc(17 * var(--u)); font-weight: 600; }
.rs-status span { display: flex; gap: calc(6 * var(--u)); align-items: center; }
.rs-status svg { height: calc(12 * var(--u)); width: auto; fill: currentColor; }
.rs-bar { height: calc(56 * var(--u)); display: flex; align-items: center; justify-content: space-between; padding: 0 calc(16 * var(--u)); }
.rs-bar.c b { font-size: calc(17 * var(--u)); font-weight: 600; }
.rs-bar.c > span { width: calc(22 * var(--u)); }
.rs-bell { position: relative; } .rs-bell .ic { width: calc(26 * var(--u)); height: calc(26 * var(--u)); }
.rs-bell i { position: absolute; top: calc(-1 * var(--u)); right: calc(-2 * var(--u)); width: calc(9 * var(--u)); height: calc(9 * var(--u)); border-radius: 50%; background: #DC3546; }
.rs-pad { padding: calc(16 * var(--u)) calc(16 * var(--u)) calc(34 * var(--u)); display: flex; flex-direction: column; gap: calc(12 * var(--u)); flex: 1; min-height: 0; }
/* type */
.rs-kick, .rs-cap { font-size: calc(13 * var(--u)); letter-spacing: .06em; color: #6B7280; font-weight: 500; }
.rs-h1 { margin: calc(-4 * var(--u)) 0 calc(6 * var(--u)); font-size: calc(30 * var(--u)); line-height: 1.18; font-weight: 600; letter-spacing: -.015em; }
.rs-h2 { margin: calc(10 * var(--u)) 0 0; font-size: calc(24 * var(--u)); font-weight: 600; }
.rs-sec { display: flex; justify-content: space-between; align-items: baseline; margin-top: calc(10 * var(--u)); }
.rs-sec.first { margin-top: calc(4 * var(--u)); }
.rs-sec b { font-size: calc(21 * var(--u)); font-weight: 600; } .rs-sec span { color: #6B7280; font-size: calc(14 * var(--u)); }
.rs-sec a { color: #1E5FA0; font-weight: 600; font-size: calc(15 * var(--u)); }
/* cards */
.rs-card { background: #FFFFFF; border-radius: calc(20 * var(--u)); box-shadow: 0 calc(1 * var(--u)) calc(4 * var(--u)) rgba(17,24,39,.06); }
.rs-strength { padding: calc(22 * var(--u)) calc(22 * var(--u)) calc(18 * var(--u)); }
.rs-row { display: flex; align-items: center; justify-content: space-between; gap: calc(12 * var(--u)); }
.rs-score { display: flex; align-items: baseline; gap: calc(6 * var(--u)); margin-top: calc(6 * var(--u)); }
.rs-score b { font-size: calc(56 * var(--u)); font-weight: 600; line-height: 1; letter-spacing: -.02em; }
.rs-score span { font-size: calc(28 * var(--u)); color: #9CA3AF; }
.rs-body { margin: calc(8 * var(--u)) 0 0; font-size: calc(17 * var(--u)); line-height: 1.4; color: #4B5563; max-width: calc(220 * var(--u)); }
.rs-body strong { color: #131929; font-weight: 600; }
.rs-ring { flex: none; width: calc(106 * var(--u)); aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(closest-side, #FFF calc(100% - 10 * var(--u)), transparent calc(100% - 10 * var(--u) + 1px)), conic-gradient(#2563EB calc(var(--p) * 1%), #F3F4F6 0); }
.rs-ring span { font-size: calc(18 * var(--u)); font-weight: 500; }
.rs-segs { display: grid; grid-template-columns: repeat(5, 1fr); gap: calc(10 * var(--u)); margin-top: calc(22 * var(--u)); }
.rs-segs i { height: calc(7 * var(--u)); border-radius: 99px; background: #E5E7EB; } .rs-segs i.on { background: #2563EB; }
.rs-foot { display: flex; justify-content: space-between; margin-top: calc(12 * var(--u)); color: #6B7280; font-size: calc(14.5 * var(--u)); }
.rs-step { display: flex; align-items: center; gap: calc(14 * var(--u)); padding: calc(16 * var(--u)); }
.rs-ico { width: calc(50 * var(--u)); height: calc(50 * var(--u)); border-radius: calc(14 * var(--u)); display: grid; place-items: center; flex: none; }
.rs-ico.b { background: #DBEAFE; color: #2563EB; } .rs-ico.g { background: #DCFCE7; color: #16A34A; }
.rs-st { flex: 1; min-width: 0; display: grid; gap: calc(2 * var(--u)); }
.rs-st small { font-size: calc(12 * var(--u)); letter-spacing: .04em; color: #6B7280; font-weight: 500; }
.rs-st b { font-size: calc(16.5 * var(--u)); font-weight: 500; display: flex; align-items: center; gap: calc(8 * var(--u)); white-space: nowrap; }
.rs-st span { font-size: calc(13.5 * var(--u)); color: #6B7280; }
.rs-pt { font-style: normal; font-size: calc(11.5 * var(--u)); font-weight: 600; color: #854D0E; background: #FEF08A; padding: calc(2 * var(--u)) calc(7 * var(--u)); border-radius: calc(6 * var(--u)); }
.rs-btn { flex: none; background: #2563EB; color: #FFF; font-weight: 600; font-size: calc(15 * var(--u)); padding: calc(10 * var(--u)) calc(18 * var(--u)); border-radius: 99px; }
/* interview */
.rs-iv { gap: calc(10 * var(--u)); background: none; }
.real:has(.rs-iv) { background: linear-gradient(#F3F6F9, #F2EFF6); }   /* the interview gradient runs under the status bar too */
.rs-prog { height: calc(7 * var(--u)); border-radius: 99px; background: #E5E3E8; margin-top: calc(6 * var(--u)); overflow: hidden; }
.rs-prog i { display: block; height: 100%; background: #3B82F6; border-radius: 99px; transition: width 1s linear; }
.rs-time { text-align: center; font-size: calc(16 * var(--u)); font-variant-numeric: tabular-nums; }
.rs-note { display: flex; gap: calc(10 * var(--u)); align-items: center; background: #FEFBEA; border-radius: calc(12 * var(--u)); padding: calc(12 * var(--u)) calc(14 * var(--u)); color: #9A3412; font-size: calc(13.5 * var(--u)); text-align: center; }
.rs-note .ic { width: calc(18 * var(--u)); height: calc(18 * var(--u)); }
.rs-cam { aspect-ratio: 461 / 258; border-radius: calc(12 * var(--u)); background-position: center; background-size: cover; background-repeat: no-repeat; }
.rs-self { margin-top: auto; align-self: flex-end; width: calc(198 * var(--u)); aspect-ratio: 16 / 9.8; border-radius: calc(12 * var(--u)); background: linear-gradient(135deg, #B8B4AF, #8F8C88 60%, #A6A29D); position: relative; margin-bottom: calc(14 * var(--u)); }
.rs-self span { position: absolute; left: calc(6 * var(--u)); top: calc(6 * var(--u)); width: calc(52 * var(--u)); height: calc(46 * var(--u)); border-radius: calc(8 * var(--u)); background: rgba(255,255,255,.85); display: grid; place-items: center; color: #6B7280; }
.rs-self .ic { width: calc(18 * var(--u)); height: calc(18 * var(--u)); }
.rs-call { border-top: 1px solid #E5E7EB; background: #F2EFF6; padding: calc(12 * var(--u)) calc(16 * var(--u)) calc(40 * var(--u)); display: flex; justify-content: flex-end; }
.rs-end { background: #DC2626; color: #FFF; font-weight: 600; font-size: calc(17 * var(--u)); padding: calc(14 * var(--u)) calc(34 * var(--u)); border-radius: calc(8 * var(--u)); display: flex; align-items: center; gap: calc(10 * var(--u)); }
/* wallet */
.rs-wallet { padding: calc(20 * var(--u)); display: grid; gap: calc(16 * var(--u)); }
.rs-star { width: calc(62 * var(--u)); height: calc(62 * var(--u)); border-radius: calc(16 * var(--u)); background: #FEF3C7; display: grid; place-items: center; color: #111827; flex: none; }
.rs-star .ic { width: calc(26 * var(--u)); height: calc(26 * var(--u)); }
.rs-pts { flex: 1; } .rs-pts small { font-size: calc(15 * var(--u)); color: #6B7280; }
.rs-pts b { display: block; font-size: calc(34 * var(--u)); font-weight: 600; line-height: 1.1; } .rs-pts b span { font-size: calc(18 * var(--u)); color: #6B7280; font-weight: 400; margin-left: calc(6 * var(--u)); }
.rs-wallet a { color: #3958B5; font-weight: 600; font-size: calc(17 * var(--u)); }
.rs-tip { display: flex; gap: calc(12 * var(--u)); background: #FAFAFA; border-radius: calc(14 * var(--u)); padding: calc(14 * var(--u)); color: #4B5563; font-size: calc(14.5 * var(--u)); line-height: 1.45; }
.rs-tip .ic { color: #6B7280; }
/* jobs */
.rs-job { padding: calc(18 * var(--u)); display: grid; gap: calc(10 * var(--u)); }
.rs-job > b { font-size: calc(18 * var(--u)); font-weight: 500; }
.rs-chips { display: flex; flex-wrap: wrap; gap: calc(8 * var(--u)); }
.rs-chips i { font-style: normal; font-size: calc(12.5 * var(--u)); color: #6B7280; background: #F3F4F6; border-radius: 99px; padding: calc(5 * var(--u)) calc(11 * var(--u)); }
.rs-job p { margin: 0; font-size: calc(14 * var(--u)); color: #6B7280; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.rs-sal { color: #1E5FA0; font-weight: 500; font-size: calc(15 * var(--u)); }
.rs-co { display: flex; align-items: center; gap: calc(8 * var(--u)); color: #6B7280; font-size: calc(14 * var(--u)); }
.rs-co .ic { width: calc(18 * var(--u)); height: calc(18 * var(--u)); }
/* messages */
.rs-pills { display: flex; gap: calc(8 * var(--u)); }
.rs-pills i { font-style: normal; font-size: calc(15 * var(--u)); color: #1E3A8A; border: 1px solid #E5E7EB; background: #FFF; border-radius: 99px; padding: calc(8 * var(--u)) calc(14 * var(--u)); white-space: nowrap; }
.rs-pills i.on { background: #0B0B0B; color: #FFF; border-color: #0B0B0B; }
.rs-verified { display: flex; gap: calc(14 * var(--u)); align-items: center; background: #EEF1FE; border-radius: calc(18 * var(--u)); padding: calc(18 * var(--u)); }
.rs-verified > span { flex: none; width: calc(50 * var(--u)); height: calc(50 * var(--u)); border-radius: calc(12 * var(--u)); background: #2563EB; color: #FFF; display: grid; place-items: center; }
.rs-verified b { font-size: calc(16.5 * var(--u)); font-weight: 500; } .rs-verified p { margin: calc(2 * var(--u)) 0 0; color: #6B7280; font-size: calc(14 * var(--u)); }
.rs-msg { display: flex; align-items: center; gap: calc(14 * var(--u)); padding: calc(16 * var(--u)); border: 1px solid #E5E7EB; box-shadow: none; }
.rs-bldg { width: calc(50 * var(--u)); height: calc(50 * var(--u)); border-radius: calc(12 * var(--u)); background: #F3F4F6; display: grid; place-items: center; color: #6B7280; }
.rs-msg b { flex: 1; font-size: calc(17 * var(--u)); font-weight: 500; } .rs-msg small { color: #6B7280; font-size: calc(14 * var(--u)); }
.rs-empty { border: 1px solid #D1D5DB; border-radius: calc(16 * var(--u)); padding: calc(20 * var(--u)); text-align: center; color: #6B7280; font-size: calc(14.5 * var(--u)); line-height: 1.45; }
.rs-home { position: absolute; left: 50%; bottom: calc(8 * var(--u)); translate: -50% 0; width: calc(146 * var(--u)); height: calc(5 * var(--u)); border-radius: 99px; background: #111; z-index: 2; }

.real .rs-pad { overflow: hidden; }